Not that long ago I used Create-React-App a lot to quickly boostrap my React
projects. That’s why I naturally used
Reason Scripts when I
wanted to use Reason-React. But even if I still understand the advantages of the
approach of CRA and Reason Scripts, I recently discovered
Parcel, a very minimalist bundler for web projects.
There are already a lot of articles explaining the advantages of Parcel, and
how to use it with React for instance.
What I wanted to do here is show you how you can use it to start a new project
with Reason first, then add
Reason-React to write React
components.
TL;DR: I created a
project on GitHub containing
the final code for the article, if you just want to see the final result.
Start a basic Parcel project
First, let’s init a new project with Yarn (NPM should work just fine too) and
add Parcel:
$ mkdir reason-parcel && cd reason-parcel
$ yarn init -y
$ yarn add --dev parcel-bundler
Let’s edit the generated package.json to add the start
script:
{
"name": "reason-parcel",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "parcel public/index.html"
},
"devDependencies": {
"parcel-bundler": "^1.6.2"
}
}
Then let’s create our public/index.html file:
<html>
<body>
<script src="../src/index.js"></script>
</body>
</html>
And finally let’s add a src/index.js
file so we can test our first version:
console.log('Hello from JavaScript!');
To start the project, let’s just run yarn start
:
Add Reason
Okay this was basically the tutorial to start a Parcel project, but where is
Reason? Let’s start by adding bs-platform
dependency to the project:
$ yarn add bs-platform
We’ll need a bsconfig.json
file to tell BuckleScript what to do:
{
"name": "reason-parcel",
"refmt": 3,
"sources": "src",
"dependencies": []
}
Let’s rename out src/index.js file to src/index.re and change its content
to:
Js.log("Hello from Reason!");
To compile the Reason files to JavaScript let’s add the build
command to our
package.json:
"scripts": {
"start": "parcel public/index.html",
"build": "bsb -make-world"
},
Now by running yarn build
, our index.re file will be transpiled to
JavaScript in lib/js/src/index.js. So we need to update our
public/index.html with the new path:
<script src="../lib/js/src/index.js"></script>
Let’s start our app now:
There it is! The workflow is not ideal since you need to start two commands in
different terminals to run your project:
yarn build -w
to transpile Reason to JavaScript (the -w
flag starts the
watch mode) ;
yarn start
to bundle files with Parcel.
If you know a way to make this easier I’d be glad to hear it and update the
article 😉.
Add Reason-React
Last step now: adding Reason-React to the project so you can write your
components in Reason. First we need to add the dependency:
yarn add reason-react
We also need to update bsconfig.json to tell BuckleScript we’ll use
Reason-React and JSX:
{
"name": "reason-parcel",
"refmt": 3,
"sources": "src",
"bs-dependencies": ["reason-react"],
"reason": {
"react-jsx": 2
},
"dependencies": []
}
Now let’s create a simple component in src/Greeting.re:
let component = ReasonReact.statelessComponent("Greeting");
let make = (~name, _children) => {
...component,
render: (_self) =>
<div>
(ReasonReact.stringToElement("Hello "))
<strong> (ReasonReact.stringToElement(name)) </strong>
(ReasonReact.stringToElement("!"))
</div>
};
Let’s use it in src/index.re:
ReactDOMRe.renderToElementWithId(<Greeting name="Sebastien" />, "root");
And finally let’s add a root
div to our public/index.html to render our
component:
<html>
<body>
<div id="root"></div>
<script src="../lib/js/src/index.js"></script>
</body>
</html>
Wow that’s it! Easy right? Here is what you should get in your browser:
Now you’re ready to use React to build powerful and maintainable components and
enjoy the possibilities of Reason in the same time. Of course it isn’t the only
way to do so, but I like how elegant the method with Parcel is.
I’d be curious to know if you see improvements to this workflow. Maybe using
Parcel packagers or
plugins could make it even cleaner? 😉
Some resources:
- Reason,
Reason-React,
Reason-Scripts
websites will show you how to create a Reason-React app the "official" way.
- Parcel’s website has
a page showing how to use React with it,
and recommends an detailled article.