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.
Join the DZone community and get the full member experience.
Join For Free
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?
- ReactJS is very simple to implement because of its simple syntax and architecture as compared to the competitors.
- 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.
- Virtual DOM concept of ReactJS makes it very efficient and fast.
- Because of VDOM, the page renders on the browser is a regular page which makes it good for SEO.
- 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.
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 –gNow 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.
Published at DZone with permission of Rachit Bhardwaj. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments