[Bsb] Better ReasonReact template (#2594)

chenglou · web-flow · commit 1b05e763cbb0 · 2018-03-08T02:00:02.000-08:00
diff --git 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
@@ -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/Component1.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
@@ -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
@@ -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
@@ -2,10 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Pure Reason Example</title>
+  <title>ReasonReact Examples</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>
