React JS Environment Setup

ReactJS - Environment Setup
Previous Page
Next Page
In this chapter, we will show you how to set up an environment for successful React
development. Notice that there are many steps involved but this will help speed up the
development process later. We will need NodeJS, so if you don't have it installed,
check the link from the following table.
Sr.No. Software & Description
1 NodeJS and NPM

NodeJS is the platform needed for the ReactJS development.
Checkout our NodeJS Environment Setup.
After successfully installing NodeJS, we can start installing React upon it using npm.
You can install ReactJS in two ways
 Using webpack and babel.
 Using the create-react-app command.
Installing ReactJS using webpack and babel

Webpack is a module bundler (manages and loads independent modules). It takes
dependent modules and compiles them to a single (file) bundle. You can use this
bundle while developing apps using command line or, by configuring it using
webpack.config file.
Babel is a JavaScript compiler and transpiler. It is used to convert one source code to
other. Using this you will be able to use the new ES6 features in your code where,
babel converts it into plain old ES5 which can be run on all browsers.
Step 1 - Create the Root Folder
Create a folder with name reactApp on the desktop to install all the required files,
using the mkdir command.
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp
To create any module, it is required to generate the package.json file. Therefore, after
Creating the folder, we need to create a package.json file. To do so you need to run
the npm init command from the command prompt.
C:\Users\username\Desktop\reactApp>npm init
This command asks information about the module such as packagename, description,
author etc. you can skip these using the –y option.
C:\Users\username\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
Since our main task is to install ReactJS, install it, and its dom packages, using install
react and react-dom commands of npm respectively. You can add the packages we
install, to package.json file using the --save option.
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom
--save
Or, you can install all of them in single command as −
C:\Users\username\Desktop\reactApp>npm install react react-dom
--save
Step 3 - Install webpack
Since we are using webpack to generate bundler install webpack, webpack-dev-server

and webpack-cli.
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server
--save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-
server webpack-cli --save
Step 4 - Install babel
Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-

react and, html-webpack-plugin
C:\Users\username\Desktop\reactApp>npm install babel-core --save-
dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-
dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env
--save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react
--save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin
--save-dev
C:\Users\username\Desktop\reactApp>npm install babel-core babel-
loader babel-preset-env
babel-preset-react html-webpack-plugin --save-dev
Step 5 - Create the Files
To complete the installation, we need to create certain files namely, index.html, App.js,
main.js, webpack.config.js and, .babelrc. You can create these files manually or,
using command prompt.
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

React JS Environment Setup

Uploaded by

React JS Environment Setup

Uploaded by

ReactJS - Environment Setup

Sr.No. Software & Description

1 NodeJS and NPM

Installing ReactJS using webpack and babel

Step 1 - Create the Root Folder

Step 2 - install React and react dom

Step 3 - Install webpack

Since we are using webpack to generate bundler install webpack, webpack-dev-server

Step 4 - Install babel

Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-

Step 5 - Create the Files

You might also like