React JS is developed by facebook and the project is released as open source.

What is React Js?
React is a flexible & efficient javascript library used for creating reusable UI components.

React Js is not a framework. It is just a library. And you all know about MVC(Model, View, Controller). React uses only ‘V’ (view) layer.

Features of React JS
1. Virtual Dom in React
2. Reusable Components
3. React can be used on client and server side.

Limitations of React JS
React will use only V (View). So you still need to choose other technologies to get a complete tooling set for development.

React Js Environment Setup Using Webpack

Requirements:

You need only 4 things to install react JS in your local environment.

Node Js & NPM
React Js
Babel Js
Webpack

Steps to follow:

1. Install Node Js & NPM
Download Node Js from here.
Before installing React, Babel & Webpack let me start with creating the directory structure for our project.

2. Directory Structure

Create a directory name “react-app“.

Command to create a folder:
mkdir sample-app

Once you installed Node Js & npm next you need to create a package.json file.

What is package.json?

The package.json is a file where you define the project details and all the dependencies that you need for your project.

How to create package.json file?

Run the following commands

cd sample-app

npm init


When you run npm init command it will ask you few details like your project name, project version, author name. Just give your answers. If you don’t want to give any answers just hit enter.

A package.json file will be created in your sample-app folder.

3. Install React JS

You can install react Js in two ways. Either by defining react package in package.json file or through npm command.

Command to install react js:

npm install react react-dom --save
when you use “–save” in your command, it will add the dependencies to your package.json file.

4.Install Babel JS
npm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save

5. Install Webpack
npm install webpack webpack-dev-server --save
Now we will configure webpack & add files to our project as below.

Let’s create following 4 files in react-app folder

index.html
main.js
App.jsx
webpack.config.js

Now open the index.html file and add the following lines of code.










Now open the App.jsx file and add the following lines of code.

import React,{ Component } from 'react';
class App extends Component {
render() {
return (

);
}
}
export default App;


Now open the main.js file and add the following lines of code.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));


Now open the webpack.config.js file and paste the following lines of code

var config = {
entry: './main.js',

output: {
path:'/',
filename: 'index.js',
},

devServer: {
inline: true,
port: 8000
},

module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',

query: {
presets: ['es2015', 'react']
}
}
]
}
}

module.exports = config


add this line to your package.json file

"start": "webpack-dev-server --hot"


Example:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot"
},

And start your server with the following command.

npm start


Now open the browser and hit http://localhost:8000