Bootstrap a Reason-React project with Parcel

综合技术 2018-03-08

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:


  

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:

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 :wink:.

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) =>
    
(ReasonReact.stringToElement("Hello ")) (ReasonReact.stringToElement(name)) (ReasonReact.stringToElement("!"))
};

Let’s use it in src/index.re
:

ReactDOMRe.renderToElementWithId(, "root");

And finally let’s add a root
div to our public/index.html
to render our component:


  

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.

您可能感兴趣的

From JQuery to ReactJS I have previously worked with ReactJS – most notably during my Master’s dissertation, however the main Javascript library I work with when working fo...
Introducing the Acquia Decoupled Starter Kit for R... About the Decoupled Starter Kit The Professional Services team at Acquia is thrilled to announce the first release of the Acquia Decoupled Starter ...
React vs Angular: Who Gets the Final Say What should I choose: Angular or React? Regardless of whether you are a beginner who tries to figure out where to start, a freelanc...
关于 Facebook 的 React 专利许可证 本文转载自: 酷 壳 – CoolShell 作者: 陈皓 随着Apache、百度、Wordpress都在和Facebook的React.js以及其专利许可证划清界限,似乎大家又在讨论Facebook的这个BSD+PATENT的许可证问题了。这让我想起了之前在Medium读过的一...
React的思考(四)- componentDidMakeSense之生命周期面试调侃... 看到一个老外的博客用了这样一个标题《componentDidMakeSense — React Component Lifecycle Explanation》,我只能说:老哥你太有才了,本来都不太想写这篇文章,冲你这个标题,我再啰嗦下生命周期。 没有水平的面试官老喜欢问的问题 面试官:“你...