What is React? How to it is work? Vartual DOM, Props & state, Component, JSX, Component Life Cycle..

What is React Js:

React is an open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Facebook and a community of individual developers and companies. React can be used for the development of single-page or mobile applications. React is easy to learn. it has to taste and debugging friendliness. It increases the application’s performance. It has a huge community. it is a reusable component-based library. a component can use many different parts on a website. React has some disadvantages like, It is not SEO-friendly. It has poor documentation.
Basically react is a component-based library. A react application makes by using multi-component. the component is part of a react application. The component renders JSX into vanilla javascript before showing anything in react application. when react application done any action/events, The whole react application is not updated. Behind the scene, React create an updated virtual dom then it compared with the real dom, which part is changed. After comparing, Only the change part will update in the real dom.

JSX

JSX is an extension of the javascript language syntax. It looks like HTML but not it is HTML. it provides a way to structure component rendering using syntax familiar to many developers. In reacting app inside the component we write JSX. and it is converted to a normal js object. we can write javascript in jsx with {} curli bracket.
Example:

const DemoFunciton = () => {
    const Name = "Amirul Islam Shanto";
    return (
        // jsx start here
        <div>
            <h1> My Name Is {Name} .</h1>
            <h5> I Am A MERN Stack Developer.</h5>
        </div>
    );
};

Virtual Dom

Dom means Document Object Model. Virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM By libraries such as react-dom. React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. virtual dom is As like blueprint of a machine changes made to the blueprint doesn't reflect on the machine itself. The real DOM updates slower and virtual DOM updates faster. The real DOM can directly update HTML and virtual DOM cannot directly update HTML.
When any action happens on the webpage. The Webpage creates a virtual dom and firstly updates the change in the virtual dom. And compared the virtual dom with the real dom by an algorithm named Diff algorithm. After comparing update the real doms specific part which is changed in the virtual dom.

Component Life Cycle:

• getInitialstate(): executed before the creation of the component.

• componentDidMount(): executed when the component is rendered on the DOM.

• shouldComponentUpdate(): executed when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions.

• componentDidUpdate():it executed after rendering takes place.

• componentWillUnmount(): it is executed before a component is destroyed and unmounted permanently.

Component

The component is the block of any react application. A single application creates by multiple components. Basically, a component is part of the user interface. it splits the interface into independent and reusable parts that can be processed separately.
There are two types of components in React:
Functional component.
Class component.
Example:

//Functional component
import React from 'react';
const DemoComponent = () => {
    return (
        <div>
            <h1>This is Functional component..</h1>
        </div>
    );
};
export default DemoComponent;
//Class Component
import React, { Component } from 'react';
class DemoComponent extends Component {
    render() {
        return (
            <div>
                <h1>This is class component..</h1>
            </div>
        );
    }
}
export default DemoComponent;

Props and State

The state is an updatable structure that is used to contain data about the component and can change over time. And Props are read-only components. It is an object which stores the value of attributes of a tag. Props are immutable But the state is mutable. Props allow passing data a component to component. And state allows holding data about the component. The stateless component has props but not a state. Props make components reusable but the state cannot make components reusable.