How to set up the ReactJS environment with ES6, Webpack and Babel for Beginners

How to set up the ReactJS environment with ES6, Webpack and Babel for Beginners

React is a Javascript library, by Facebook, that is used for building user interfaces. It is a bomb library that offers so many advantages but one of the biggest setbacks is the steep learning curve. When I started out, one of the things that bugged me a whole lot was that most of the tutorials skipped over the React environment set-up.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.

React is a Javascript library, by Facebook, that is used for building user interfaces. It is a bomb library that offers so many advantages but one of the biggest setbacks is the steep learning curve. When I started out, one of the things that bugged me a whole lot was that most of the tutorials skipped over the React environment set-up.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.

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.

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.

Now, let’s install react and react DOM.

npm install --save [email protected]

npm install --save [email protected]

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

npm install --save-dev [email protected]

npm install [email protected] –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[email protected]
npm install --save-dev [email protected]
npm install --save-dev [email protected]
npm install --save-dev [email protected]

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.

We now have a working React Environment set-up. I hope that this tutorial shed some light on what the configurations really do and why we need them.

Thanks for reading !

react reactjs es6 javascript Webpack

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Modern JavaScript for React JS - ES6

A complete guide for beginners to learn the essential topics of ES6 which are required to learn React JS

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

React Slider: How to Build an Image Slider With React Hooks

React Slider: How to Build an Image Slider With React Hooks. Creation of all the components necessary to display an array of content, as well as the ability to navigate back and forth to each slide in our slider. Adding an autoplay feature. We will dive deeper into React Hooks and optimize the slider both for performance and visual appeal. We will achieve this by tapping into useEffect and some new memoization helpers.

Modern JavaScript for React.JS and ES6

A complete guide for beginners to learn the essential topics of ES6 which are required to learn React JS - Udemy Free Course