React js hello World Program
Here is a step by step approach with explanation of how to set up react environment
Prerequisites:
1) Node
Node Installation Process- Install node in your machine simply by downloading it from
https://nodejs.org/en/download/.
This screen appears , then click the file according to your system requirements.
Once installed you may check in the command prompt by typing
npm -v and node -v
If node is successfully installed on your machine, we are good to move forward to set up our react environment.
React js environment setup step by step
1)Creating folder
Create folder and name it ReactJs and press shift+right click , then select command prompt from the options
2) Creating package.json
type in the command prompt the below code
npm init
npm init creates a package.json for your application.It prompts to enter the feilds to be stored in package.json
you can just press enter untill the whole package gets created.Your package.json will look something like the below
Note:
Never name your folder as react as mentioned above.By doing so, you will get errors during react installation.
3)Installing Webpack
In order to install webpack , type the below code
npm install webpack webpack-dev-server --save-dev
4) Installing react
In order to install react, type the below code
npm install react react-dom --save
5)Installing Babel
In order to install babel, type the below code
npm install babel-core babel-loader babel-presets-es2015 babel-preset-react --save-dev
6)Other files
After following these 5 steps you will find node_modules and package.json in your folder.Then create the following files in your folder
Now your folder will look like below, this is not a recommended folder structure but to create a basic app the following folder structure is enough as it will be simple to understand.
7) Webpack.config.js
Copy and paste the below code in webpack.config.js
var path=require('path');
module.exports={
entry:'./script.js',
output:{
path:path.resolve(__dirname),
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:'/node_modules/',
query:{
presets:['es2015','react']
}
}
]
}
}
8)Index.html
Copy and paste the below code in index.html
<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="firstapp"></div>
<script src="bundle.js"></script>
</body>
</html>
9) script.js
Copy and paste the below code in script.js
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<h1>Hello World</h1>,
document.getElementById('firstapp')
);
Then type the below code on the command line
npm run server
The following appears , mentioning that project is running at http://localhost:8080/
Open browser and goto http://localhost:8080/.You will find your first hello World program in react.
Here is a step by step approach with explanation of how to set up react environment
Prerequisites:
1) Node
Node Installation Process- Install node in your machine simply by downloading it from
https://nodejs.org/en/download/.
This screen appears , then click the file according to your system requirements.
Once installed you may check in the command prompt by typing
npm -v and node -v
If node is successfully installed on your machine, we are good to move forward to set up our react environment.
React js environment setup step by step
1)Creating folder
Create folder and name it ReactJs and press shift+right click , then select command prompt from the options
2) Creating package.json
type in the command prompt the below code
npm init
npm init creates a package.json for your application.It prompts to enter the feilds to be stored in package.json
you can just press enter untill the whole package gets created.Your package.json will look something like the below
Note:
Never name your folder as react as mentioned above.By doing so, you will get errors during react installation.
3)Installing Webpack
In order to install webpack , type the below code
npm install webpack webpack-dev-server --save-dev
4) Installing react
In order to install react, type the below code
npm install react react-dom --save
5)Installing Babel
In order to install babel, type the below code
npm install babel-core babel-loader babel-presets-es2015 babel-preset-react --save-dev
6)Other files
After following these 5 steps you will find node_modules and package.json in your folder.Then create the following files in your folder
- index.html
- script.js
- webpack.config.js
Now your folder will look like below, this is not a recommended folder structure but to create a basic app the following folder structure is enough as it will be simple to understand.
7) Webpack.config.js
Copy and paste the below code in webpack.config.js
var path=require('path');
module.exports={
entry:'./script.js',
output:{
path:path.resolve(__dirname),
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:'/node_modules/',
query:{
presets:['es2015','react']
}
}
]
}
}
8)Index.html
Copy and paste the below code in index.html
<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="firstapp"></div>
<script src="bundle.js"></script>
</body>
</html>
9) script.js
Copy and paste the below code in script.js
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<h1>Hello World</h1>,
document.getElementById('firstapp')
);
Then type the below code on the command line
npm run server
The following appears , mentioning that project is running at http://localhost:8080/
Open browser and goto http://localhost:8080/.You will find your first hello World program in react.