DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Setting Up ReactJS Environment With ES6, Webpack, and Babel

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.

Rachit Bhardwaj user avatar by
Rachit Bhardwaj
·
Feb. 27, 17 · Web Dev Zone · Tutorial
Like (2)
Save
Tweet
10.54K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Babel (protocol)

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Make Git Forget a Tracked File Now in .gitignore
  • Why Your Database Needs a Machine Learning Brain
  • ETL/ELT on Kubernetes With Airbyte
  • 10 Programming Habits a Web Developer Should Embrace

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo