How to install ReactJS software

How to install
Reactjs in windows
Hope Tutors

In this article we are going to discuss about the installation setup for React JS in
windows environment. We just need NodeJS for installing this. Once we done with
the installation of NodeJS we can able to install React JS using NPM. This is possible
in 2 ways. They are,
• webpack & label.
• create-react-apps command.
Now, in this article the first method is discussed in detail.

Using the Webpack & Label:
In general, we say webpack as module bundler. It takes
modules which are dependent and compile it to one
bundle. Generally, we use this in developing the app
with the help of command line. This is also possible by
configure this using the webpack.config.files.
In general Babel is known as JavaScript compilers &
transpiler. We use it for converting source code from one
to other. With the help of babel, we can use ES6 new
feature in our code, babel generally convert this code as
ES5. So that we can run this code on any browser.

1st Step:
Creating Root folders:

First of all, we need to create a new folder in our desktop and name it as
reactapps. This is used for installing all the needed files. This is possible with the
help of the command mkdir.
For creating any modules we must need to generate package.json. Once we
create the folder, just we also need to create this packaage.json. For this we want
to run command npm init in command prompt.
D:UsersusernamesDocument>mkdir reactApps>npm init
This npm init will ask you about the module information. We can able to skip this
by the option -Y.

2nd Step:
Installing the React & React dom:
Our main aim is to install the ReactJS along with its dom package. This is simply
possible with the help of the commands install react & react-dom. We can able to add
whatever package we install to the package.json. This is possible by using the option –
save.
Or we can also achieve this in one command. The command is as follows,

3rd Step:
Installing the webpack:
 Generally, we use the web pack for generating
the bundler. For this we have to install web
pack. Also, we have to install the webpack -
dev-server as well as webpack-cli. This is
possible using the following command lines.
They are as follows,
Or we can also achieve this in one command
line. The command line is as follows,

4th Step:
Installing the babel:
 We have to also install the following. They are,
• Babel.
• Babel loaders.
• Babel core plugins.
• Preset env of babel.
• Preset react of babel.
• HTML web pack plugins.
This is possible using the following command lines. They are as follows,
Or we can also achieve this in one command line. The command line is as follows,

5th step:
Creating Files:
 To complete installation process create the
following files.
1. webpack.config.js
2. main.js
3. index.html
4. App.js
5. .babelrc

6th Step
Setting loader, server and compiler
In this step, please add the below code. In this example, the development server port is 8001. You can choose your own port number.
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./main.js’,
output: {
path: path.join(__dirname, ‘/bundle’),
filename: ‘index_bundle.js’
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
query: {
presets: [‘es2015’, ‘react’]
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: ‘./index.html’
})
]
}
In package.json, delete “test” because no test is done.

7th step:
Update index file
There are two tasks
1. Update div id as “app”.
2. Add “index_bundle.js”.

8th Step:
Add App.js and main.js
Add the following files
Main.js
Please create a new file called .babelrc

9th Step:
In this step, please start the npm with command “npm start”.
create the bundle “npm run build”

How to install ReactJS software

More Related Content

What's hot (20)

Similar to How to install ReactJS software (20)

Recently uploaded (20)

How to install ReactJS software