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:\Users\usernames\Document>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”.
10th Step:
create the bundle “npm run build”
