React JS

React.JS History

React.JS was first used in 2011 for Facebook’s Newsfeed feature. Initial Release to the Public (V0.3.0) was in July 2013.

What is React.js?

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications.

Single-Page Application

A single-page application is an app that works inside a browser and does not require page reloading during use.

most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.

Benefits of ReactJs

1. It is fast as it is Single-Page Application
2. It is fast as it uses Virtual DOM
3. It is reusable because it uses reusable components.
4. Huge ecosystem of libraries to choose from

• Use of Virtual DOM to improve efficiency
  React uses virtual DOM to render the view. As the name suggests, virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser. Therefore, with the use of virtual DOM, the efficiency of the app improves.
• For other frameworks like Angular when any modifications were done, then each time a new DOM is created for the same page. This repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application.

HTML DOM

JSX/TSX

JSX stands for JavaScript XML.
It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( ).

Set up

1. Install node js

2. Install create-react-app by running this command in your terminal:

C:\Users\Your Name>npm install -g create-react-app

3. Then you are able to create a React application, let’s create one called myfirstreact.

Run this command to create a React application named myfirstreact:

C:\Users\Your Name>npx create-react-app myfirstreact

(by default project will be created with .js files if you want to use typescript .tsx use this steps : https://create-react-app.dev/docs/adding-typescript/)

4. Run this command to run the React application myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

File Structure

1. package.json: Configuration file. All the dependency are recorded here.

2. node-modules: All the dependent libraries are downloaded here.

3. src: All source code files/user written files are here.

3.1.

Class component: Manage states and life cycle

React State

The state is an updatable structure that is used to contain data or information about the component.The state in a component can change over time. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components. It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

React Props

Props stand for “Properties.” They are read-only components.It gives a way to pass data from one component to other components. It is similar to function arguments.Props are immutable so we cannot modify the props from inside the component.

What is Constructor?

The constructor is a method used to initialize an object’s state in a class. It automatically called during the creation of an object in a class.When you implement the constructor for a React component, you need to call super(props) method before any other statement. If you do not call super(props) method, this.props will be undefined in the constructor and can lead to bugs.

You cannot call setState() method directly in the constructor(). If the component needs to use local state, you need directly to use ‘this.state’ to assign the initial state in the constructor. The constructor only uses this.state to assign initial state, and all other methods need to use set.state() method.

React Component Life-Cycle - javatpoint

Functional components

return()

useState

useEffects

onChange

onClick

Router

let history = useHistory();
  history.push("/home");

props

const classes = useStyles()

spread operator

Material UI

Bootstrap