Setting up a ReasonReact project

To create a new ReasonReact project, run the following command:

bsb -init my-reason-react-app -theme react
cd my-reason-react-app

After opening our text editor, we see that a couple of things have changed. The package.json file lists the relevant React and webpack dependencies. Let's install them:

npm install

We also have the following webpack-related npm scripts:

"webpack": "webpack -w",
"webpack:production": "NODE_ENV=production webpack"

In bsconfig.json, we have a new field that turns on JSX for ReasonReact:

"reason": {
  "react-jsx": 2
},

We have a simple webpack.config.js file:

const path = require("path");
const outputDir = path.join(__dirname, "build/");

const isProd = process.env.NODE_ENV === "production";

module.exports = {
  entry: "./src/Index.bs.js",
  mode: isProd ? "production" : "development",
  output: {
    path: outputDir,
    publicPath: outputDir,
    filename: "Index.js"
  }
};

Note how the configured entry point is "./src/Index.bs.js", which makes sense since, by default, "in-source" is set to true in bsconfig.json. The rest is just normal webpack stuff.

To run this project, we need to run both bsb and webpack:

npm start

/* in another shell */
npm run webpack

/* in another shell */
php -S localhost:3000

Since the index.html file is located within the src directory, we visit http://localhost:3000/src to see the default application.