React.js

3 min readMay 24, 2021

What is React.js?

It’s a front-end Javascript library for creating user interfaces or UI components that’s open source. React.js was developed by Jordan Walke, a Facebook software engineer.It is maintained by Facebook.React can be used to build single-page or mobile applications as a base. React application requires additional libraries for routing because react is only concerned with state management and rendering the state to the DOM

Features of React.js?

JSX: An extension to javascript. Though it is not necessary to use JSX in react, it is a useful feature that is also simple to use.

Components: Components are pure javascript functions that help to simplify code by separating logic into reusable, independent code. Components can be used as functions and components can be used as classes. Components have a state, called props, that makes life easier.The condition of each of the props is preserved inside a class.

Virtual DOM: It is an in-memory data-structure cache. Only the most recent DOM updates have been modified in the browser’s DOM.

Javascript Expressions: Curly brackets({}) can be used to insert JS expressions into jsx files, for example.

Pros and Cons of React.js

Pros

Only the most recent changes are updated in the browser’s DOM by ReactJS, which uses a virtual DOM that uses an in-memory data-structure cache. This improves the app’s efficiency.
Using the react component function, you can build components of your choosing. The modules are reusable and useful for code maintenance.
Since Reactjs is an open-source javascript library, it’s simple to get started.
React got popular in a short period of time, maintained by Facebook and Instagram. Since it is used by many well-known companies such as Apple, Netflix etc.
ReactJS, the library, is managed by Facebook, so it is well-maintained and updated.
It can be used to build both desktop and mobile apps with rich user interfaces.
Since most of the coding is done in Javascript rather than HTML, it’s simple to debug and evaluate.

Cons

The majority of the code is written in JSX, which means that HTML and CSS are used in javascript. This may be confusing since most other frameworks tend to keep HTML and javascript code separate.
ReactJS has a wide file size.

How to install React?

Before installing React we have to install Node.js and NPM first. There are two ways of installing react

First Option

Step 1 : Open the command prompt (Using Windows+R keys) and type ‘cmd’ to open a run command box and click ‘OK’

Step 2 : Create a folder with name reactproject and type the following:

C:\Users\User>mkdir reactproject
C:\Users\User>cd reactproject

Then we can see the prompt indicate C:\Users\User\reactproject.

Step 3 : Create the package.json file using the following command

C:\Users\User\reactproject>npm init -y
C:\Users\User\reactproject\package.json:
{
   "name": "reactproject",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

We can skip the above commands if we skip -y option

C:\Users\User\reactproject>npm init

Step 4 : Install React and react dom

C:\Users\User\reactproject>npm install react --save
C:\Users\User\reactproject>npm install react-dom --save

Second Option

Step 1 : Open the command prompt (Using Windows+R keys) and type ‘cmd’ to open a run command box and click ‘OK’ and type the following

npm install -g create-react-app

Important fact : Make sure you’re in the desired directory/folder before running create-react-app, as this command will create the project folder in the current path.

Step 2 : To create the project and type the following

create-react-app reactproject

Then the entire process is automated and begins with creating a new React app folder for the project, then installs packages and dependencies. React, react-dom, and react-scripts are among the default packages.. It will only take a few minutes to complete the installation.