ReactJS – Environment Setup

You will learn here to setup an environment for the successful development of ReactJS application.

Pre-requisite for ReactJS working

  • NodeJS and NPM (Package Manager) – It is used to take advantages of a vast ecosystem of third-party packages and easily update and install through NPM.
  • Webpack – It is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally binds a dependency graph and maps each and every module that your project needs and generates one or more bundles accordingly.
  • Babel – Babel is a toolchain that is primarily used to convert ECMA script 2015+ code into a backward compatible version of JavaScript in current and older browsers or environments.

Once NodeJS, installed successfully, you can install ReactJS in two ways –

  1. Using the npm command.
  2. Using the create-react-app command.

Using the npm command

After successfully installation of NodeJS, you can verify these installation as per below commands:

node -v
npm -v

Create a root folder with a name you want to keep for new application on desktop. Suppose folder name is reactApp.

Now, you have to create package.json file. In order to create any module, package.json is required to generate first in the application folder.

Run the below command:

 npm init -y  

After package.json file created, you have to install react and its DOM packages using the below given commands:

npm install react –save
npm install react-dom –save

Install Webpack

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

Install Babel

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

Create Files

Now to complete the installation, you will need the basic project files in application folder.

  • index.html
  • App.js
  • main.js
  • webpack.config.js
  • .babelrc

>touch index.html
>touch App.js
>touch main.js
>touch webpack.config.js
>touch .babelrc

Set Compiler, Server and Loaders

In webpack-config.js file please add the following code. Here, we are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8080 port. You can choose any port that you want to keep.

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: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Now in package.json delete “test” “echo \”Error: no test specified\” && exit 1″ inside “scripts” object and add the start and build commands instead.

{  
  "name": "reactApp",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "start": "webpack-dev-server --mode development --open --hot",  
    "build": "webpack --mode production"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "dependencies": {  
    "react": "^16.8.6",  
    "react-dom": "^16.8.6",  
    "webpack-cli": "^3.3.1",  
    "webpack-dev-server": "^3.3.1"  
  },  
  "devDependencies": {  
    "@babel/core": "^7.4.3",  
    "@babel/preset-env": "^7.4.3",  
    "@babel/preset-react": "^7.0.0",  
    "babel-core": "^6.26.3",  
    "babel-loader": "^8.0.5",  
    "babel-preset-env": "^1.7.0",  
    "babel-preset-react": "^6.24.1",  
    "html-webpack-plugin": "^3.2.0",  
    "webpack": "^4.30.0"  
  }  
}  

HTML webpack template for index.html

You can add a custom template to create index.html using the HtmlWeb-packPlugin plugin. It will enable you to add a viewport tag to support mobile responsive scaling of you app. It also set the div id = “app” as a root element for your app and adding the index_bundle.js script, which is your bundled app file.

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

App.jsx and main.js

This is the app entry point and first React component. It renders Hello World.

App.js

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

Now, import this component and have to render it to your root App element so that you 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 .babelrc file

Please create a file .babelrc and copy the below code to it.

.babelrc

{  
   "presets":[  
  "@babel/preset-env", "@babel/preset-react"]  
}  

Running the Server

Once the installation process and setting up the app successfully completed, you can start the server by running the below command:

npm start

It will show the port number which you need to open in the browser. After you open it, you will see the following output.

Generate the Bundle

Now, you have to generate the bundle for app created. Bundling will process imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once. To generate this, you have to run below given build command in command prompt.

npm run build

Using the create-react-app command

If you want to install react without going in the process of installing webpack and babel, then you can choose this command create-react-app to install react. The ‘create-react-app‘ is a tool maintained by Facebook itself. This is suitable for beginners without manually having to deal with transpiling tools like webpack and babel. So, let’s understand how to install React using CRA tool.

Step 1: Install NodeJS and NPM

Step 1: Create a new React project (my-reactapp)

Step 3: npx create-react-app my-reactapp

Step 4: Run the Server. npm start

Trending Topics