ReactJS Overview: What is ReactJS , How to build website with react
ReactJS is a JavaScript library developed by Facebook. It is used for handling the view layer for the website and mobile application. ReactJS is the most popular library in 2018 to build website with react, it helps to create responsive and fast performance application. The latest version of reactjs is v16 in which Facebook team added many new features.
Basic knowledge and understanding of JavaScript, HTML, JavaScript object and events. Understanding client-server architecture to build a large application.
Step 7- Setting index.html
We are adding root element as div id=”reactapp” and adding the bundle.js script which is our bundle app file.
index.html
Advantages of ReactJS :
- ReactJS can be used at client side as well as server side, compatible with other frameworks.
- It uses virtual DOM which is a JavaScript object, this will improve application performance since DOM is faster than regular DOM.
- React component and data pattern improve readability, maintainability, and scalability which help to maintain a large application.
ReactJS Library Limitations:
ReactJS covers only view layer of the application not data flow layer. That’s why we are dependent on other libraries to build a website with react, for data flow we have libraries Flux and Redux. Redux is a most popular framework which helps to data flow, it provides single store to handle data in the application.
Prerequisites to learn ReactJS:
Prerequisites Software for React Development:
- NodeJS : latest version
- IDE : there are many IDE like Visual Studio Code , Atom etc.
- Client: any browser
- GitHub: setup github for versioning control
Setup React JS Application Step By Step:
Step 1- Create Application folder
This is root label folder of application. Folder name must be meaningful.
Suppose folder name is ReactWebApp which is in D drive.
Step 2- Create package.json file for register dependency
Open the command prompt and run init command in app folder label.
D:\ReactWebApp>npm init
D:\ReactWebApp>npm init
After running above command a package.json file will create in ReactWebApp folder.
Step 3- Install Global Packages
D:\ReactWebApp>npm install –g babel
D:\ReactWebApp>npm install –g babel-cli
Step 4- Install dependencies package and Plugins
Here we are installing the limited package as we need at initial label .you can install unlimited whatever you need.
D:\ReactWebApp>npm install webpack --save
D:\ReactWebApp> npm install webpack-dev-server --save
D:\ReactWebApp>npm install react --save
D:\ReactWebApp>npm install react-dom --save
The ‘--save’ command will add these packages in package.json.
We will need some babel plugins, so let’s install too.
D:\ReactWebApp>npm install babel-core
D:\ReactWebApp> npm install babel-loader
D:\ReactWebApp>npm install babel-preset-react
D:\ReactWebApp>npm install babel-preset-es2015
D:\ReactWebApp>npm install webpack-dev-server -g
Step 5- Create initial files
Files can be added manually or by command prompt. Files are index.html, App.js, main.js, and webpack.config.js.
Step 6- Set server, loaders and compiler
Let’s open webpack.config.js file and add the following code. Here webpack entry point to be index.js.
Webpack.config.js
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
Step 7- Setting index.html
We are adding root element as div id=”reactapp” and adding the bundle.js script which is our bundle app file.
index.html
<html lang ="en">
<head>
<meta charset ="UTF-8">
<title>React App</title>
</head>
<body>
<div id ="reactapp"></div>
<script src ="bundle.js"></script>
</body>
</html>
Step 8- Setting App.js and main.js
App.js
App.js
import React from 'react';
class ReactApp extends React.Component {
render() {
return (
<div>
React Redux Tutorials
</div>
);
}
}
export default ReactApp;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactApp from './App.js';
ReactDOM.render(<ReactApp />, document.getElementById('reactapp'));
Step 9- Start the server
D:\ReactWebApp>npm start
Open browser and type localhost:8080 and application will launch.
Friends please do like, share, subscribe and comment. Please comment for any specific topic.
you have a misspell in step 3 npm install –g babe-cli, it is npm install -g babel-cli.
ReplyDeleteThanks for visiting blog and I fixed typo misspelled.
DeleteHave a good day!
Excellent and useful blog Reactjs admin. Keep up the good work and share more like this.
ReplyDeleteReactJS Training Institutes in Chennai | ReactJS Training Chennai