Configure Babel

Outside of a browser, Babel only runs the transformations you explicitly indicate, so we need to supply a list of transformations for Babel to do anything. To speed up the configuration process, we’ll use the react-app preset, which combines the most useful options for React applications. This preset includes JSX support, as well as other options that support most common browsers and the testing environment we’ll use in Chapter 4, ​Test Your React Components​. Install Babel, the Babel loader, and the react-app preset from npm:

You’ll need to install the Babel core dependency explicitly because the Babel loader developers decided to let you choose which Babel version to use. We’ll just go with the default.

To apply the react-app preset, create a Babel configuration file called .babelrc in the root of the project directory. In .babelrc, add the react-app preset to the presets array to tell Babel to process the source code with the preset:

We’re done with the webpack and Babel configuration. Now let’s create a script that runs the build for us.