Getting started with the right development environment for your React project is essential not only for your developer experience, but also for writing better code.

This article will walk you through all the necessary steps in setting up modern React development environment using Webpack, ES6, and Babel.

This article is brought to you by React Speed Coding book.

Read the book for in-depth coverage of React development using 30+ reusable components, across 15 chapters, and 3 complete apps.

Installing Node.js

You will need Node.js to get started with React. If you are on Mac OS, it comes with Node pre-installed. However you may want to use the latest stable release.

Check you node release using node -v command in the terminal.

We recommend installing or upgrading Node using Node Version Manager (NVM). Their Github repo documents install and usage.

To install NVM:

Now you can install a Node release by choosing one from Node releases page.

Command nvm install 5.10.1 installs the latest stable release for us.

One of the advantages of using NVM is you can switch between multiple

node releases you may have on your system.

Here’s what our terminal looks like when using nvm ls to list installed node releases.

v4.2.3

v5.3.0

v5.10.0

-> v5.10.1

system

default -> 5.3.0 (-> v5.3.0)

node -> stable (-> v5.10.1) (default)

stable -> 5.10 (-> v5.10.1) (default)

iojs -> iojs- (-> system) (default)



Using nvm use x.x.x command we can switch to x.x.x installed node release.

Setting up package.json

You will require package.json to manage your NPM dependencies and scripts.

Create a new one using npm init command, selecting defaults where uncertain.

This is what our package.json looks like as we start off. Note that we added

the private flag to avoid accidental publishing of the project to NPM repo,

and also to stop any warnings for missing flags like project repo.

{

“name”: “react-speed-coding-code”,

“version”: “1.0.0”,

“description”: “Companion code for React Speed Coding book”,

“main”: “index.js”,

“private”: true,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1"

},

“author”: “Manav Sehgal”,

“license”: “MIT”

}



Dependencies section will start showing up as we add npm dependencies.

Installing Starter Dependencies

In summary, for our React environment, we have a dependency stack that

follows React > ES6 > Babel > Webpack.

React recommends ES6 for latest features and best practices. ES6 needs Babel for transpiling to ES5 and maintain browser compatibility.

Babel integrates with Webpack to stitch it all together for our app.

React is available via NPM and this is the recommended way of using React in a project.

npm install -- save react

npm install -- save react-dom

Webpack is used for module packaging, development, and production pipeline automation.

You can install webpack bundler and development server.

npm install -- save-dev webpack

npm install -- save-dev webpack-dev-server

You can add functionality to Webpack using plugins. We will use automatic HTML generation plugins for creating index.html for our React apps.

npm install -- save-dev html-webpack-plugin

npm install -- save-dev html-webpack-template



Webpack requires loaders to process specific file types.

npm install -- save-dev css-loader

npm install -- save-dev style-loader

Babel transpiles React JSX and ES6 to ES5 JavaScript. We need babel-loader as Webpack Babel loader for JSX file types.

Hot loading using babel-preset-react-hmre makes

your browser update automatically when there are changes to code,

without losing current state of your app.

ES6 support requires babel-preset-es2015 Babel preset.

npm install -- save-dev babel-core

npm install -- save-dev babel-loader

npm install -- save-dev babel-preset-es2015

npm install -- save-dev babel-preset-react

npm install -- save-dev babel-preset-react-hmre

Presets in Babel are a collection of plugins as npm dependencies which help transform source to target code using Babel.

For full list of such plugins visit Babel’s website.

Configuring Babel

Babel configuration is specified in .babelrc file. React Hot Loading is

required only during development.

{

“presets”: [“react”, “es2015”],

“env”: {

“development”: {

“presets”: [“react-hmre”]

}

}

}



Creating Webpack configuration

Webpack configuration drives your development pipeline, so this is a really

important file to understand. We will split various sections of the config

file to aid step-by-step learning.

To start off, you need to initialize the config file with dependencies.

There are only two in case of development config, webpack and HTML generation plugin.

Next we initialize the APP, BUILD, and STYLE paths.

const webpack = require(‘webpack’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const APP = __dirname + ‘/app’;

const BUILD = __dirname + ‘/build’;

const STYLE = __dirname + ‘/app/style.css’;



Next section defines your app entry, output, and extensions.



module.exports = {

entry: {

app: APP,

style: STYLE

},

output: {

path: BUILD,

filename: ‘[name].js’

},

resolve: {

extensions: [‘’, ‘.js’, ‘.jsx’]

},



We follow this by defining the loaders for processing various file types

used within our app.



module: {

loaders: [

{

test: /\.jsx?$/,

loaders: [‘babel?cacheDirectory’],

include: APP

},

{

test: /\.css$/,

loaders: [‘style’, ‘css’],

include: APP

}

]

},



Now that we have loaders configured, let us add settings for our development server. Source maps are used for debugging information. The devServer settings are picked up by webpack-dev-server as it runs.

devtool: ‘eval-source-map’, devServer: {

historyApiFallback: true,

hot: true,

inline: true,

progress: true, stats: ‘errors-only’, host: process.env.HOST,

port: process.env.PORT

},



We now wrap up by adding plugins needed during our development.



plugins: [

new HtmlWebpackPlugin({

template: ‘node_modules/html-webpack-template/index.ejs’,

title: ‘React Speed Coding’,

appMountId: ‘app’,

inject: false

}),

new webpack.HotModuleReplacementPlugin()

]

};



Configuring startup scripts

We can configure startup scripts in package.json to speed up our development even further.

“scripts”: {

“start”: “NODE_ENV=development webpack-dev-server”,

“build”: “NODE_ENV=production webpack”

},



Both webpack and the webpack-dev-server will pick up webpack.config.js file configuration.

This completes your React development environment setup, ready with Node, ES6, Webpack, Hot Reloading, and of course React.