From 7bae5bcb79c03d24105dbadefa759c761eff2083 Mon Sep 17 00:00:00 2001
From: harttle <yangjvn@126.com>
Date: Tue, 8 Oct 2019 21:50:59 +0800
Subject: [PATCH] docs: add demo for React hooks and context (#150)

---
 demo/reactjs/.eslintrc.json                   |  3 ++
 demo/reactjs/src/App.js                       |  5 +--
 demo/reactjs/src/AppWithHooks.js              | 41 +++++++++++++++++++
 demo/reactjs/src/ClickButton.css              |  5 +++
 demo/reactjs/src/ClickButton.js               | 15 +++++++
 demo/reactjs/src/Context.js                   |  3 ++
 demo/reactjs/src/index.js                     |  3 +-
 .../src/views/showing-click-times.liquid      | 14 +++++++
 8 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 demo/reactjs/.eslintrc.json
 create mode 100644 demo/reactjs/src/AppWithHooks.js
 create mode 100644 demo/reactjs/src/ClickButton.css
 create mode 100644 demo/reactjs/src/ClickButton.js
 create mode 100644 demo/reactjs/src/Context.js
 create mode 100644 demo/reactjs/src/views/showing-click-times.liquid

diff --git a/demo/reactjs/.eslintrc.json b/demo/reactjs/.eslintrc.json
new file mode 100644
index 000000000..fcf5ef32e
--- /dev/null
+++ b/demo/reactjs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app"]
+}
diff --git a/demo/reactjs/src/App.js b/demo/reactjs/src/App.js
index 59944d7da..008742623 100644
--- a/demo/reactjs/src/App.js
+++ b/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;
diff --git a/demo/reactjs/src/AppWithHooks.js b/demo/reactjs/src/AppWithHooks.js
new file mode 100644
index 000000000..68b788e6a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/demo/reactjs/src/ClickButton.css b/demo/reactjs/src/ClickButton.css
new file mode 100644
index 000000000..5dc3a02a6
--- /dev/null
+++ b/demo/reactjs/src/ClickButton.css
@@ -0,0 +1,5 @@
+button {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}
diff --git a/demo/reactjs/src/ClickButton.js b/demo/reactjs/src/ClickButton.js
new file mode 100644
index 000000000..1fdbc274d
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/demo/reactjs/src/Context.js b/demo/reactjs/src/Context.js
new file mode 100644
index 000000000..7e7f3a54b
--- /dev/null
+++ b/demo/reactjs/src/Context.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+export const Context = React.createContext()
diff --git a/demo/reactjs/src/index.js b/demo/reactjs/src/index.js
index 0c5e75da1..1f5d14958 100644
--- a/demo/reactjs/src/index.js
+++ b/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'));
 
diff --git a/demo/reactjs/src/views/showing-click-times.liquid b/demo/reactjs/src/views/showing-click-times.liquid
new file mode 100644
index 000000000..a29703a8d
--- /dev/null
+++ b/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>