React Setup, Part II: Babel

Background

Before React code can run in the browser, it must be changed in certain ways. One necessary transformation is compiling JSX into vanilla JavaScript.

Install Babel

Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript. Babel can also do many other powerful things. It’s worth exploring outside of the context of this course!

Babel‘s npm module’s name is babel-core. You’re going to install babel-core slightly differently than you installed react and react-dom. Instead of npm install --save babel-core, you will use the command npm install --save-dev babel-core.

This is because you will only be using Babel in development mode. When a React app is shipped into production, it no longer needs to make transformations: the transformations will be hard-coded in place. The --save-dev flag saves an npm module for development version only.

Just as --save can be shortened to -S, --save-dev can be shortened to -D.

You’re also going to install two other babel-related modules, named babel-loader and babel-preset-react, respectively. We’ll explain those soon!

Use one of these terminal commands to install babel-core, babel-loader, and babel-preset-react:

Configure Babel

In order to make Babel work, you need to write a babel configuration file.

In your root directory, create a new file named .babelrc. If you get prompted about starting a filename with a period, go ahead and say that it’s okay.

Save the following code inside of .babelrc:

That’s it! Babel is now ready to go.

Whenever you’re ready, continue to our next article!