Setting up the Environment for ReactJS or React.js
Hi All,
In this blog I am going to show you how you can setup the environment for ReactJS or React.js. This is the new java script library which is developed and maintained by Facebook and Instagram. This allows us to create reusable UI components.
For information about ReactJS you can visit the following link :
https://facebook.github.io/react/
https://www.tutorialspoint.com/reactjs/
Now in this blog we will see how we can setup the initial requirement in order to develop and run the application written in ReactJS.
1. First and foremost is to install the latest version of Node.js. You get the installer from the following website.
https://nodejs.org/en/
You can download the node JS from this URL as shown below in screenshot.
Once it is downloaded in you system you can run it and install it on your machine.
After installation of NodeJS we need to install three more things.
a. Babel
b. Webpack
c. React
So open the command prompt and type npm install -g babel and hit enter.
Now type npm install -g babel-cli and hit enter.
Now create a sample application and install all required library one by one. For creating a application I have created first the folder with name "MyFirstREACTApp" as shown below in screenshot.
Now we will go to this folder and open a command prompt and enter the npm init command as shown below.
Now type npm install react --save in the command prompt and hit enter.
After this command you can see a file named "package.json" in your project folder as shown below:
Now run the following command "npm install react-dom --save" in command window.
Now you can see one more folder got created with name "node_modules" in our project folder as shown below:
You can see inside this newly created folder. You can find that it has installed all react-dom related extension files in this folder.
Now we will install the extension related to Babel:
First you need to go to package.json and add the following lines of code.
"babel": {
"presets": [
"es2015",
"react"
]
}
And then we will run the following command in command line as we have done above:
npm install babel-loader babel-preset-es2015 babel-preset-react --save
once this will be completed then you can see that the files related to babel has been imported into "node_modules" folder.
After completion of this command you can see that your package.json look like this:
Now we will install all the extensions related to webpack.
To install this we need to run npm install webpack --save in the same command window.
Now we will install webpack dev server on which we can run our ReactJS application.
To install the webpack dev server we need to run the following command:
npm install webpack-dev-server --save
After this our package.json file will look like this.
{
"name": "myfirstreactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
Now we will create three more files as follows:
1. index.html
2. index.jsx
3. webpack.config.js
The content of index.html will be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="container"></div>
<script src="myCode.js"></script>
</body>
</html>
and content of the index.jsx will be as follows:
import React from "react";
import ReactDOM from "react-dom";
var HelloWorld = React.createClass({
render: function() {
return (
<p>Hello, {this.props.name}!</p>
);
}
});
ReactDOM.render(
<div>
<HelloWorld name="Kunal Kumar"/>
</div>,
document.querySelector("#container")
);
and the content of the webpack.config.js fill be as follows:
var webpack = require("webpack");
var config = {
entry: "./index.jsx",
output: {
path: "./",
filename: "myCode.js"
},
devServer: {
inline: true,
port: 8089
},
module: {
loaders: [{
loader: "babel",
}]
}
};
module.exports = config;
Now run the following command to compile the code :
node_modules\.bin\webpack
You may get this error as shown above. in order to resolve this you have to run the following command once again.
npm install react --save
once you run this command and again run the previous command you can see that code is compiled successfully.
Now when you see the folder you can find the a new file with name myCode.js has been genarated.
Once your code is compiled, now you have to start the webpack dev server to run your page index.html.
To start the server you have to run the following command:
npm start
Once you enter this command you may get the following error in command window:
To resolve this issue we need to replace
"test": "echo \"Error: no test specified\" && exit 1"
with the line
"start": "webpack-dev-server --hot"
in package.json file.
Once it will modified your package.json will look like as follows:
{
"name": "myfirstreactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
Now when you run the "npm start" command once again you can see that it is working fine without any error and your webpack dev server is already started.
Now go to browser and type the following url and hit enter:
http://localhost:8089/index.html
You can see the following output in the browser.
In this blog I am going to show you how you can setup the environment for ReactJS or React.js. This is the new java script library which is developed and maintained by Facebook and Instagram. This allows us to create reusable UI components.
For information about ReactJS you can visit the following link :
https://facebook.github.io/react/
https://www.tutorialspoint.com/reactjs/
Now in this blog we will see how we can setup the initial requirement in order to develop and run the application written in ReactJS.
1. First and foremost is to install the latest version of Node.js. You get the installer from the following website.
https://nodejs.org/en/
You can download the node JS from this URL as shown below in screenshot.
Once it is downloaded in you system you can run it and install it on your machine.
After installation of NodeJS we need to install three more things.
a. Babel
b. Webpack
c. React
So open the command prompt and type npm install -g babel and hit enter.
Now type npm install -g babel-cli and hit enter.
Now create a sample application and install all required library one by one. For creating a application I have created first the folder with name "MyFirstREACTApp" as shown below in screenshot.
Now we will go to this folder and open a command prompt and enter the npm init command as shown below.
Now type npm install react --save in the command prompt and hit enter.
After this command you can see a file named "package.json" in your project folder as shown below:
Now run the following command "npm install react-dom --save" in command window.
Now we will install the extension related to Babel:
First you need to go to package.json and add the following lines of code.
"babel": {
"presets": [
"es2015",
"react"
]
}
And then we will run the following command in command line as we have done above:
npm install babel-loader babel-preset-es2015 babel-preset-react --save
once this will be completed then you can see that the files related to babel has been imported into "node_modules" folder.
After completion of this command you can see that your package.json look like this:
Now we will install all the extensions related to webpack.
To install this we need to run npm install webpack --save in the same command window.
To install the webpack dev server we need to run the following command:
npm install webpack-dev-server --save
{
"name": "myfirstreactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
Now we will create three more files as follows:
1. index.html
2. index.jsx
3. webpack.config.js
The content of index.html will be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="container"></div>
<script src="myCode.js"></script>
</body>
</html>
and content of the index.jsx will be as follows:
import React from "react";
import ReactDOM from "react-dom";
var HelloWorld = React.createClass({
render: function() {
return (
<p>Hello, {this.props.name}!</p>
);
}
});
ReactDOM.render(
<div>
<HelloWorld name="Kunal Kumar"/>
</div>,
document.querySelector("#container")
);
and the content of the webpack.config.js fill be as follows:
var webpack = require("webpack");
var config = {
entry: "./index.jsx",
output: {
path: "./",
filename: "myCode.js"
},
devServer: {
inline: true,
port: 8089
},
module: {
loaders: [{
loader: "babel",
}]
}
};
module.exports = config;
Now run the following command to compile the code :
node_modules\.bin\webpack
npm install react --save
once you run this command and again run the previous command you can see that code is compiled successfully.
Once your code is compiled, now you have to start the webpack dev server to run your page index.html.
To start the server you have to run the following command:
npm start
Once you enter this command you may get the following error in command window:
"test": "echo \"Error: no test specified\" && exit 1"
with the line
"start": "webpack-dev-server --hot"
in package.json file.
Once it will modified your package.json will look like as follows:
{
"name": "myfirstreactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
Now when you run the "npm start" command once again you can see that it is working fine without any error and your webpack dev server is already started.
http://localhost:8089/index.html
You can see the following output in the browser.
Comments
Post a Comment