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

NodeJS and NPM
React and React DOM
Webpack
Babel

There are two ways of installing the ReactJS:

Using npm command
By using create-react-app

By using npm command

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

Step 2: Click on downloads.

Step 3: Install This Node.js

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

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

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

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

npm install react react-dom --save

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.

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

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

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' }) ] }

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.

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

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

It is described in the following image:

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

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;

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'));

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:

By using the create-react-app command

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

Step 2: Click on downloads.

Step 3: Install This Node.js

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

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

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

create-react-app your project name

It will take some time.

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

Step 8: Now write the command npm start

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

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.

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

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.

React Environment Setup Step by Step

By using npm command

HelloWorld

By using the create-react-app command

Related Topics

Difference Between State and Props in React

React Constructors

React Events

Features of ReactJS

React Error Boundaries

React Props Validation

React Router

Pros and Cons of ReactJS

React Components

React Lists

How to use React Context

Difference between Controlled and Uncontrolled component in ReactJs

React Environment Setup Step by Step

React Flux

React Table

React Native vs ReactJS

ReactJS Versions

React Code Splitting

React Component Life-Cycle

React Portals