SaltyCrane Blog — Notes on JavaScript and web development

How to set up Babel 6 with React on Mac OS X (command line only)

Date:  |  Modified:  |  Tags: javascript  |  3 Comments

Babel is a tool used to compile JavaScript from ES6 to ES5. It is also the official way to compile React's JSX. Here is how to install and set up Babel 6 on OS X to run on the command line to compile React's JSX.

Directory structure

my-project
├── .babelrc
├── hello.babelized.js
├── hello.js
├── index.html
├── node_modules
└── package.json

Install Node.js

Installing Node.js provides npm, the Node package manager. npm is used to install Babel.

$ brew install node 

$ node --version
v5.5.0

Create a package.json file

package.json is the configuration file for npm. The package.json file below specifies 3 packages to install. babel-cli is the Babel command line tool. babel-preset-es2015 and babel-preset-react are 2 packages that provide the plugins for Babel to transform ES6 and JSX respectively. The "scripts" section specifies a command to compile the hello.js file with Babel.

{
  "devDependencies": {
    "babel-cli": "6.5.1",
    "babel-preset-es2015": "6.5.0",
    "babel-preset-react": "6.5.0"
  },
  "scripts": {
    "build": "babel hello.js -o hello.babelized.js"
  }
}

Install Babel

npm install installs all the packages listed in package.json into a node_modules directory in the current directory. Packages can also be installed globally using the "-g" flag with npm install. Since this is a local install, the babel command is availiable as ./node_modules/.bin/babel.

$ npm install 

$ ./node_modules/.bin/babel --version 
6.5.1 (babel-core 6.5.1)

Create a .babelrc file

The .babelrc file is used to configure Babel.

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

Create a index.html file

This uses the React libraries from Facebook's CCN and the compiled hello.babelized.js file. The React app lives in the "container" div.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://fb.me/react-0.14.7.min.js"></script>
    <script src="https://fb.me/react-dom-0.14.7.min.js"></script>
    <script src="hello.babelized.js"></script>
  </body>
</html>

Create a hello.js file

Note: this hello.js does not use ES6.

var Hello = React.createClass({
  render: function() {
    return (
      <h1>Hello World</h1>
    );
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Run Babel

$ npm run build

This creates the hello.babelized.js file:

var Hello = React.createClass({
  displayName: 'Hello',

  render: function () {
    return React.createElement(
      'h1',
      null,
      'Hello World'
    );
  }
});

ReactDOM.render(React.createElement(Hello, null), document.getElementById('container'));

View in browser

$ open index.html

See also

Comments


#1 Sean Smith commented on :

Nice tutorial! Thanks for providing this.

disqus:2738427343


#2 Eric R commented on :

This is awesome! Thanks so much for putting this together.

Out of curiosity, is there a way to use a watch command with this method so it automatically rebuilds the app when the JavaScript file changes?

disqus:3066118296


#3 Eliot commented on :

Hi Eric, thanks for your comment. You can use Babel's --watch option. For example: babel hello.js --watch -o hello.babelized.js

For a much nicer setup, check out create-react- app

disqus:3073466652