Setting Up a React Project - ECMAScript 6 Tutorial

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

Clone the es6-tutorial-react repository:
```
git clone https://github.com/ccoenraets/es6-tutorial-react
```
Alternatively, you can just download and unzip this file instead of cloning the repository.
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

Open a command prompt, and navigate (cd) to the es6-tutorial-react directory.
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.
Type the following command to install the react and react-dom modules:
```
npm install react react-dom --save-dev
```
Type the following command to install the babel and webpack modules:
```
npm install babel-core babel-loader webpack --save-dev
```
Type the following command to install the ECMAScript 2015 and React presets:
```
npm install babel-preset-es2015 babel-preset-react --save-dev
```

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'
 };

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"
},
```
In the es6-tutorial-react directory, create a build directory to host the compiled version of the application.

The build process will fail if you don’t create the build directory

Step 3: Build and Run

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
```
Open index.html in your browser and test the application

Topics

Setting Up a React Project Using ECMAScript 6 Features Using Modules Creating the MortgageCalculator Module