React Setup, Part II: Babel
Install and Configure Babel on your Local Computer
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-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.
--save can be shortened to
--save-dev can be shortened to
You’re also going to install two other babel-related modules, named
babel-preset-react, respectively. We’ll explain those soon!
Use one of these terminal commands to install
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!