React Environment Setup Step by Step

React Environment Setup

This section will provide you the information about how to set up an environment for the successful development of ReactJS application:

Pre-Requisite for ReactJS

  1. NodeJS and NPM
  2. React and React DOM
  3. Webpack
  4. Babel

There are two ways of installing the ReactJS:

  1. Using npm command
  2. By using create-react-app

By using npm command

Step 1: Install NodeJS. Go to https://nodejs.org

Step 2: Click on downloads.

Download NodeJs

Step 3: Install This Node.js

Step 4: Check the version by using the following command.

Check the version by using commands

Step 5: Now, create a root folder in your desired directory with your desired name.

create a root folder in your desired directory

Step 6: Create a package.json file. This file is required for generating a module. Create this file by using the command:

npm init –y

file is required for generating a module

Step 7: Install React and its DOM Packages by using the npm command:

npm install react react-dom --save  

Install React and its DOM Packages

Step 8: Install Webpack

Webpack is mainly used for module packaging, development, and production pipeline automation.

For installing Webpack, we have to use the following command:

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

In the above command, webpack-dev-server is used during development, webpack to create production builds, and webpack-cli provides a set of commands.

 Install Webpack

Step 9: Install Babel.

Babel is simply a JavaScript compiler that is used for creating one source code to others. For installing Babel, use the following command:

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

Install Babel.

Step 9: Create files. To complete the installation process, we need to add some files to the project folder. The files are:

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

We can manually create these files, or by using the command prompt. For creating files, use the command prompt, and type the following command:

type nul > filename

Step 10: Now, Set Compiler, loader, and server for React Application

  1. Configure Webpack

Add the code given below in the webpack.config.json to configure the Webpack. It sets the development server to 8080 port. It is responsible for defining the loaders for processing the file types that uses within your app and wrap up by adding plugins needed during our development.

webpack.config.json constpath=require('path'); constHtmlWebpackPlugin=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/, use:{ loader:"babel-loader", } } ] }, plugins:[ newHtmlWebpackPlugin({ template:'./index.html' }) ] }
Configure Webpack

Now, open package.json file and delete “test" "echo \" Error: no test specified\" && exit 1", which is inside “scripts” object, and add the commands start and build.

open package.json file

Delete which is shown in above image and add the following two:

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

It is described in the following image:

build webpack --mode production
  • HTML webpack template for index.html

We have to add a custom template to generate index.html using the HtmlWeb-packPlugin plugin. It enables us to a viewport tag for supporting mobile scaling of our app.

Add the following code to your index.html file.

index.html ReactApp
HTML webpack template for index.html
  • App.jsx and main.js

This is the app entry point i.e., the first react component. It will render Hello World.

Add the following code to your App.js file.

App.js importReact,{Component}from'react'; classAppextendsComponent{ render(){ return(

HelloWorld

); } } exportdefaultApp;
App.jsx and main.js

Now, we have to import this component and render it to the root App element so that we can see it in the browser.

main.js

importReactfrom'react'; importReactDOMfrom'react-dom'; importAppfrom'./App.js'; ReactDOM.render(,document.getElementById('app'));
main.js
  • Create .babelrc file

Add the following code to your .babelrc file.

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

Now, run the server. For running the server, apply the following command in your command prompt within the same folder in which all react files exist.

npm start

This command will show the port number, which requires an opening in the browser. After opening it, you will get the following output:

npm start

By using the create-react-app command

Step 1: Install NodeJS. Go to https://nodejs.org

Step 2: Click on downloads.

Click on download node js

Step 3: Install This Node.js

Step 4: Check the version by using the following command.

Check the version

Step 5: Now Install NPM in your selected drive, by using the command: npm install –g create-react-app

Now Install NPM in your selected drive

Step 6:  Now create your own React project by using the command:

create-react-app  your project name

It will take some time.

create your own React project1
create your own React project1

Step 7:  Now move to your project folder by using: cd ‘your folder name.'

move to your project folder

Step 8:  Now write the command npm start

write the command npm start

Then a webpage on your browser will be opened. This is the output of your React App.

webpage on your browser will be opened

If you want to change the above output, open the App.js file, which is located in the src folder (src>>App.js), and make the changes that you want to see on the screen. Once you save the file, the webpack will recompile the code, and the page will automatically refresh, then the changes will be reflected on the screen.

For example:

The following image shows you the output after a change in the App.js file.

shows you the output after a change

Now, open your project in the editor. I have Visual studio. You can see the project’s default structure in the following image:

 open your project in the editor

There are various files and folders in the root directory of the React Application. Some are defined as follows:

1. node_modules: It includes React libraries and any other third party libraries if needed.

2. public: It contains the public assets of the application. It contains the file name index.html where React will mount the application by default on the <div id=”root”></div> element.

3. src: It contains several files like App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. The App.js file will always be responsible for displaying the React output screen.

4. package-lock.json: It automatically generates for any operations where the npm package modifies either the package.json or the node_modules tree. It can't be published. If it finds any other place rather than the top-level package, then it will be ignored.

5. package.json: It contains various metadata for the project. It provides information to the npm that allows identifying the project dependencies as well as the project.

6. README.md: It includes the React topics documentation.