Babel

Babel is a transpiler for Javascript. Essentially, it takes source code in one form and transforms it into another. Let’s install it in our project.

1

npm install --save-dev babel babel-core babel-plugin-transform-runtime

For our app, Babel will be taking our source code and converting it to ES5. To do this, we’ll need to add a .babelrc to the root of our project.

1
2
3
4

{
    "presets": ["es2015", "stage-3", "react"],
    "plugins": ["transform-runtime"]
}

Here we’re using the transform-runtime plugin which has various conveniences which you can read up on here.

The presets allows us to use the following:

ECMAScript 2015

ES2015 is the latest version of ECMAScript which introduced new syntax such as import, const, let and arrow functions.

1

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

ECMAScript Stage 3 Candidate Features

ECMAScript feature requests go through the TC39 process. Stage 3 features are essentially candidates for the next version, waiting for feedback before being finalised. They are usually safe to use.

1

npm install --save-dev babel-preset-stage-3

JSX

JSX is XML in Javascript. This is useful for writing your React components like HTML elements instead of nested functions, making it more intuitive.

1

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

Conclusion

You should now have a project directory which looks something like:

1
2
3
4
5
6
7

./react-dojo/
├── node_modules
├── source
│   └── index.jsx
├── .babelrc
├── .gitignore
└── package.json