Setting Up a React Project

In this unit, you set up a development environment to develop and run an ECMAScript 6 application using Babel and Webpack.

Step 1: Install the Sample Application

  1. Clone the es6-tutorial-react repository:

    git clone
  2. Open app.js and examine the React implementation of the mortgage calculator application. This version of the application is written with ECMAScript 5.

Step 2: Set Up Babel and Webpack

  1. Open a command prompt, and navigate (cd) to the es6-tutorial-react directory.

  2. Type the following command to create a package.json file:

    npm init

    Press the Return key in response to all the questions to accept the default values.

  3. Type the following command to install the react and react-dom modules:

    npm install react react-dom --save-dev
  4. Type the following command to install the babel and webpack modules:

    npm install babel-core babel-loader webpack --save-dev
  5. Type the following command to install the ECMAScript 2015 and React presets:

    npm install babel-preset-es2015 babel-preset-react --save-dev
  6. In the es6-tutorial-react directory, create a new file named webpack.config.js defined as follows:

     var path = require('path');
     var webpack = require('webpack');
     module.exports = {
         entry: './js/app.js',
         output: {
             path: path.resolve(__dirname, 'build'),
             filename: 'app.bundle.js'
         module: {
             loaders: [
                     test: /\.js$/,
                     loader: 'babel-loader',
                     query: {
                         presets: ['es2015', 'react']
         stats: {
             colors: true
         devtool: 'source-map'
  7. Open package.json in your favorite code editor. In the scripts section, remove the test script, and add a script named webpack that compiles app.js. The scripts section should now look like this:

    "scripts": {
        "webpack": "webpack"
  8. In the es6-tutorial-react directory, create a build directory to host the compiled version of the application.

Step 3: Build and Run

  1. On the command line, make sure you are in the es6-tutorial-react directory, and type the following command to run the webpack script and compile app.js:

     npm run webpack
  2. Open index.html in your browser and test the application

comments powered by Disqus