Unfortunately, build processes are a big part of JavaScript development. Build processes do not have to be complicated, despite what you may have heard. Let's jump in with my default for building React and JSX projects. I say "default" because if the project gets complicated I will move to using Gulp. An example of a more complicated project is one with multiple entry points.

Previously, I used the reactify transform but it has been deprecated in favor of babelify. We will use babelify.

First, we install these packages.

npm install browserify watchify babelify babel-preset-react --save-dev

Next, we add some configuration to our package.json file.

"browserify": {
  "transform": [
    [
      "babelify",
      {
        "presets": [
          "react"
        ]
      }
    ]
  ]
},

Here we are configuring browserify to use the babelify transform and using babel-preset-react to handle the JSX part.

Finally, we need to add some npm scripts so we can run this.

"scripts": {
  "build": "browserify index.js -o bundle.js",
  "watch": "watchify index.js -vo bundle.js"
},

Now we are able to run npm run watch and npm run build. Watch will watch our files and run browserify on change. We use this while working. Build will run browserify. This is really only used by our build server.