Removed unneeded items
This commit is contained in:
Ozzie Gooen
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