Synchornize example code with latest app-template-react

Author: jihchi

README.md

@@ -31,7 +31,7 @@ See the section about running tests for more information.
 
 ### npm run build
 
-Builds a static copy of yor site to the `build/` folder.
+Builds a static copy of your site to the `build/` folder.
 Your app is ready to be deployed!
 
 **For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your `snowpack.config.json` config file.

package.json

@@ -38,8 +38,8 @@
   },
   "devDependencies": {
     "@glennsl/bs-jest": "^0.5.1",
-    "@snowpack/app-scripts-react": "^1.10.0",
-    "@snowpack/plugin-run-script": "^2.1.2",
+    "@snowpack/app-scripts-react": "^1.12.0",
+    "@snowpack/plugin-run-script": "^2.1.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "bs-platform": "^8.2.0",
@@ -48,6 +48,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "reason-react": "^0.9.1",
-    "snowpack": "^2.11.1"
+    "snowpack": "^2.13.1"
   }
 }

src/App.css

@@ -1,7 +1,14 @@
 .App {
   text-align: center;
 }
-
+.App code {
+  background: #FFF3;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.App p {
+  margin: 0.4rem;
+}
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/App.res

@@ -3,7 +3,14 @@
 %%raw(`import './App.css';`)
 
 @react.component
-let make = () =>
+let make = () => {
+  let (count, setCount) = React.useState(() => 0)
+
+  React.useEffect0(() => {
+    let intervalId = Js.Global.setInterval(() => setCount(count => count + 1), 1000)
+    Some(() => Js.Global.clearInterval(intervalId))
+  })
+
   <div className="App">
     <header className="App-header">
       <img src=logo className="App-logo" alt="logo" />
@@ -12,8 +19,14 @@ let make = () =>
         <code> {React.string("src/App.jsx")} </code>
         {React.string(" and save to reload.")}
       </p>
+      <p>
+        {React.string("Page has been open for ")}
+        <code> {React.int(count)} </code>
+        {React.string(" seconds.")}
+      </p>
       <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
         {React.string("Learn React")}
       </a>
     </header>
   </div>
+}