Merge pull request #3136 from jdeisenberg/master

Fix typo in React and React-lite templates

Author: bobzhang

jscomp/bsb/templates/react-lite/src/Component1.re

@@ -1,5 +1,5 @@
 /* This is the basic component. */
-let component = ReasonReact.statelessComponent("Page");
+let component = ReasonReact.statelessComponent("Component1");
 
 /* Your familiar handleClick from ReactJS. This mandatorily takes the payload,
    then the `self` record, which contains state (none here), `handle`, `reduce`
@@ -9,15 +9,15 @@ let handleClick = (_event, _self) => Js.log("clicked!");
 /* `make` is the function that mandatorily takes `children` (if you want to use
    `JSX). `message` is a named argument, which simulates ReactJS props. Usage:
 
-   `<Page message="hello" />`
+   `<Component1 message="hello" />`
 
    Which desugars to
 
-   `ReasonReact.element(Page.make(~message="hello", [||]))` */
+   `ReasonReact.element(Component1.make(~message="hello", [||]))` */
 let make = (~message, _children) => {
   ...component,
   render: self =>
     <div onClick=(self.handle(handleClick))>
-      (ReasonReact.string(message))
+      {ReasonReact.string(message)}
     </div>,
 };

jscomp/bsb/templates/react-lite/src/Component2.re

@@ -32,13 +32,13 @@ let make = (~greeting, _children) => {
     let message =
       "You've clicked this " ++ string_of_int(self.state.count) ++ " times(s)";
     <div>
-      <button onClick=(_event => self.send(Click))>
-        (ReasonReact.string(message))
+      <button onClick={_event => self.send(Click)}>
+        {ReasonReact.string(message)}
       </button>
-      <button onClick=(_event => self.send(Toggle))>
-        (ReasonReact.string("Toggle greeting"))
+      <button onClick={_event => self.send(Toggle)}>
+        {ReasonReact.string("Toggle greeting")}
       </button>
-      (self.state.show ? ReasonReact.string(greeting) : ReasonReact.null)
+      {self.state.show ? ReasonReact.string(greeting) : ReasonReact.null}
     </div>;
   },
 };

jscomp/bsb/templates/react-lite/src/Index.re

@@ -1,3 +1,3 @@
-ReactDOMRe.renderToElementWithId(<Component1 message="Hello!" />, "index1");
+ReactDOMRe.renderToElementWithId(<Component1 message="Hello! Click this text." />, "index1");
 
 ReactDOMRe.renderToElementWithId(<Component2 greeting="Hello!" />, "index2");

jscomp/bsb/templates/react/src/Component1.re

@@ -1,5 +1,5 @@
 /* This is the basic component. */
-let component = ReasonReact.statelessComponent("Page");
+let component = ReasonReact.statelessComponent("Component1");
 
 /* Your familiar handleClick from ReactJS. This mandatorily takes the payload,
    then the `self` record, which contains state (none here), `handle`, `reduce`
@@ -9,15 +9,15 @@ let handleClick = (_event, _self) => Js.log("clicked!");
 /* `make` is the function that mandatorily takes `children` (if you want to use
    `JSX). `message` is a named argument, which simulates ReactJS props. Usage:
 
-   `<Page message="hello" />`
+   `<Component1 message="hello" />`
 
    Which desugars to
 
-   `ReasonReact.element(Page.make(~message="hello", [||]))` */
+   `ReasonReact.element(Component1.make(~message="hello", [||]))` */
 let make = (~message, _children) => {
   ...component,
   render: self =>
-    <div onClick=(self.handle(handleClick))>
-      (ReasonReact.string(message))
+    <div onClick={self.handle(handleClick)}>
+      {ReasonReact.string(message)}
     </div>,
 };

jscomp/bsb/templates/react/src/Component2.re

@@ -32,13 +32,13 @@ let make = (~greeting, _children) => {
     let message =
       "You've clicked this " ++ string_of_int(self.state.count) ++ " times(s)";
     <div>
-      <button onClick=(_event => self.send(Click))>
-        (ReasonReact.string(message))
+      <button onClick={_event => self.send(Click)}>
+        {ReasonReact.string(message)}
       </button>
-      <button onClick=(_event => self.send(Toggle))>
-        (ReasonReact.string("Toggle greeting"))
+      <button onClick={_event => self.send(Toggle)}>
+        {ReasonReact.string("Toggle greeting")}
       </button>
-      (self.state.show ? ReasonReact.string(greeting) : ReasonReact.null)
+      {self.state.show ? ReasonReact.string(greeting) : ReasonReact.null}
     </div>;
   },
 };

jscomp/bsb/templates/react/src/Index.re

@@ -1,3 +1,3 @@
-ReactDOMRe.renderToElementWithId(<Component1 message="Hello!" />, "index1");
+ReactDOMRe.renderToElementWithId(<Component1 message="Hello! Click this text." />, "index1");
 
 ReactDOMRe.renderToElementWithId(<Component2 greeting="Hello!" />, "index2");

jscomp/bsb/templates/react/src/index.html

@@ -7,6 +7,7 @@
 <body>
   Component 1:
   <div id="index1"></div>
+
   Component 2:
   <div id="index2"></div>