React Setup, Part II: Babel
Install and Configure Babel on your Local Computer
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!