How to install and start with React

React JS

React is a javascript library which is used for making the user interface. It is totally client side framework. React is developed by Facebook. It is totally component oriented. We make components and we can reuse them easily.

Installation:

Step 1:  install react globally on your computer by the bellow command
npm install -g create-react-app

Step 2:  After that  create a demo app  in any directory of your system
create-react-app demo-app

(This command will make a demo-app directory in your system. So this is your working folder)

Step 3:  After that go to this directory
cd demo-app
(Now your application is ready for use just run “npm start” command in this folder and application will run on the browser and next steps for manual installation.)
Step 4:  For writing modular code, we need to use web pack and it makes bundle of all component
Step 5:  we need to use a compiler such as Babel. It helps you write modern JavaScript code that still works in older browsers.
Step 6:  Now we will start to install react in our app. Now Install react and react-dom
npm init
npm install --save react react-dom
Step 7:  Install label loader
npm install --save-dev babel-loader babel-core
Step 8:  Create a webpack.config.js file in a “demo-app” folder and paste the code:
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
]}
Step 9:  we will install env preset, which enables transforms for ES2015+
npm install babel-preset-env --save-dev
Step 10:  now Create .babelrc configuration file and paste this code
{
"presets": ["react", "es2015", "stage-1"]

}
Step 11:  Now create an index.js file and paste this code
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, demo app!</h1>,
document.getElementById('demo')
);
For run this app you can use “npm start” . After that, this “Hello, demo app” page will render where the element id demo.
Now your basic react application is ready. 

Leave a Reply

Your email address will not be published. Required fields are marked *