docs: add demo for React hooks and context (#150)

demo/reactjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app"]
+}

demo/reactjs/src/App.js

@@ -5,8 +5,7 @@ import tpl from './views/demo.liquid';
 import Parser from 'html-react-parser';
 import { engine } from './engine';
 
-class App extends Component {
-
+export class App extends Component {
   async componentDidMount() {
     const html = await engine.renderFile(tpl.toString(), {name: 'alice', logo: logo })
     this.setState({ html })  // outputs "Alice"
@@ -22,5 +21,3 @@ class App extends Component {
     );
   }
 }
-
-export default App;

demo/reactjs/src/AppWithHooks.js

@@ -0,0 +1,41 @@
+/*
+ * function Component with Hooks: Modify ./index.js to apply this file
+ */
+import React, { useState, useLayoutEffect } from 'react';
+import './App.css';
+import logo from './logo.svg';
+import tplsrc from './views/showing-click-times.liquid';
+import Parser from 'html-react-parser';
+import { engine } from './engine';
+import { Context } from './Context';
+import { ClickButton } from './ClickButton';
+
+const fetchTpl = engine.getTemplate(tplsrc.toString())
+
+export function App() {
+  const [state, setState] = useState({
+    logo: logo,
+    name: 'alice',
+    clickCount: 0,
+    html: ''
+  });
+
+  useLayoutEffect(() => {
+    fetchTpl
+      .then(tpl => engine.render(tpl, state))
+      .then(html => setState({...state, html}))
+  }, [state.clickCount])
+
+  return (
+    <div className="App">
+      {Parser(`${state.html}`)}
+      <Context.Provider
+        value={{
+          count: () => setState({...state, clickCount: state.clickCount + 1})
+        }}
+      >
+        <ClickButton/>
+      </Context.Provider>
+    </div>
+  );
+}

demo/reactjs/src/ClickButton.css

@@ -0,0 +1,5 @@
+button {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}

demo/reactjs/src/ClickButton.js

@@ -0,0 +1,15 @@
+import './ClickButton.css';
+import React from 'react';
+import { Context } from './Context';
+
+export function ClickButton() {
+  return (
+    <Context.Consumer>
+      {context => (
+        <button onClick={context.count}>
+          Click Here!
+        </button>
+      )}
+    </Context.Consumer>
+  );
+};

demo/reactjs/src/Context.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const Context = React.createContext()

demo/reactjs/src/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { App } from './App';
+// import { App } from './AppWithHooks';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 

demo/reactjs/src/views/showing-click-times.liquid

@@ -0,0 +1,14 @@
+<header className="App-header">
+    {{ logo | image }}
+    <h2>Welcome {{name | capitalize}}</h2>
+    <p>Edit <code>src/App.js</code> and save to reload.</p>
+    <p>You have clicked {{clickCount}} times.</p>
+    <a
+        className="App-link"
+        href="https://reactjs.org"
+        target="_blank"
+        rel="noopener noreferrer"
+    >
+        Learn React
+    </a>
+</header>