Definition

React Components are like a functions that basically returns HTML elements. It is a building block of react application and dividing the code into components so that it can be reuse , making it easier to debug as well.

Types of Components

There are two types of Components in React

Function Based Components

Class Based Components

Class Based Components

Class-based components are a type of React component that was prevalent before the introduction of React Hooks.

They are ES6 classes that extend from React.Component and have a render method. Class components are used to define the behavior and structure of a UI element in a React application.

1import React, { Component } from "react";
2class MyComponent extends Component {
3	render() {
4		return (
5			<div>
6				<p>This is a class-based component.</p>
7			</div>
8		);
9	}
10}

Function Based Components

With the introduction of React Hooks, functional components can now manage state and side effects, making them more powerful and capable of handling complex logic previously associated with class components. Hooks allow you to use state and other React features in functional components without the need for classes.

1import React from "react";
2function MyComponent() {
3	return (
4		<div>
5			<p>This is a function-based component.</p>
6		</div>
7	);
8}

Exporting a Component

In order to reuse components in different pages , we have to make them separate and export it.Thus , allowing us to import them from any file and use them.

1import React from "react";
2function MyComponent() {
3	return (
4		<div>
5			<p>This is a function-based component.</p>
6		</div>
7	);
8}
9export default MyComponent;