React

React’s core is made up of components. Components allow the user to divide the user interface into different reusable sections and think independently of each. A React component serves as the foundation for the creation of React applications. Each component has its APIs and functions. React has two sorts of components: 

• Functional Components
• Class Components

Let’s take a look at these components, as well as others that React employs.

Functional Components

Javascript functions are used to create functional components. We can create a functional component in React by writing a javascript function. These functions may or may not be passed parameters. The simplest approach to construct a React component is to define a JavaScript function:

function Greeting(props) {
  return <h1>Hi, {props.name}</h1>;
}

Class Components

They are slightly more complicated than functional components. The functional components in your program are unaware of the other components, whereas a class component can collaborate. Data can be passed from one class component to another. To develop class-based components in React, we can use JavaScript ES6 classes. The following React example displays a valid class-based component:

class Democomponent extends React.Component
{
    render(){
          return <h1>Greeting Message!</h1>;
    }
}

The components in the above two examples are equivalent, and we have also explained the fundamental difference between a functional component and a class component.

Functional Hooks

Before React 16.8, developers could only handle state and other React capabilities using a class component. However, in version 16.8, React included a new pattern called Hooks. We can use state, and other React features in a component with React Hooks. React Hooks are basic JavaScript functions that separate reusable UI components from functional ones. Hooks can be declarative and manage side effects.

React has several built-in hooks, but we can also develop custom hooks for specific use cases, such as data fetching, logging to disc, timers, etc. The following example demonstrates a legitimate functional component in React:

const Democomponent=()=>
{
    return

Greeting Message!

;
}

Virtual Document Object Model (DOM)

The Virtual DOM is a lighter version of the React DOM. Real DOM manipulations take far longer than virtual DOM manipulations. When an object is updated in an object state, the virtual DOM updates it in its actual DOM instead. The DOM (Document Object Model) is an XML document in which nodes represent objects. A VDOM update occurs when objects in a React application alter their state. Instead of updating the entire collection, the program compares its present state and only updates the object in the real database.

JSX

Consider this variable declaration:

const element = 

ReactJS is awesome!</h1>;

This weird tag syntax above is neither a string nor HTML. It’s called JSX, and it’s a JavaScript syntax extension. We advocate utilizing it alongside React to describe how the user interface should look. JSX may look like a template language, but it has the full power of JavaScript.

Lifecycle of Components

React components have a lifecycle that you can observe and change during its three major phases. Mounting, Updating, and Unmounting are the three stages.

Mounting is the process of inserting elements into the DOM. When a component is upgraded, the lifecycle continues. When the state or properties of a React component change, the component is updated. The final stage of the lifecycle occurs when a component is removed from the DOM, also known as unmounting in React. React calls only one built-in method when a component is unmounted:componentWillUnmount().