How to install and start with React

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 below 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. 

2 thoughts to “How to install and start with React”

Leave a Reply

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