React Dev Environment With Babel 6 And Webpack

After the release of Babel 6, a lot of things has changed on React Dev Environment. You have to follow more steps to make perfect setup of your React Environment.  Babel 6 changed everything. But don't worry I will show you step by step process to setup your development environment with React, Babel 6 and Webpack.

To get started we need to install some npm packages. I want to keep everything simple. I will only install those packages that essential to start any React project and I will also explain why we need those packages.

The packages we are going to use:

devDependencies

• webpack
• webpack-dev-server
• babel-core
• babel-loader
• babel-preset-es2015
• babel-preset-react

dependencies

• react
• react-dom

You can start with this package.json file and run npm install

{
  "name": "app",
  "version": "1.0.0",
  "description": "A simple react app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Parish Khan",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "*",
    "babel-loader": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "webpack": "*",
    "webpack-dev-server": "*"
  },
  "dependencies": {
    "react": "*",
    "react-dom": "*"
  }
}

babel-core:

ECMAScript 6, also known as ECMAScript 2015 is the latest version of the ECMAScript standard. The new feature of JavaScript is awesome. It's very tempting to use this new feature in our React app. But unfortunately, modern browsers don't support all these features. But don't worry babel comes to save us. You can write all the cool new ES6 and babel will happily transform them into ES5.

The babel npm package is no longer exist. It's now separated into multiple packages. babel-corecontain the Node API and require hook.

In Babel 6 this transformation won't happen by default like Babel 5. You need to install the right plugins for every individual purpose. Basically, you don't want to install those plugins manually and you don't really need to. Babel has added presets ( a collection of plugins ) to make our work easier. We will use  babel-preset-es2015 and babel-preset-react presets for our react development environment setup.

babel-preset-:

babel-preset-es2015 is containing all the necessary plugin that we need to compile our ES6 code. I have previously mentioned that babel won't transform anything by default. Similarly, babel-preset-react is containing all the necessary plugin for our react application. For an example, babel-preset-react will teach babel how to handle JSX ( a preprocessor step that adds XML syntax to JavaScript )

webpack:

Webpack is a module binder. It solves many fundamental problems of web development very well. For an example, while developing a React application you may have a bunch of JavaScript or JSX file, web pack will take all the JavaScript/JSX file and bind it to a single .js file along with dependencies. If you try to do it manually, it will be very time-consuming and error-prone. Webpack will perform this task automatically.

The power of webpack is not just limited to binding. It's a very powerful tool which offers a lot of cool features.

webpack-dev-server:

webpack-dev-server is a tiny module build with Node.js Express server that will serve the webpack bundle and help you to run your React app on a local server.

babel-loader:

If we want to use babel and webpack together we need to use babel-loader for transpiling our javaScript file. babel-loader will help webpack to work with babel.

Configuring Webpack:

Now we know what is the purpose of those packages and why we need them in our React dev environment. To start with webpack, we need to create a webpack.config.js file for it and place this config file at the top of the root directory.

// webpack.config.js

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

There are a lot of things going on in this config file. but don't panic these configs are pretty straightforward. At first, we need to define our entry point and output so that webpack can look at the right file locations. Our React application file structure will look like this -

React File Structure

You can guess, our entry point is './src/index.js' and output 'app/js/main.js' . webpack will look at the index.js file including all the dependencies and produce a single JavaScript file called main.js. So, we need to add this configuration in our config file.

// webpack.config.js

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        filename: 'app/js/main.js'
    }
}

On the config file, inside module, we can see loaders. Loaders are transformations that are applied to a resource file of your app. For an example, you can tell webpack to load CoffeeScript or JSX thought loaders. In our config file, we have added some configuration inside loader. Please read the code comments to understand what are their purpose.

// webpack.config.js

loaders: [
    {
        test: /.jsx?$/, // Tell webpack to transform JSX file also
        loader: 'babel-loader', // Tell webpack that we are using babel-loader
        exclude: /node_modules/, // Don't transform any code inside node_moudles directory
        query: {
            presets: ['es2015', 'react']  // Tell babel, what presets we are using
        }
    }
]

We are not done by installing babel-loader and presets. We also need to tell webpack that we are using them in our app.

So far we are done with our package.json file and webpack.config.js. Now open your command prompt and navigate to your project directory and run webpack command.

Webpack Command Line

Similarly, run webpack-dev-server command to start your local server.

conclusion:

Now you can write your React code inside the src directory ( index.js will be the entry point of your React app ). webpack will transform all your code and put them on a giant single JavaScript file called main.js. That's it. Happy Coding.