Removed unneeded items
This commit is contained in:
		
							parent
							
								
									fb554c8179
								
							
						
					
					
						commit
						309cd23d4e
					
				
							
								
								
									
										7
									
								
								my-react-app/.gitignore
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										7
									
								
								my-react-app/.gitignore
									
									
									
									
										vendored
									
									
								
							|  | @ -1,7 +0,0 @@ | |||
| .DS_Store | ||||
| .merlin | ||||
| .bsb.lock | ||||
| npm-debug.log | ||||
| /lib/bs/ | ||||
| /node_modules/ | ||||
| /bundleOutput/ | ||||
|  | @ -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. | ||||
|  | @ -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', | ||||
|   }, | ||||
| }; | ||||
|  | @ -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 | ||||
| } | ||||
|  | @ -1,22 +0,0 @@ | |||
| <!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> | ||||
|  | @ -1,10 +0,0 @@ | |||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
| <head> | ||||
|   <meta charset="UTF-8"> | ||||
|   <title>ReasonReact Examples</title> | ||||
| </head> | ||||
| <body> | ||||
|   <script src="./bundleOutput/index.js"></script> | ||||
| </body> | ||||
| </html> | ||||
|  | @ -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" | ||||
|   } | ||||
| } | ||||
|  | @ -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 */ | ||||
|  | @ -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", ()); | ||||
|     }; | ||||
| 
 | ||||
|   <div style> children </div>; | ||||
| }; | ||||
|  | @ -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 */ | ||||
|  | @ -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}; | ||||
|  | @ -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 */ | ||||
|  | @ -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; | ||||
|   }); | ||||
| 
 | ||||
|   <div | ||||
|     style={ReactDOMRe.Style.make( | ||||
|       ~height="120px", | ||||
|       ~display="flex", | ||||
|       ~alignItems="center", | ||||
|       ~justifyContent="center", | ||||
|       (), | ||||
|     )}> | ||||
|     {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", | ||||
|                (), | ||||
|              ); | ||||
|            <div key=dog style=imageStyle />; | ||||
|          }) | ||||
|        ->React.array | ||||
|      }} | ||||
|   </div>; | ||||
| }; | ||||
|  | @ -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 */ | ||||
|  | @ -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( | ||||
|   <BlinkingGreeting> | ||||
|     {React.string("Hello!")} | ||||
|   </BlinkingGreeting>, | ||||
|   makeContainer("Blinking Greeting"), | ||||
| ); | ||||
| 
 | ||||
| ReactDOMRe.render( | ||||
|   <ReducerFromReactJSDocs />, | ||||
|   makeContainer("Reducer From ReactJS Docs"), | ||||
| ); | ||||
| 
 | ||||
| ReactDOMRe.render( | ||||
|   <FetchedDogPictures />, | ||||
|   makeContainer("Fetched Dog Pictures"), | ||||
| ); | ||||
| 
 | ||||
| ReactDOMRe.render( | ||||
|   <ReasonUsingJSUsingReason />, | ||||
|   makeContainer("Reason Using JS Using Reason"), | ||||
| ); | ||||
|  | @ -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.
 | ||||
|   // <div style={...}>
 | ||||
|   //   <div style={...}>This is a ReactJS card</div>
 | ||||
|   //   <ReasonReactCard style={...} />
 | ||||
|   // </div>
 | ||||
|   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; | ||||
|  | @ -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 */ | ||||
|  | @ -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) => { | ||||
|   <div style> {React.string("This is a ReasonReact card")} </div>; | ||||
| }; | ||||
|  | @ -1,8 +0,0 @@ | |||
| 'use strict'; | ||||
| 
 | ||||
| var ReactJSCard = require("./ReactJSCard"); | ||||
| 
 | ||||
| var make = ReactJSCard; | ||||
| 
 | ||||
| exports.make = make; | ||||
| /* make Not a pure module */ | ||||
|  | @ -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"; | ||||
|  | @ -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 */ | ||||
|  | @ -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 | ||||
|   <div | ||||
|     style={ReactDOMRe.Style.make(~display="flex", ~alignItems="center", ~justifyContent="space-between", ())}> | ||||
|     <div> | ||||
|       {React.string("Count: ")} | ||||
|       {React.string(string_of_int(state.count))} | ||||
|     </div> | ||||
|     <div> | ||||
|       <button style=leftButtonStyle onClick={_event => dispatch(Decrement)}> | ||||
|         {React.string("-")} | ||||
|       </button> | ||||
|       <button style=rightButtonStyle onClick={_event => dispatch(Increment)}> | ||||
|         {React.string("+")} | ||||
|       </button> | ||||
|     </div> | ||||
|   </div>; | ||||
| }; | ||||
|  | @ -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); | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user