React js -Environment Setup | Installing ReactJS using webpack and babel

react component

Webpack is a module bundler (manages and loads independent modules). It takes dependent modules and compiles them to a single (file) bundle. You can use this bundle while developing apps using the command line or, by configuring it using webpack.config file.

Babel is a JavaScript compiler and transpiler. It is used to convert one source code to others. Using this you will be able to use the new ES6 features in your code where babel converts it into plain old ES5 which can be run on all browsers.

Step 1 – Create the Root Folder

Create a folder with name react app on the desktop to install all the required files, using the mkdir command.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

To create any module, it is required to generate the package.json file. Therefore, after creating the folder, we need to create a package.json file. To do so you need to run the npm init command from the command prompt.

npm init 

This command asks information about the module such as packagename, description, author, etc.

Step 2 – install React and react-dom

Since our main task is to install ReactJS, install it, and its dom packages, using install react and react-dom commands of npm respectively.

npm install react react-dom --save

 

Step 3 – Install webpack

Since we are using webpack to generate bundler install webpack, webpack-dev-server and webpack-cli.

npm install webpack webpack-dev-server webpack-cli --save

 

Step 4 – Install babel

Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin

npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev 

 

Step 5 – Create the Files

To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files manually or, using the command prompt.

Step 6 – Set Compiler, Server and Loaders

Open webpack-config.js file and add the following code. We are setting webpack entry point to be main.js. The output path is the place where the bundled app will be served. We are also setting the development server to 8001 port. You can choose any port you want.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

 

Step 7 – index.html

This is just regular HTML. We are setting div id = “app” as a root element for our app and adding index_bundle.js script

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

 

Step 8 − App.jsx and main.js

This is the first React component. We will explain React components in-depth in a subsequent chapter. This component will render Hello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

We need to import this component and render it to our root App element, so we can see it in the browser.
main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Create a file with name .babelrc and copy the following content to it.

{
   "presets":["env", "react"]
}

 

Step 9 – Running the Server

The setup is complete and we can start the server by running the following command.

npm start

 

Step 10 – Generating the bundle

Finally, to generate the bundle you need to run the build command.

npm run build

Thanks for reading this long article and I will be back with another one.

LEAVE A REPLY

Please enter your comment!
Please enter your name here