From b2571939d9878db872e392e2f26ffc5358e22e23 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Thu, 8 Mar 2018 01:34:20 -0800
Subject: [PATCH] [Bsb] Better ReasonReact template

---
 jscomp/bsb/templates/react/README.md          | 13 ++---
 jscomp/bsb/templates/react/package.json       |  2 +-
 .../react/src/{Page.re => Component1.re}      |  6 ++-
 jscomp/bsb/templates/react/src/Component2.re  | 47 +++++++++++++++++++
 jscomp/bsb/templates/react/src/Index.re       |  4 +-
 jscomp/bsb/templates/react/src/index.html     |  8 +++-
 6 files changed, 68 insertions(+), 12 deletions(-)
 rename jscomp/bsb/templates/react/src/{Page.re => Component1.re} (84%)
 create mode 100644 jscomp/bsb/templates/react/src/Component2.re

diff --git a/jscomp/bsb/templates/react/README.md b/jscomp/bsb/templates/react/README.md
index 1cbd4956c0..e43c0956ff 100644
--- a/jscomp/bsb/templates/react/README.md
+++ b/jscomp/bsb/templates/react/README.md
@@ -1,21 +1,22 @@
 # ${bsb:name}
 
-## Run this project:
+## Run Project
 
-```
+```sh
 npm install
 npm start
 # in another tab
 npm run webpack
 ```
-After you see the webpack compilation succeed (the `npm run webpack` step), open up the nested html files in `src/*` (**no server needed!**). Then modify whichever file in `src` and refresh the page to see the changes.
+After you see the webpack compilation succeed (the `npm run webpack` step), open up `src/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.
 
 **For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example
 
-## Build this project
+## Build for Production
 
-```
+```sh
 npm run build
-npm run webpack:build
+npm run webpack:production
 ```
 
+This will replace the development artifact `build/Index.js` for an optimized version.
diff --git a/jscomp/bsb/templates/react/package.json b/jscomp/bsb/templates/react/package.json
index 75cbbfa7d4..1298d76194 100644
--- a/jscomp/bsb/templates/react/package.json
+++ b/jscomp/bsb/templates/react/package.json
@@ -7,7 +7,7 @@
     "clean": "bsb -clean-world",
     "test": "echo \"Error: no test specified\" && exit 1",
     "webpack": "webpack -w",
-    "webpack:build": "NODE_ENV=production webpack"
+    "webpack:production": "NODE_ENV=production webpack"
   },
   "keywords": [
     "BuckleScript"
diff --git a/jscomp/bsb/templates/react/src/Page.re b/jscomp/bsb/templates/react/src/Component1.re
similarity index 84%
rename from jscomp/bsb/templates/react/src/Page.re
rename to jscomp/bsb/templates/react/src/Component1.re
index 91a77bd3aa..6b48467a21 100644
--- a/jscomp/bsb/templates/react/src/Page.re
+++ b/jscomp/bsb/templates/react/src/Component1.re
@@ -16,6 +16,8 @@ let handleClick = (_event, _self) => Js.log("clicked!");
    `ReasonReact.element(Page.make(~message="hello", [||]))` */
 let make = (~message, _children) => {
   ...component,
-  render: (self) =>
-    <div onClick=(self.handle(handleClick))> (ReasonReact.stringToElement(message)) </div>
+  render: self =>
+    <div onClick=(self.handle(handleClick))>
+      (ReasonReact.stringToElement(message))
+    </div>,
 };
diff --git a/jscomp/bsb/templates/react/src/Component2.re b/jscomp/bsb/templates/react/src/Component2.re
new file mode 100644
index 0000000000..59ae4b80ff
--- /dev/null
+++ b/jscomp/bsb/templates/react/src/Component2.re
@@ -0,0 +1,47 @@
+/* State declaration */
+type state = {
+  count: int,
+  show: bool,
+};
+
+/* Action declaration */
+type action =
+  | Click
+  | Toggle;
+
+/* Component template declaration.
+   Needs to be **after** state and action declarations! */
+let component = ReasonReact.reducerComponent("Example");
+
+/* greeting and children are props. `children` isn't used, therefore ignored.
+   We ignore it by prepending it with an underscore */
+let make = (~greeting, _children) => {
+  /* spread the other default fields of component here and override a few */
+  ...component,
+
+  initialState: () => {count: 0, show: true},
+
+  /* State transitions */
+  reducer: (action, state) =>
+    switch (action) {
+    | Click => ReasonReact.Update({...state, count: state.count + 1})
+    | Toggle => ReasonReact.Update({...state, show: ! state.show})
+    },
+
+  render: self => {
+    let message =
+      "You've clicked this " ++ string_of_int(self.state.count) ++ " times(s)";
+    <div>
+      <button onClick=(_event => self.send(Click))>
+        (ReasonReact.stringToElement(message))
+      </button>
+      <button onClick=(_event => self.send(Toggle))>
+        (ReasonReact.stringToElement("Toggle greeting"))
+      </button>
+      (
+        self.state.show ?
+          ReasonReact.stringToElement(greeting) : ReasonReact.nullElement
+      )
+    </div>;
+  },
+};
diff --git a/jscomp/bsb/templates/react/src/Index.re b/jscomp/bsb/templates/react/src/Index.re
index 0c89ce0d4f..df4df9cf50 100644
--- a/jscomp/bsb/templates/react/src/Index.re
+++ b/jscomp/bsb/templates/react/src/Index.re
@@ -1 +1,3 @@
-ReactDOMRe.renderToElementWithId(<Page message="Hello!" />, "index");
+ReactDOMRe.renderToElementWithId(<Component1 message="Hello!" />, "index1");
+
+ReactDOMRe.renderToElementWithId(<Component2 greeting="Hello!" />, "index2");
diff --git a/jscomp/bsb/templates/react/src/index.html b/jscomp/bsb/templates/react/src/index.html
index 0c9593db02..c8536d22c4 100644
--- a/jscomp/bsb/templates/react/src/index.html
+++ b/jscomp/bsb/templates/react/src/index.html
@@ -2,10 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Pure Reason Example</title>
+  <title>ReasonReact Example2</title>
 </head>
 <body>
-  <div id="index"></div>
+  Component 1:
+  <div id="index1"></div>
+  Component 2:
+  <div id="index2"></div>
+
   <script src="../build/Index.js"></script>
 </body>
 </html>