React Component

A Component is a structure block of a React. It makes building UIs simpler. Every block exists in a similar plane but works autonomously from each other and makes a parent component, that results in the UI of your application. Each React component have their structure, techniques which are reusable according to the need.

For better understanding, consider the whole UI as a tree. Here, the root is the beginning component, and every one of different pieces becomes branches, which are additionally isolated into sub-branches.

In React, there are mainly 2 types of components:

• Functional Component
• Class Component

Functional Component

In React, an approach to composing components that just contain a rendering strategy and don't have their state. They are just JavaScript functions. These functions may or may not receive data as parameters. We can make a function that takes props(properties) as input and returns what ought to be rendered. They are also called stateless components due to not holding or managing the state. E.g.

function demo)
{

    <h1> Tutorial Link </h1>;

}

Class Component

Class components are more intricate. It expects you to stretch out from React. Component and make a render function that restores a React component. You can pass input from one class to a different class Component. You can make a class by characterizing a class that expands Component and has a render function. We use ES6 classes to create a class-based component to react. They are also called stateful components due to holding and managing the local state. E.g.

class Demo extends React.Component
{
    render(){
          return <h1>Tutorial Link</h1>;
    }
}

Rendering Components

React is used for rendering user-defined components. To render, we can instate a component with a user-defined component and pass this component as the main parameter to ReactDOM.render() or pass it as first argument to the ReactDOM.render() technique.

const elementName = <ComponentName />;

where the user-defined component is ComponentName.

Composing Components

In React, we can merge all the components to make a parent component as we studied the above topic. This is called composing components. We will now create single components and merge them to create a parent component and then render this component.

Decomposing Components

Decomposing Components implies separating the parts into small components. We have enlightened the thing regarding forming little components to assemble a parent component from the very beginning when we began examining components over and over.