In this lesson, you will learn how to setup up successful environment for ReactJS development. This setup involves many steps but this lesson helps you to speed up the development process later. In this process you first need NodeJS, so if you don’t have already installed in your system, you can follow below link to download and install NodeJS.

Sr.No. Software & Description
1 NodeJS and NPM

NodeJS is a JS server-side platform needed for the ReactJS development. Check out the NodeJS Environment Setup.

When you successfully installed NodeJS, you can follow these steps to setup ReactJS. You can install ReactJS using npm. There are two ways to install NodeJS.

  • First by using webpack and babel.
  • Secondly using the create-react-app command.

Installing ReactJS using webpack and babel

Webpack compiles dependent modules in a single file or bundle. Basically, webpack is a module bundler. It bundles the modules into single files. When you develop apps you can use it by command line or you can configure it by using webpack.config file.

Babel is a JavaScript transpiler and compiler. It converts one source code to another. You can easily use new ES6 features in your code because babel converts it into ES5 which can be easily run on all browser.

Step 1 – Create the Root Folder

First create a folder called reactApp to install all required files on your system. We are using mkdir command.

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

When you successfully create folder, create package.json file, it is very necessary to create any module. Now run npm init command by command prompt.

C:\Users\TutorialPace\Desktop\reactApp>npm init

Npm init command asks information about module such as author, description, packagename, etc. You can easily skip this information using –y option.

C:\Users\TutorialPace\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Step 2 – install React and react dom

Install react and its dom packages by using install react and react dom command of npm. Now you need to add packages that we install to package.json file using the command –save.

C:\Users\TutorialPace\Desktop\reactApp>npm install react --save
C:\Users\TutorialPace\Desktop\reactApp>npm install react-dom --save

You can also install all of them in a single command as-

C:\Users\TutorialPace\Desktop\reactApp>npm install react react-dom --save

Step 3 – Install webpack

Now install webpack, webpack-dev-server and webpack-cli because we are using it to generate bundler.

C:\Users\TutorialPace\Desktop\reactApp>npm install webpack –save
C:\Users\TutorialPace\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\TutorialPace\Desktop\reactApp>npm install webpack-cli --save

You can also install all of them in a single command as-

C:\Users\TutorialPace\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Step 4 – Install babel

Now install babel and its plugins babel-loader@7, babel-core, babel-preset-react, babel-preset-env and, html-webpack-plugin.

C:\Users\TutorialPace\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\TutorialPace\Desktop\reactApp>npm install babel-loader@7 --save-dev
C:\Users\TutorialPace\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\TutorialPace\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\TutorialPace\Desktop\reactApp>npm install html-webpack-plugin --save-dev

You can also install all of them in a single command as-

C:\Users\TutorialPace\Desktop\reactApp>npm install babel-core babel-loader@7 babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Step 5 – Create the Files

Now we create files to complete installation namely, index.html, App.js, main.js, webpack.config.js . You can create these all files using command prompt or manually.

C:\Users\TutorialPace\Desktop\reactApp>type nul > index.html
C:\Users\TutorialPace\Desktop\reactApp>type nul > App.js
C:\Users\TutorialPace\Desktop\reactApp>type nul > script.js
C:\Users\TutorialPace\Desktop\reactApp>type nul > webpack.config.js

Step 6 – Set Compiler, Server and Loaders

Now set webpack entry point to script.js. Bundled app will be served in output path. We are setup server to 8080 port. You can use any port it’s up to you. Add following code in webpack.config.js.

webpack.config.js

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

module.exports = {
   entry: './script.js',
   output: {
      path: path.join(__dirname, ''),
      filename: 'transpiled.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 open package.json file and delete the “test” “echo \”Error: no test specified\” && exit 1″ inside the “scripts” object. We don’t need this line because this line is for testing purpose and we don’t do any testing in this lesson. Now add start and build commands.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Step 7 – index.html

Add following code to the index.html file. It is just regular html file. In this we are setting div id =” app” as root element for our app. Add script index.js. This is our bundled app file.

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

Step 8 − App.js and script.js

Add following code to the app.js and script.js file. App.js is our first component. We will discuss components later in subsequent lessons.  It 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;

Now we import App.js component and render it to our root App element, so you can see it in a browser.

script.js

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

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

Note −Remember when you want to use something you need to import it first. If you want to use components in other parts of your app, you need to export it after creation and import in a file where you need to use it.

Step 9 – Running the Server

Setup is complete now we add server. We can start server by using following command.

C:\Users\TutorialPace\Desktop\reactApp>npm start

We can now see our port. In our case, the URL is http://localhost:8080/. Open in its browser and you see following output.

Step 10 – Generating the bundle

In the end, you need to run build command in the command prompt to generate bundle.

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

This command generate bundle in current folder as shown in picture.

generating the bundle

Using the create-react-app command

You can install ReactJS in more simple way by installing create-react-app instead of webpack and babel.

Step 1 – install create-react-app

Find desktop and install Create React App using the following command in command prompt.

C:\Users\TutorialPace>cd C:\Users\TutorialPace\Desktop\
C:\Users\TutorialPace\Desktop>npx create-react-app my-app

This command installs all required files and a folder named my-app on a desktop.

Step 2 – Delete all the source files

Find the src folder in a generated my-app folder and remove all files by using the following way.

C:\Users\TutorialPace\Desktop>cd my-app/src
C:\Users\TutorialPace\Desktop\my-app\src>del *
C:\Users\TutorialPace\Desktop\my-app\src\*, Are you sure (Y/N)? y

Step 3 – Add files

Now add files named as index.css and index.js in src folder like below.

C:\Users\TutorialPace\Desktop\my-app\src>type nul > index.css
C:\Users\TutorialPace\Desktop\my-app\src>type nul > index.js

Add following code in the index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Step 4 – Run the project

In the end run project by using start command.

npm start

Run the Project