Earlier, the developers write more than thousands of lines of code for developing a single page application. These applications follow the traditional DOM structure, and making changes in them was a very challenging task. If any mistake was found, they manually search entire application and update accordingly. To overcome this issue, the component-based approach was introduced. In this approach, the entire application is divided into a small logical group of code which is known as components.
A Component is considered as the core building blocks of any React application. They are making the task of building UIs much easier. A react app contains many components. Each component exists in the same space, but they work independently from one another and merge all in a parent component which will be the final UI of your application.
Every React component have their own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.
In ReactJS, we have mainly two types of components. They are
The functional component is also known as a stateless component because they do not hold or manage state. It can be explained in the below example.
Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function. A valid class components can be shown in the below example.
The class component is also known as a stateful component because they can hold or manage local state. It can be explained in the below example.