A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.

In react, a component represents a part of the user interface.

Example: The following application has 5 components i.e. Header, Sidenav, Main Content, Footer, and one component to contain every other component.

The Containing component is the main component in your application and usually name as App component

Each of the four nested components describes only a part of the user interface. However, all components come together to make up the entire application. Components are also reusable. The same component can use different properties to display different information. The component can contain another component. For eg - The app component contains the other components.

Components in React basically return a piece of JSX code that tells what should be rendered on the screen. In React we mainly have two types of components:

Types Of Components

In React we mainly have two types of components:

Functional Components:

Functional components are simply javascript functions. We can create a functional component in React by writing a javascript function. These functions may or may not receive data as parameters, we will discuss this later in the tutorial. Below example shows a valid functional component in React:

Class Components:

The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to other class components. We can use javascript ES6 classes to create class-based components in React.