ReactJS Simple Installation Setup Steps
React is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components.
React implements one way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.
JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
Steps 1 :
First install Nodejs and NPM. For Install Nodejs Setup Environment
Steps 2 :
To install Global packages for this install babel
Steps 3:
Create Folder
Create the reactjs execution folder by using command prompt by using below command.
Steps 4:
Install Dependencies Modules like install webpack bundler.
Install react and react-dom dependencies
Install the babel plugin module
Steps 5:
Create the reactjs files
Index.html
App.jsx
main.js
webpack.config.js
Steps 6:
Run the reactjs in command prompt
Advantage :
React is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components.
React implements one way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.
JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
Steps 1 :
First install Nodejs and NPM. For Install Nodejs Setup Environment
Steps 2 :
To install Global packages for this install babel
sudo npm install -g babel
npm install -g babel-cli
npm install -g babel-cli
Steps 3:
Create Folder
Create the reactjs execution folder by using command prompt by using below command.
mkdir reactApp
npm init
npm init
Steps 4:
Install Dependencies Modules like install webpack bundler.
npm install webpack --save
npm install webpack-dev-server --save
npm install webpack-dev-server --save
Install react and react-dom dependencies
npm install react --save
npm install react-dom --save
npm install react-dom --save
Install the babel plugin module
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
Steps 5:
Create the reactjs files
index.html
App.jsx
main.js
webpack.config.js
App.jsx
main.js
webpack.config.js
Index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!! Welcome to Codingslover...!
</div>
);
}
}
export default App;
class App extends React.Component {
render() {
return (
<div>
Hello World!!! Welcome to Codingslover...!
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var config = {
entry: './main.js',
output: {
// path:'./',
path: path.resolve(__dirname, 'build'),
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
/* // loaders: [
{
// test: /\.jsx?$/,
// exclude: /node_modules/,
// loader: 'babel-loader',
// query: {
// presets: ['react']
// }
// }
//] */
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /\.test\.jsx?/],
use: [{
loader: 'babel-loader',
options: {
presets: ['react', ['es2015', {'modules': false}]]
}
}]
}]
}
,
resolve: {
extensions: [ '.js', '.jsx']
}
}
module.exports = config;
var webpack = require('webpack');
var config = {
entry: './main.js',
output: {
// path:'./',
path: path.resolve(__dirname, 'build'),
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
/* // loaders: [
{
// test: /\.jsx?$/,
// exclude: /node_modules/,
// loader: 'babel-loader',
// query: {
// presets: ['react']
// }
// }
//] */
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /\.test\.jsx?/],
use: [{
loader: 'babel-loader',
options: {
presets: ['react', ['es2015', {'modules': false}]]
}
}]
}]
}
,
resolve: {
extensions: [ '.js', '.jsx']
}
}
module.exports = config;
Steps 6:
Run the reactjs in command prompt
Npm start
Advantage :
- React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
- React can be used on client and server side.
- Component and Data patterns improve readability which helps to maintain larger apps.
- React can be used with other frameworks.
