Rachit Bhardwaj

Setting Up ReactJS Environment With ES6, Webpack and Babel

 

React + Babel + Webpack

ReactJS developed by Facebook is a JavaScript library for creating large application user interfaces having continuous data changes. React is basically the V in MVC.

Why ReactJS?

  1. ReactJS is very simple to implement because of its simple syntax and architecture as compared to the competitors.
  2. Component structure makes it easy to work on. Component based structure is the future of JavaScript framework. Even Google used the same for Angular 2.
  3. Virtual DOM concept of ReactJS makes it very efficient and fast.
  4. Because of VDOM the page render on browser is a regular page which makes it good for SEO.
  5. It is open source and developed by Facebook.

Babel

Facebook keeps React up to date, even made it compatible with ES6. But as we know not all browsers support all the properties of ES6. So we use Babel for this purpose. Babel compiles the ES6 code into ES5 code so that it can run in the old browser.

Webpack

Webpack is a module bundler. It manages static assets and minifies and compiles files like SaaS, Less, Typescript.

Webpack checks for import and require statement in files and builds a dependency graph.

What and how webpack will work is determined by webpack.config.js.

React-JS-ES6-Setup

First we have to make sure NodeJS and NPM is installed. Using npm we will install all the packages we need.

First we will create a package.json file to save all the dependencies we need. Type this command in the terminal and enter the details it asks.

npm init

Now let’s install react and react DOM.

npm install --save react@0.14.7

npm install --save react-dom@0.14.7

 
Next we will need webpack and webpack development server. To install this, type this command in the terminal.

npm install --save-dev webpack@1.12.12

npm install webpack-dev-server@1.12.1 –g

 
Now as the bundling tool is installed we need our ES6 transpiler i.e. Babel. To install, type these command in terminal-

npm install --save-dev babel-loader@6.2.1
npm install --save-dev babel-core@6.4.5
npm install --save-dev babel-preset-es2015@6.3.13
npm install --save-dev babel-preset-react@6.3.13

 
Babel loader is for minifying and compiling files while presets ES2015 is for different plugins like arrow function, classes and duplicate keys.

Now create a file helloWorld.js and add this code-

var react = require('react');

var  ReactDOM = require('react-dom');

var helloWorld = react.createClass(function(){

render:function(){

            return(

            <div>Hello World</div>

);

   }

});

ReactDOM.render(

 < helloWorld />,

 document.getElementById('hello')

);

 
Create another file content.js in the same directory and add this code –

var react = require('react');
var  ReactDOM = require('react-dom');
var content= react.createClass(function(){
render:function(){
            	return(
            	<div>This is content</div>
);
}
});
ReactDOM.render(
  < content />,
  document.getElementById(' content ')
);

 
In the same directory now create another file main.js where we will import these two files –

var helloWorld =  require('./ helloWorld ');
var content =  require('./ content ');

 
Create index.js file with following content –

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <div id="content"></div>
  </body>
</html>

 

Configuring webpack

Now as we know the webpack is a module bundler and can bundle multiple module files into one. Let’s create a webpack.config.js file and add the following config.

var path = require('path');
var webpack = require('webpack');
 
module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
  	{
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
    	}
  	}
	]
  },
};

 
Let’s see what happened with the configuration file. First we imported the path and webpack. Require will search for the webpack module everywhere and it will import it from there.

Entry will be the file where we are importing all js and adding routing while output will be the compiled file. Loader is used to minify and compile files. Here we are using only babel loader so we defined only that. We can also add other loader according to the dependencies.

Finally we need to link this file into the main index file.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>

 
Now open the terminal and run the webpack server by typing this –

webpack-dev-server --progress –colors

Now in your browser, go to this

http://localhost:8080/webpack-dev-server/

and you will see your app in your browser.

What Next?

Now as our environment is setup you can check the official documentation to learn more about ReactJS.