React, Babel and NPM

These are the steps to take when developing a React application with automatic JSX (and es2015 to es5) transformation with Babel. I don’t use a bundel in this example, so you cannot use things like “import” and you have to add script tags to your HTML page to import Javascript files.

Initialize your NPM project – this will create a package.json file:

npm init

Install babel-cli, babel-preset-react and babel-preset-es2015 locally as devDependencies:

npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

Now you can create some React code. In this example I’ll have the JSX code in src/ and want to transform it automatically to build/. I’ll do this by adding the babel transformations to the package.json file:

"scripts": {
  "build" : "babel src --watch --out-dir build"

To make Babel also use the presets, we’ll create a .babelrc file:

  "presets": ["es2015", "react"]

Now we can run:

npm run build

And our React code in the src/ directory will be automatically transformed to the build/ directory.