ReactJS is a popular JavaScript library that is used to build a single page website. Reusable UI component can be created by using reactjs. It creates a virtual DOM in the memory that makes the application faster. It changes the changes the content of the browser automatically when any modification is done. It is developed by a Facebook software engineer named Jordan Walke. It is first used for facebook newsfeed in 2011 and it is released publically in 2013.
ReactJS Automatic Installation:
1. Download nodejs according to your operating system from the following link
https://nodejs.org/en/download/
2. Run the command prompt and create the project folder and go to the folder location and install reactjs modules.
npm install -g create-react-app3. Check reactjs is installed properly or not
create-react-app --version4. Create a new reactjs app
create-react-app new-app5. Go to project folder
cd new-app6. Start the server
npm start7. Modify App.js file and run the file.
ReactJS Manual Installation
1. Create the project folder and go to the folder location.
2. Setup for new reactjs app
npm init3. Install mandatory modules
npm i -S react react-dom4. Install required babel modules
npm i -D babel-core babel-loader babel-preset-env babel-preset-react
npm i -S @babel/core @babel/preset-env @babel/preset-react6. Install webpack
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin7. create .babelrc file and add the following content
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
8. Create webpack.config.js file and add the following content
const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
devServer: {
inline: true,
port: 8800
},
module:{
rules:[{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins:[
new HWP(
{template: path.join(__dirname,'/src/index.html')}
)
]
}
9. Create a folder src and add two files index.js and index.html
10. Add the following content into index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
11. Add the following content into index.js
12. Run the server
npm start13. Build the project
npm run built
You can check the next tutorial on react from the following link.