diff --git a/my-react-app/.gitignore b/my-react-app/.gitignore deleted file mode 100644 index 9c32a28e..00000000 --- a/my-react-app/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -.DS_Store -.merlin -.bsb.lock -npm-debug.log -/lib/bs/ -/node_modules/ -/bundleOutput/ \ No newline at end of file diff --git a/my-react-app/README.md b/my-react-app/README.md deleted file mode 100644 index e55514ec..00000000 --- a/my-react-app/README.md +++ /dev/null @@ -1,61 +0,0 @@ -# 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. diff --git a/my-react-app/UNUSED_webpack.config.js b/my-react-app/UNUSED_webpack.config.js deleted file mode 100644 index 3260e8f6..00000000 --- a/my-react-app/UNUSED_webpack.config.js +++ /dev/null @@ -1,14 +0,0 @@ -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', - }, -}; \ No newline at end of file diff --git a/my-react-app/bsconfig.json b/my-react-app/bsconfig.json deleted file mode 100644 index 72bbb445..00000000 --- a/my-react-app/bsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "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 -} diff --git a/my-react-app/index.html b/my-react-app/index.html deleted file mode 100644 index 94689a3b..00000000 --- a/my-react-app/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - ReasonReact Examples - - - - - - - - - - diff --git a/my-react-app/indexProduction.html b/my-react-app/indexProduction.html deleted file mode 100644 index 1597bfa6..00000000 --- a/my-react-app/indexProduction.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - ReasonReact Examples - - - - - diff --git a/my-react-app/package.json b/my-react-app/package.json deleted file mode 100644 index c21839e2..00000000 --- a/my-react-app/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "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" - } -} diff --git a/my-react-app/src/BlinkingGreeting/BlinkingGreeting.bs.js b/my-react-app/src/BlinkingGreeting/BlinkingGreeting.bs.js deleted file mode 100644 index f5f4d0c6..00000000 --- a/my-react-app/src/BlinkingGreeting/BlinkingGreeting.bs.js +++ /dev/null @@ -1,38 +0,0 @@ -'use strict'; - -var Curry = require("bs-platform/lib/js/curry.js"); -var React = require("react"); - -function BlinkingGreeting(Props) { - var children = Props.children; - var match = React.useState((function () { - return true; - })); - var setShow = match[1]; - React.useEffect((function () { - var id = setInterval((function (param) { - return Curry._1(setShow, (function (previousShow) { - return !previousShow; - })); - }), 1000); - return (function (param) { - clearInterval(id); - return /* () */0; - }); - }), ([])); - var style = match[0] ? ({ - opacity: "1", - transition: "opacity 1s" - }) : ({ - opacity: "0", - transition: "opacity 1s" - }); - return React.createElement("div", { - style: style - }, children); -} - -var make = BlinkingGreeting; - -exports.make = make; -/* react Not a pure module */ diff --git a/my-react-app/src/BlinkingGreeting/BlinkingGreeting.re b/my-react-app/src/BlinkingGreeting/BlinkingGreeting.re deleted file mode 100644 index d1c1865d..00000000 --- a/my-react-app/src/BlinkingGreeting/BlinkingGreeting.re +++ /dev/null @@ -1,25 +0,0 @@ -[@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", ()); - }; - -
children
; -}; diff --git a/my-react-app/src/ExampleStyles.bs.js b/my-react-app/src/ExampleStyles.bs.js deleted file mode 100644 index 0d511991..00000000 --- a/my-react-app/src/ExampleStyles.bs.js +++ /dev/null @@ -1,10 +0,0 @@ -'use strict'; - - -var reasonReactBlue = "#48a9dc"; - -var style = "\n body {\n background-color: rgb(224, 226, 229);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n button {\n background-color: white;\n color: " + (String(reasonReactBlue) + (";\n box-shadow: 0 0 0 1px " + (String(reasonReactBlue) + (";\n border: none;\n padding: 8px;\n font-size: 16px;\n }\n button:active {\n background-color: " + (String(reasonReactBlue) + ";\n color: white;\n }\n .container {\n margin: 12px 0px;\n box-shadow: 0px 4px 16px rgb(200, 200, 200);\n width: 720px;\n border-radius: 12px;\n font-family: sans-serif;\n }\n .containerTitle {\n background-color: rgb(242, 243, 245);\n border-radius: 12px 12px 0px 0px;\n padding: 12px;\n font-weight: bold;\n }\n .containerContent {\n background-color: white;\n padding: 16px;\n border-radius: 0px 0px 12px 12px;\n }\n"))))); - -exports.reasonReactBlue = reasonReactBlue; -exports.style = style; -/* style Not a pure module */ diff --git a/my-react-app/src/ExampleStyles.re b/my-react-app/src/ExampleStyles.re deleted file mode 100644 index 4a097747..00000000 --- a/my-react-app/src/ExampleStyles.re +++ /dev/null @@ -1,44 +0,0 @@ -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}; diff --git a/my-react-app/src/FetchedDogPictures/FetchedDogPictures.bs.js b/my-react-app/src/FetchedDogPictures/FetchedDogPictures.bs.js deleted file mode 100644 index 909b02e5..00000000 --- a/my-react-app/src/FetchedDogPictures/FetchedDogPictures.bs.js +++ /dev/null @@ -1,64 +0,0 @@ -'use strict'; - -var Curry = require("bs-platform/lib/js/curry.js"); -var React = require("react"); -var Belt_Array = require("bs-platform/lib/js/belt_Array.js"); - -function FetchedDogPictures(Props) { - var match = React.useState((function () { - return /* LoadingDogs */0; - })); - var setState = match[1]; - var state = match[0]; - React.useEffect((function () { - fetch("https://dog.ceo/api/breeds/image/random/3").then((function (response) { - return response.json(); - })).then((function (jsonResponse) { - Curry._1(setState, (function (_previousState) { - return /* LoadedDogs */[jsonResponse.message]; - })); - return Promise.resolve(/* () */0); - })).catch((function (_err) { - Curry._1(setState, (function (_previousState) { - return /* ErrorFetchingDogs */1; - })); - return Promise.resolve(/* () */0); - })); - return ; - }), ([])); - var tmp; - if (typeof state === "number") { - tmp = state !== 0 ? "An error occurred!" : "Loading..."; - } else { - var dogs = state[0]; - tmp = Belt_Array.mapWithIndex(dogs, (function (i, dog) { - var imageStyle = { - backgroundImage: "url(" + (String(dog) + ")"), - backgroundPosition: "center", - height: "120px", - marginRight: i === (dogs.length - 1 | 0) ? "0px" : "8px", - width: "100%", - backgroundSize: "cover", - borderRadius: "8px", - boxShadow: "0px 4px 16px rgb(200, 200, 200)" - }; - return React.createElement("div", { - key: dog, - style: imageStyle - }); - })); - } - return React.createElement("div", { - style: { - display: "flex", - height: "120px", - alignItems: "center", - justifyContent: "center" - } - }, tmp); -} - -var make = FetchedDogPictures; - -exports.make = make; -/* react Not a pure module */ diff --git a/my-react-app/src/FetchedDogPictures/FetchedDogPictures.re b/my-react-app/src/FetchedDogPictures/FetchedDogPictures.re deleted file mode 100644 index 2a32618b..00000000 --- a/my-react-app/src/FetchedDogPictures/FetchedDogPictures.re +++ /dev/null @@ -1,70 +0,0 @@ -[@bs.val] external fetch: string => Js.Promise.t('a) = "fetch"; - -type state = - | LoadingDogs - | ErrorFetchingDogs - | LoadedDogs(array(string)); - -[@react.component] -let make = () => { - let (state, setState) = React.useState(() => LoadingDogs); - - // Notice that instead of `useEffect`, we have `useEffect0`. See - // reasonml.github.io/reason-react/docs/en/components#hooks for more info - React.useEffect0(() => { - Js.Promise.( - fetch("https://dog.ceo/api/breeds/image/random/3") - |> then_(response => response##json()) - |> then_(jsonResponse => { - setState(_previousState => LoadedDogs(jsonResponse##message)); - Js.Promise.resolve(); - }) - |> catch(_err => { - setState(_previousState => ErrorFetchingDogs); - Js.Promise.resolve(); - }) - |> ignore - ); - - // Returning None, instead of Some(() => ...), means we don't have any - // cleanup to do before unmounting. That's not 100% true. We should - // technically cancel the promise. Unofortunately, there's currently no - // way to cancel a promise. Promises in general should be way less used - // for React components; but since folks do use them, we provide such an - // example here. In reality, this fetch should just be a plain callback, - // with a cancellation API - None; - }); - -
- {switch (state) { - | ErrorFetchingDogs => React.string("An error occurred!") - | LoadingDogs => React.string("Loading...") - | LoadedDogs(dogs) => - dogs - ->Belt.Array.mapWithIndex((i, dog) => { - let imageStyle = - ReactDOMRe.Style.make( - ~height="120px", - ~width="100%", - ~marginRight=i === Js.Array.length(dogs) - 1 ? "0px" : "8px", - ~borderRadius="8px", - ~boxShadow="0px 4px 16px rgb(200, 200, 200)", - ~backgroundSize="cover", - ~backgroundImage={j|url($dog)|j}, - ~backgroundPosition="center", - (), - ); -
; - }) - ->React.array - }} -
; -}; diff --git a/my-react-app/src/Index.bs.js b/my-react-app/src/Index.bs.js deleted file mode 100644 index 236a5a4b..00000000 --- a/my-react-app/src/Index.bs.js +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -var React = require("react"); -var ReactDom = require("react-dom"); -var ExampleStyles$ReasonReactExamples = require("./ExampleStyles.bs.js"); -var BlinkingGreeting$ReasonReactExamples = require("./BlinkingGreeting/BlinkingGreeting.bs.js"); -var FetchedDogPictures$ReasonReactExamples = require("./FetchedDogPictures/FetchedDogPictures.bs.js"); -var ReducerFromReactJSDocs$ReasonReactExamples = require("./ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js"); -var ReasonUsingJSUsingReason$ReasonReactExamples = require("./ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js"); - -var style = document.createElement("style"); - -document.head.appendChild(style); - -style.innerHTML = ExampleStyles$ReasonReactExamples.style; - -function makeContainer(text) { - var container = document.createElement("div"); - container.className = "container"; - var title = document.createElement("div"); - title.className = "containerTitle"; - title.innerText = text; - var content = document.createElement("div"); - content.className = "containerContent"; - container.appendChild(title); - container.appendChild(content); - document.body.appendChild(container); - return content; -} - -ReactDom.render(React.createElement(BlinkingGreeting$ReasonReactExamples.make, { - children: "Hello!" - }), makeContainer("Blinking Greeting")); - -ReactDom.render(React.createElement(ReducerFromReactJSDocs$ReasonReactExamples.make, { }), makeContainer("Reducer From ReactJS Docs")); - -ReactDom.render(React.createElement(FetchedDogPictures$ReasonReactExamples.make, { }), makeContainer("Fetched Dog Pictures")); - -ReactDom.render(React.createElement(ReasonUsingJSUsingReason$ReasonReactExamples.make, { }), makeContainer("Reason Using JS Using Reason")); - -exports.style = style; -exports.makeContainer = makeContainer; -/* style Not a pure module */ diff --git a/my-react-app/src/Index.re b/my-react-app/src/Index.re deleted file mode 100644 index c45ca054..00000000 --- a/my-react-app/src/Index.re +++ /dev/null @@ -1,51 +0,0 @@ -// Entry point - -[@bs.val] external document: Js.t({..}) = "document"; - -// We're using raw DOM manipulations here, to avoid making you read -// ReasonReact when you might precisely be trying to learn it for the first -// time through the examples later. -let style = document##createElement("style"); -document##head##appendChild(style); -style##innerHTML #= ExampleStyles.style; - -let makeContainer = text => { - let container = document##createElement("div"); - container##className #= "container"; - - let title = document##createElement("div"); - title##className #= "containerTitle"; - title##innerText #= text; - - let content = document##createElement("div"); - content##className #= "containerContent"; - - let () = container##appendChild(title); - let () = container##appendChild(content); - let () = document##body##appendChild(container); - - content; -}; - -// All 4 examples. -ReactDOMRe.render( - - {React.string("Hello!")} - , - makeContainer("Blinking Greeting"), -); - -ReactDOMRe.render( - , - makeContainer("Reducer From ReactJS Docs"), -); - -ReactDOMRe.render( - , - makeContainer("Fetched Dog Pictures"), -); - -ReactDOMRe.render( - , - makeContainer("Reason Using JS Using Reason"), -); diff --git a/my-react-app/src/ReasonUsingJSUsingReason/ReactJSCard.js b/my-react-app/src/ReasonUsingJSUsingReason/ReactJSCard.js deleted file mode 100644 index 6e71d726..00000000 --- a/my-react-app/src/ReasonUsingJSUsingReason/ReactJSCard.js +++ /dev/null @@ -1,31 +0,0 @@ -// In this Interop example folder, we have: -// - A ReasonReact component, ReasonReactCard.re -// - Used by a ReactJS component, ReactJSCard.js (this file) -// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re -// - ReasonUsingJSUsingReason.re is used by Index.re - -var ReactDOM = require('react-dom'); -var React = require('react'); - -var ReasonReactCard = require('./ReasonReactCard.bs').make; - -var ReactJSComponent = function() { - let backgroundColor = "rgba(0, 0, 0, 0.05)"; - let padding = "12px"; - - // We're not using JSX here, to avoid folks needing to install the related - // React toolchains just for this example. - //
- //
This is a ReactJS card
- // - //
- return React.createElement( - "div", - {style: {backgroundColor, padding, borderRadius: "8px"}}, - React.createElement("div", {style: {marginBottom: "8px"}}, "This is a ReactJS card"), - React.createElement(ReasonReactCard, {style: {backgroundColor, padding, borderRadius: "4px"}}), - ) -}; -ReactJSComponent.displayName = "MyBanner"; - -module.exports = ReactJSComponent; diff --git a/my-react-app/src/ReasonUsingJSUsingReason/ReasonReactCard.bs.js b/my-react-app/src/ReasonUsingJSUsingReason/ReasonReactCard.bs.js deleted file mode 100644 index d22ad57f..00000000 --- a/my-react-app/src/ReasonUsingJSUsingReason/ReasonReactCard.bs.js +++ /dev/null @@ -1,15 +0,0 @@ -'use strict'; - -var React = require("react"); - -function ReasonReactCard(Props) { - var style = Props.style; - return React.createElement("div", { - style: style - }, "This is a ReasonReact card"); -} - -var make = ReasonReactCard; - -exports.make = make; -/* react Not a pure module */ diff --git a/my-react-app/src/ReasonUsingJSUsingReason/ReasonReactCard.re b/my-react-app/src/ReasonUsingJSUsingReason/ReasonReactCard.re deleted file mode 100644 index 71c38005..00000000 --- a/my-react-app/src/ReasonUsingJSUsingReason/ReasonReactCard.re +++ /dev/null @@ -1,10 +0,0 @@ -// In this Interop example folder, we have: -// - A ReasonReact component, ReasonReactCard.re (this file) -// - Used by a ReactJS component, ReactJSCard.js -// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re -// - ReasonUsingJSUsingReason.re is used by Index.re - -[@react.component] -let make = (~style) => { -
{React.string("This is a ReasonReact card")}
; -}; diff --git a/my-react-app/src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js b/my-react-app/src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js deleted file mode 100644 index 3e9c5c73..00000000 --- a/my-react-app/src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -var ReactJSCard = require("./ReactJSCard"); - -var make = ReactJSCard; - -exports.make = make; -/* make Not a pure module */ diff --git a/my-react-app/src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.re b/my-react-app/src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.re deleted file mode 100644 index 45a66fcf..00000000 --- a/my-react-app/src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.re +++ /dev/null @@ -1,10 +0,0 @@ -// In this Interop example folder, we have: -// - A ReasonReact component, ReasonReactCard.re -// - Used by a ReactJS component, ReactJSCard.js -// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re (this file) -// - ReasonUsingJSUsingReason.re is used by Index.re - -// All you need to do to use a ReactJS component in ReasonReact, is to write the lines below! -// reasonml.github.io/reason-react/docs/en/components#import-from-js -[@react.component] [@bs.module] -external make: unit => React.element = "./ReactJSCard"; diff --git a/my-react-app/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js b/my-react-app/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js deleted file mode 100644 index 87b526cf..00000000 --- a/my-react-app/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js +++ /dev/null @@ -1,61 +0,0 @@ -'use strict'; - -var Curry = require("bs-platform/lib/js/curry.js"); -var React = require("react"); - -var leftButtonStyle = { - width: "48px", - borderRadius: "4px 0px 0px 4px" -}; - -var rightButtonStyle = { - width: "48px", - borderRadius: "0px 4px 4px 0px" -}; - -var initialState = { - count: 0 -}; - -function reducer(state, action) { - if (action) { - return { - count: state.count - 1 | 0 - }; - } else { - return { - count: state.count + 1 | 0 - }; - } -} - -function ReducerFromReactJSDocs(Props) { - var match = React.useReducer(reducer, initialState); - var dispatch = match[1]; - return React.createElement("div", { - style: { - display: "flex", - alignItems: "center", - justifyContent: "space-between" - } - }, React.createElement("div", undefined, "Count: ", String(match[0].count)), React.createElement("div", undefined, React.createElement("button", { - style: leftButtonStyle, - onClick: (function (_event) { - return Curry._1(dispatch, /* Decrement */1); - }) - }, "-"), React.createElement("button", { - style: rightButtonStyle, - onClick: (function (_event) { - return Curry._1(dispatch, /* Increment */0); - }) - }, "+"))); -} - -var make = ReducerFromReactJSDocs; - -exports.leftButtonStyle = leftButtonStyle; -exports.rightButtonStyle = rightButtonStyle; -exports.initialState = initialState; -exports.reducer = reducer; -exports.make = make; -/* react Not a pure module */ diff --git a/my-react-app/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re b/my-react-app/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re deleted file mode 100644 index 2bacf52e..00000000 --- a/my-react-app/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re +++ /dev/null @@ -1,44 +0,0 @@ -// This is the ReactJS documentation's useReducer example, directly ported over -// https://reactjs.org/docs/hooks-reference.html#usereducer - -// A little extra we've put, because the ReactJS example has no styling -let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius="4px 0px 0px 4px", ~width="48px", ()); -let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius="0px 4px 4px 0px", ~width="48px", ()); - -// Record and variant need explicit declarations. -type state = {count: int}; - -type action = - | Increment - | Decrement; - -let initialState = {count: 0}; - -let reducer = (state, action) => { - switch (action) { - | Increment => {count: state.count + 1} - | Decrement => {count: state.count - 1} - }; -}; - -[@react.component] -let make = () => { - let (state, dispatch) = React.useReducer(reducer, initialState); - - // We can use a fragment here, but we don't, because we want to style the counter -
-
- {React.string("Count: ")} - {React.string(string_of_int(state.count))} -
-
- - -
-
; -}; diff --git a/my-react-app/watcher.js b/my-react-app/watcher.js deleted file mode 100644 index 894a19cb..00000000 --- a/my-react-app/watcher.js +++ /dev/null @@ -1,39 +0,0 @@ -// This is our simple, robust watcher. It hooks into the BuckleScript build -// system to listen for build events. -// See package.json's `start` script and `./node_modules/.bin/bsb --help` - -// Btw, if you change this file and reload the page, your browser cache -// _might_ not pick up the new version. If you're in Chrome, do Force Reload. - -var websocketReloader; -var LAST_SUCCESS_BUILD_STAMP = localStorage.getItem('LAST_SUCCESS_BUILD_STAMP') || 0; -// package.json's `start` script's `bsb -ws _` means it'll pipe build events -// through a websocket connection to a default port of 9999. This is -// configurable, e.g. `-ws 5000` -var webSocketPort = 9999; - -function setUpWebSocket() { - if (websocketReloader == null || websocketReloader.readyState !== 1) { - try { - websocketReloader = new WebSocket(`ws://localhost:${webSocketPort}`); - websocketReloader.onmessage = (message) => { - var newData = JSON.parse(message.data).LAST_SUCCESS_BUILD_STAMP; - if (newData > LAST_SUCCESS_BUILD_STAMP) { - LAST_SUCCESS_BUILD_STAMP = newData; - localStorage.setItem('LAST_SUCCESS_BUILD_STAMP', LAST_SUCCESS_BUILD_STAMP); - // Refresh the page! This will naturally re-run everything, - // including our moduleserve which will re-resolve all the modules. - // No stable build! - location.reload(true); - } - - } - } catch (exn) { - console.error("The watcher tried to connect to web socket, but failed. Here's the message:"); - console.error(exn); - } - } -}; - -setUpWebSocket(); -setInterval(setUpWebSocket, 2000);