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.
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.