First commit

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.merlin
+.bsb.lock
+npm-debug.log
+/lib/bs/
+/node_modules/
+/bundleOutput/

README.md

@@ -0,0 +1,61 @@
+# ReasonReact Template & Examples
+
+This is:
+- A template for your new ReasonReact project.
+- A collection of thin examples illustrating ReasonReact usage.
+- Extra helper documentation for ReasonReact (full ReasonReact docs [here](https://reasonml.github.io/reason-react/)).
+
+`src` contains 4 sub-folders, each an independent, self-contained ReasonReact example. Feel free to delete any of them and shape this into your project! This template's more malleable than you might be used to =).
+
+The point of this template and examples is to let you understand and personally tweak the entirely of it. We **don't** give you an opaque, elaborate mega build setup just to put some boxes on the screen. It strikes to stay transparent, learnable, and simple. You're encouraged to read every file; it's a great feeling, having the full picture of what you're using and being able to touch any part.
+
+## Run
+
+```sh
+npm install
+npm run server
+# in a new tab
+npm start
+```
+
+Open a new web page to `http://localhost:8000/`. Change any `.re` file in `src` to see the page auto-reload. **You don't need any bundler when you're developing**!
+
+**How come we don't need any bundler during development**? We highly encourage you to open up `index.html` to check for yourself!
+
+# Features Used
+
+|                           | Blinking Greeting | Reducer from ReactJS Docs | Fetch Dog Pictures | Reason Using JS Using Reason |
+|---------------------------|-------------------|---------------------------|--------------------|------------------------------|
+| No props                  |                   | ✓                         |                    |                              |
+| Has props                 |                   |                           |                    | ✓                            |
+| Children props            | ✓                 |                           |                    |                              |
+| No state                  |                   |                           |                    | ✓                            |
+| Has state                 | ✓                 |                           |  ✓                 |                              |
+| Has state with useReducer |                   | ✓                         |                    |                              |
+| ReasonReact using ReactJS |                   |                           |                    | ✓                            |
+| ReactJS using ReasonReact |                   |                           |                    | ✓                            |
+| useEffect                 | ✓                 |                           |  ✓                 |                              |
+| Dom attribute             | ✓                 | ✓                         |                    | ✓                            |
+| Styling                   | ✓                 | ✓                         |  ✓                 | ✓                            |
+| React.array               |                   |                           |  ✓                 |                              |
+
+# Bundle for Production
+
+We've included a convenience `UNUSED_webpack.config.js`, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.
+
+We've also provided a barebone `indexProduction.html`, to serve your bundle.
+
+```sh
+npm install webpack webpack-cli
+# rename file
+mv UNUSED_webpack.config.js webpack.config.js
+# call webpack to bundle for production
+./node_modules/.bin/webpack
+open indexProduction.html
+```
+
+# Handle Routing Yourself
+
+To serve the files, this template uses a minimal dependency called `moduleserve`. A URL such as `localhost:8000/scores/john` resolves to the file `scores/john.html`. If you'd like to override this and handle URL resolution yourself, change the `server` command in `package.json` from `moduleserve ./ --port 8000` to `moduleserve ./ --port 8000 --spa` (for "single page application"). This will make `moduleserve` serve the default `index.html` for any URL. Since `index.html` loads `Index.bs.js`, you can grab hold of the URL in the corresponding `Index.re` and do whatever you want.
+
+By the way, ReasonReact comes with a small [router](https://reasonml.github.io/reason-react/docs/en/router) you might be interested in.

UNUSED_webpack.config.js

@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/Index.bs.js',
+  // If you ever want to use webpack during development, change 'production'
+  // to 'development' as per webpack documentation. Again, you don't have to
+  // use webpack or any other bundler during development! Recheck README if
+  // you didn't know this
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, "bundleOutput"),
+    filename: 'index.js',
+  },
+};

bsconfig.json

@@ -0,0 +1,21 @@
+{
+  "name": "reason-react-examples",
+  "reason": {
+    "react-jsx": 3
+  },
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
+  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
+  "package-specs": [{
+    "module": "commonjs",
+    "in-source": true
+  }],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "bs-dependencies": [
+    "reason-react"
+  ],
+  "refmt": 3
+}

index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <script>
+    // stub a variable ReactJS checks. ReactJS assumes you're using a bundler, NodeJS or similar system that provides it the `process.env.NODE_ENV` variable.
+    window.process = {
+      env: {
+        NODE_ENV: 'development'
+      }
+    };
+  </script>
+
+  <!-- This is https://github.com/marijnh/moduleserve, the secret sauce that allows us not need to bundle things during development, and have instantaneous iteration feedback, without any hot-reloading or extra build pipeline needed. -->
+  <script src="/moduleserve/load.js" data-module="/src/Index.bs.js"></script>
+  <!-- Our little watcher. Super clean. Check it out! -->
+  <script src="/watcher.js"></script>
+</body>
+</html>

indexProduction.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <script src="./bundleOutput/index.js"></script>
+</body>
+</html>

my-react-app/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.merlin
+.bsb.lock
+npm-debug.log
+/lib/bs/
+/node_modules/
+/bundleOutput/

my-react-app/README.md

@@ -0,0 +1,61 @@
+# ReasonReact Template & Examples
+
+This is:
+- A template for your new ReasonReact project.
+- A collection of thin examples illustrating ReasonReact usage.
+- Extra helper documentation for ReasonReact (full ReasonReact docs [here](https://reasonml.github.io/reason-react/)).
+
+`src` contains 4 sub-folders, each an independent, self-contained ReasonReact example. Feel free to delete any of them and shape this into your project! This template's more malleable than you might be used to =).
+
+The point of this template and examples is to let you understand and personally tweak the entirely of it. We **don't** give you an opaque, elaborate mega build setup just to put some boxes on the screen. It strikes to stay transparent, learnable, and simple. You're encouraged to read every file; it's a great feeling, having the full picture of what you're using and being able to touch any part.
+
+## Run
+
+```sh
+npm install
+npm run server
+# in a new tab
+npm start
+```
+
+Open a new web page to `http://localhost:8000/`. Change any `.re` file in `src` to see the page auto-reload. **You don't need any bundler when you're developing**!
+
+**How come we don't need any bundler during development**? We highly encourage you to open up `index.html` to check for yourself!
+
+# Features Used
+
+|                           | Blinking Greeting | Reducer from ReactJS Docs | Fetch Dog Pictures | Reason Using JS Using Reason |
+|---------------------------|-------------------|---------------------------|--------------------|------------------------------|
+| No props                  |                   | ✓                         |                    |                              |
+| Has props                 |                   |                           |                    | ✓                            |
+| Children props            | ✓                 |                           |                    |                              |
+| No state                  |                   |                           |                    | ✓                            |
+| Has state                 | ✓                 |                           |  ✓                 |                              |
+| Has state with useReducer |                   | ✓                         |                    |                              |
+| ReasonReact using ReactJS |                   |                           |                    | ✓                            |
+| ReactJS using ReasonReact |                   |                           |                    | ✓                            |
+| useEffect                 | ✓                 |                           |  ✓                 |                              |
+| Dom attribute             | ✓                 | ✓                         |                    | ✓                            |
+| Styling                   | ✓                 | ✓                         |  ✓                 | ✓                            |
+| React.array               |                   |                           |  ✓                 |                              |
+
+# Bundle for Production
+
+We've included a convenience `UNUSED_webpack.config.js`, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.
+
+We've also provided a barebone `indexProduction.html`, to serve your bundle.
+
+```sh
+npm install webpack webpack-cli
+# rename file
+mv UNUSED_webpack.config.js webpack.config.js
+# call webpack to bundle for production
+./node_modules/.bin/webpack
+open indexProduction.html
+```
+
+# Handle Routing Yourself
+
+To serve the files, this template uses a minimal dependency called `moduleserve`. A URL such as `localhost:8000/scores/john` resolves to the file `scores/john.html`. If you'd like to override this and handle URL resolution yourself, change the `server` command in `package.json` from `moduleserve ./ --port 8000` to `moduleserve ./ --port 8000 --spa` (for "single page application"). This will make `moduleserve` serve the default `index.html` for any URL. Since `index.html` loads `Index.bs.js`, you can grab hold of the URL in the corresponding `Index.re` and do whatever you want.
+
+By the way, ReasonReact comes with a small [router](https://reasonml.github.io/reason-react/docs/en/router) you might be interested in.

my-react-app/UNUSED_webpack.config.js

@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/Index.bs.js',
+  // If you ever want to use webpack during development, change 'production'
+  // to 'development' as per webpack documentation. Again, you don't have to
+  // use webpack or any other bundler during development! Recheck README if
+  // you didn't know this
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, "bundleOutput"),
+    filename: 'index.js',
+  },
+};

my-react-app/bsconfig.json

@@ -0,0 +1,21 @@
+{
+  "name": "reason-react-examples",
+  "reason": {
+    "react-jsx": 3
+  },
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
+  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
+  "package-specs": [{
+    "module": "commonjs",
+    "in-source": true
+  }],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "bs-dependencies": [
+    "reason-react"
+  ],
+  "refmt": 3
+}

my-react-app/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <script>
+    // stub a variable ReactJS checks. ReactJS assumes you're using a bundler, NodeJS or similar system that provides it the `process.env.NODE_ENV` variable.
+    window.process = {
+      env: {
+        NODE_ENV: 'development'
+      }
+    };
+  </script>
+
+  <!-- This is https://github.com/marijnh/moduleserve, the secret sauce that allows us not need to bundle things during development, and have instantaneous iteration feedback, without any hot-reloading or extra build pipeline needed. -->
+  <script src="/moduleserve/load.js" data-module="/src/Index.bs.js"></script>
+  <!-- Our little watcher. Super clean. Check it out! -->
+  <script src="/watcher.js"></script>
+</body>
+</html>

my-react-app/indexProduction.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <script src="./bundleOutput/index.js"></script>
+</body>
+</html>

my-react-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-react-app",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "bsb -make-world",
+    "start": "bsb -make-world -w -ws _ ",
+    "clean": "bsb -clean-world",
+    "server": "moduleserve ./ --port 8000",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "BuckleScript",
+    "ReasonReact",
+    "reason-react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
+    "reason-react": ">=0.7.0"
+  },
+  "devDependencies": {
+    "bs-platform": "^7.1.0",
+    "moduleserve": "^0.9.0"
+  }
+}

my-react-app/src/BlinkingGreeting/BlinkingGreeting.re

@@ -0,0 +1,25 @@
+[@react.component]
+let make = (~children) => {
+  let (show, setShow) = React.useState(() => true);
+
+  // Notice that instead of `useEffect`, we have `useEffect0`. See
+  // reasonml.github.io/reason-react/docs/en/components#hooks for more info
+  React.useEffect0(() => {
+    let id =
+      Js.Global.setInterval(
+        () => setShow(previousShow => !previousShow),
+        1000,
+      );
+
+    Some(() => Js.Global.clearInterval(id));
+  });
+
+  let style =
+    if (show) {
+      ReactDOMRe.Style.make(~opacity="1", ~transition="opacity 1s", ());
+    } else {
+      ReactDOMRe.Style.make(~opacity="0", ~transition="opacity 1s", ());
+    };
+
+  <div style> children </div>;
+};

my-react-app/src/ExampleStyles.re

@@ -0,0 +1,44 @@
+let reasonReactBlue = "#48a9dc";
+
+// The {j|...|j} feature is just string interpolation, from
+// bucklescript.github.io/docs/en/interop-cheatsheet#string-unicode-interpolation
+// This allows us to conveniently write CSS, together with variables, by
+// constructing a string
+let style = {j|
+  body {
+    background-color: rgb(224, 226, 229);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  button {
+    background-color: white;
+    color: $reasonReactBlue;
+    box-shadow: 0 0 0 1px $reasonReactBlue;
+    border: none;
+    padding: 8px;
+    font-size: 16px;
+  }
+  button:active {
+    background-color: $reasonReactBlue;
+    color: white;
+  }
+  .container {
+    margin: 12px 0px;
+    box-shadow: 0px 4px 16px rgb(200, 200, 200);
+    width: 720px;
+    border-radius: 12px;
+    font-family: sans-serif;
+  }
+  .containerTitle {
+    background-color: rgb(242, 243, 245);
+    border-radius: 12px 12px 0px 0px;
+    padding: 12px;
+    font-weight: bold;
+  }
+  .containerContent {
+    background-color: white;
+    padding: 16px;
+    border-radius: 0px 0px 12px 12px;
+  }
+|j};