Skip to content
+91-7795206615
|
info@habilelabs.io

  • Home
  • About
  • Services
    • Custom Application Development
    • UI/UX Designing
    • Web Application Development
    • Offshore Product Services
    • Technical Outsourcing
    • ERP Services
  • Company
    • Careers
    • Case Studies
  • Specialization
    • Frontend Frameworks
      • Angular
      • ReactJS
      • VueJS
      • HTML / CSS
      • Javascript /Jquery
      • Bootstrap
      • Material design
    • Backend Frameworks
      • NodeJS
      • Meteor
      • GraphQL
      • Loopback
      • Salesforce
      • Spring Boot
      • Odoo
      • Laravel
    • Database / ORM
      • MySQL
      • PostgreSQL
      • Oracle
      • MongoDB
      • Google Firebase
      • Mongoose
      • Sequelize
      • Hibernate / JPA
    • Languages
      • Java Script
      • Dot Net
      • Java
      • Python
      • C / C++
      • PHP
      • AI / ML
      • Type Script
    • Mobile Frameworks
      • Ionic
      • Native Script
      • Native Android App
      • Native iOS App
      • Google Flutter
      • React Native
  • Blog
  • Hire Us

How to install React JS : Automatic and Manual Installation

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security
how to install react js

Looking for how to Install React JS? You are at right place, we will discuss manual and automatic installation of React js in this article.

React JS is a famous JavaScript flexible front end library which is introduced by Facebook. It is totally component-oriented and helps to build the modular UI.

How to install the React JS :

There are 2 types of the installation process.

  •  Automatic installation
  •  Manual Installation

1. Automatic Installation of React.JS

The automatic process should be used when we want to create a new application of React.

Instructions:

  • npm install -g create-react-app
  • create-react-app my-app
  • cd my-app
  • npm start

(After that your application will run on the browser)

2. Manual Installation of ReactJS:

The manual installation process should be used when we want to use react in our existing application.

Requirements:

  • Webpack – It is a bundler, with the help of this we can write modular code and it creates a bundle of all the modules, it increases the performance of our application.
  • Babel – It is a compiler, it helps to run modern JavaScript (Like ES6) code in the older browser also.
    After installing webpack and Babel we have to install “react” and “react-dom” module.
  • npm install react react-dom –save After these installations, we can make components and render them also.

Folder structure:

This folder structure will help you to know all the required files used in our application. As you see node_modules folder is here, it contains all the modules which are required in our application like react, react-dom, webpack, Babel etc…

Most required files:

⦁ index.html:  This file will look like this.

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en"> 
<head>   
<meta charset="utf-8">   
<meta name="viewport" content="width=device-width, initial-scale=1">   
<title>React App</title> 
</head> 
<body>   
<div id="my-app"></div> 
</body>   
<script src="/bundle.js"></script>
</html>

⦁  .babelrc file: This file includes Babel configuration.

1
2
3
{
"presets": ["react", "es2015", "env"]
}

⦁ Webpack.config file: this is Webpack configuration file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'env']
      }
    }]
  },
  resolve: {
    alias: { 'react/lib/ReactDom': 'react-dom/lib/ReactDom' },
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

⦁ src/index.js file: This is the main file because we have made this file as the entry of this application.

1
2
3
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render('This is demo app.', document.getElementById('my-app ') );

So, your application is ready, for run this application use “npm start”.

With the help of this blog, you can install react in your application. I have introduced 2 methods of installation. So, you can create new react application or you can add react application in your existing application.

Habilelabs provides the best Web and Mobile Apps Development services with quality assurance, contact us if you have something to build in your mind.

Ask your quires about the installation problem in the comment section.

Hope you found it helpful, so don’t forget to share it with friends.

Posted byrohitJuly 4, 2017February 9, 2021Posted inReactTags: How to install react js, install react js, react js, react js Installation

Post navigation


:

Leave a comment

Cancel reply

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

Recent Posts

  • PyScript – Python for the Web Browser

    PyScript – Python for the Web Browser

  • Cross-Database with Association in Postgres with Sequelize

    Cross-Database with Association in Postgres with Sequelize

  • How can You Improve Your Communication Skills – Effective Tips

    How can You Improve Your Communication Skills – Effective Tips

  • 5 Reasons that Make CRM Software Beneficial for Every Business

    5 Reasons that Make CRM Software Beneficial for Every Business

  • Do Low-Code Solutions have a Future in Web Development?

    Do Low-Code Solutions have a Future in Web Development?

  • A Revenue Management Reset in Consumer Goods

    A Revenue Management Reset in Consumer Goods

Talk to our experts now

Have a project or looking for development team? Contact us.

Get a quote

About Us

Habilelabs Private Limited is the ISO 9001:2015 certified IT company, which has marked its flagship in 20+ countries with 100+ projects successfully

Company

  • About
  • Blog
  • Careers
  • Hire Us
  • Privacy Policy

Contact Us

  • +91-9828247415
  • +91-9887992695
  • info@habilelabs.io

Follow Us

Office

  • Habilelabs Private Limited
    4th Floor, I.G.M. School Campus,
    Sec-93 Agarwal Farm, Mansarovar,
    Jaipur, Rajasthan India
    Pin:302020