Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Setting Up ReactJS Environment With ES6, Webpack, and Babel

DZone's Guide to

Setting Up ReactJS Environment With ES6, Webpack, and Babel

In this post, we'll take a look at several different ways to set up a ReactJS environment, and get you set up using Facebook's JavaScript Library.

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

ReactJS With ES6, Webpack and Babel

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. A component-based structure is the future of the 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 renders on the 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 and 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, and 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.

Image title

First, we have to make sure NodeJS and NPM are 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 the 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 are 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 the 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. The loader is used to minify and compile files. Here we are using only the Babel loader, so we defined only that. We can also add other loaders according to the dependencies.

Finally, we need to link this file to 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


What Next?

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

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:
react js ,babel ,webpack ,web dev ,javascript

Published at DZone with permission of Rachit Bhardwaj. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}