Hi!
I did set up a ReasonReact page with Parcel and live reload recently and was told on the discord a guide for this was wanted, so here it is! Take note this guide is meant to be very barebones, so just to get you started. I’ve just started working with this language and it’s tools, so this is brand new to me.
This guide is written for users of macOS, but it’ll probably work just as well on a lot of linux distros.
Prerequisites
- Parcel installed (https://parceljs.org)
- Yarn installed (https://yarnpkg.com)
- Reason installed (I can only add 2 links to a post, so I guess you all have this done)
Installation guide
Create your project
$ mkdir project && cd project
Add a package.json file with the following contents, edit where appropriate.
{
"name": "NAME HERE",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"reason-react": "^0.5.3"
},
"devDependencies": {
"bs-platform": "^4.0.5",
"bsb-js": "^1.1.7"
},
"scripts": {
"build": "parcel build ./src/index.html",
"dev": "parcel ./src/index.html ./src/*.re"
}
}
Add a bsconfig.json file with the following contents, edit where appropriate.
{
"name": "NAME HERE",
"reason": {
"react-jsx": 2
},
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": [{
"module": "commonjs",
"in-source": true
}],
"suffix": ".bs.js",
"namespace": true,
"bs-dependencies": [
"reason-react"
],
"refmt": 3,
"warnings": {
"error": "+5"
}
}
Create a src/ directory
$ mkdir src
Add an index.html file in the src directory
<!doctype html>
<html>
<head>
<title>Title of page</title>
</head>
<body>
<div id="index"></div>
<script src="./Index.re"></script>
</body>
</html>
Add an Index.re file in the src directory with the following content
module App = {
let component = "App" |> ReasonReact.statelessComponent;
let make = _children => {
...component,
render: ({state, send}) => {
<Component />;
},
}
};
ReactDOMRe.renderToElementWithId(<App />, "index");
Add a Component.re file in the src directory with the following content
let component = "Component" |> ReasonReact.statelessComponent;
let make = _children => {
...component,
render: _self => {
<div className="component">
(ReasonReact.string("Hello world!")
</div>
},
};
Run yarn and yarn dev from the root folder
$ yarn && yarn dev
Visit your server and make sure to add /index.html to your url, usually this will be http://localhost:1234/index.html.
You should now have a web server running that will live reload when you edit your Reason files.
Happy coding!
