React Components

Introduction

Components are the building blocks of a React application. Instead of creating the entire user interface in a single file, React allows developers to divide the UI into small reusable pieces called components.

Using components makes applications:

• Easier to manage
• Easier to reuse
• Easier to maintain
• More scalable

Almost every React application is built using multiple components such as:

• Header
• Navbar
• Footer
• Sidebar
• Product Card
• Login Form

In this tutorial, you will learn what React components are, why they are used, types of components, syntax, examples, real-life applications, common mistakes, interview questions, and best practices.

What are React Components?

React Components are reusable pieces of code used to create parts of a user interface.

A component can contain:

• HTML structure
• CSS styling
• JavaScript logic

Each component works independently and can be reused multiple times in an application.

Why React Components are Used

React components are used because they:

• Reduce duplicate code
• Improve code organization
• Make applications reusable
• Simplify UI management
• Improve scalability

Without components, managing large applications becomes difficult.

Real-Life Example of Components

Think about an e-commerce website.

The website contains:

• Header
• Search Bar
• Product Card
• Cart
• Footer

Instead of writing the same code repeatedly, React creates reusable components for each section.

For example:

• One Product Card component can display hundreds of products dynamically

Features of React Components

1. Reusable

Components can be reused multiple times.

2. Independent

Each component works separately.

3. Maintainable

Updating one component does not affect the entire application.

4. Modular

Applications become organized into smaller files.

5. Dynamic

Components can display dynamic data using props and state.

Types of React Components

React mainly has two types of components:

1. Functional Components
2. Class Components

1. Functional Components

Functional components are JavaScript functions that return JSX.

These are the most commonly used components in modern React.

Syntax of Functional Component

function Welcome() {
 return <h1>Welcome to React</h1>;
}

Example

function App() {
 return (
   <div>
     <h1>Hello React</h1>
   </div>
 );
}
export default App;

Output

Advantages of Functional Components

• Simple syntax
• Easier to read
• Better performance
• Supports Hooks
• Less boilerplate code

2. Class Components

Class components use ES6 classes.

Before Hooks were introduced, class components were mainly used for state management and lifecycle methods.

Syntax of Class Component

import React, { Component } from "react";
class Welcome extends Component {
 render() {
   return <h1>Welcome User</h1>;
 }
}
export default Welcome;

Output

Difference Between Functional and Class Components

How Components Work in React?

React applications are built by combining multiple components together.

Example structure:

App
├── Header
├── Sidebar
├── ProductList
└── Footer

Each component handles a specific part of the UI.

Creating a React Component

Step 1: Create Component File

Example:

Header.jsx

Step 2: Write Component Code

function Header() {
 return <h1>Website Header</h1>;
}
export default Header;

Step 3: Import Component

import Header from "./Header";
function App() {
 return (
   <div>
     <Header />
   </div>
 );
}

Output

Reusable Components in React

One component can be used multiple times.

Example

function Button() {
 return <button>Click Me</button>;
}
function App() {
 return (
   <div>
     <Button />
     <Button />
     <Button />
   </div>
 );
}

Output

Components with Props

Props allow passing data from a parent to a child component.

Example

function User(props) {
 return <h1>Hello {props.name}</h1>;
}
function App() {
 return <User name="Gaurav" />;
}

Output

Components with State

State allows components to store and manage dynamic data.

Example

import { useState } from "react";
function Counter() {
 const [count, setCount] = useState(0);
 return (
   <button onClick={() => setCount(count + 1)}>
     {count}
   </button>
 );
}

Output

Nested Components

Components can contain other components.

Example

function Header() {
 return <h1>Header</h1>;
}
function Footer() {
 return <h1>Footer</h1>;
}
function App() {
 return (
   <div>
     <Header />
     <Footer />
   </div>
 );
}

Real-Life Example of React Components

Suppose you are building a blogging website.

Possible components:

• Navbar Component
• Blog Card Component
• Author Component
• Comment Component
• Footer Component

Each component can be reused across multiple pages.

Advantages of React Components

React Components Naming Rules

React component names:

• Must start with uppercase letters
• Should use meaningful names

Correct:

function Header() {}

Wrong:

function header() {}

Common Mistakes in React Components

1. Using Lowercase Component Names

Wrong:

function button() {
 return <button>Click</button>;
}

Correct:

function Button() {
 return Click;
}

2. Forgetting to Export Component

Wrong:

function Header() {}

Correct:

export default Header;

3. Returning Multiple Elements Without Parent

Wrong:

return (
 <h1>Hello</h1>
 <p>World</p>
);

Correct:

return (
 <div>
   <h1>Hello</h1>
   <p>World</p>
 </div>
);

4. Directly Modifying State

Wrong:

count = count + 1;

Correct:

setCount(count + 1);

5. Creating Too Many Unnecessary Components

Too many small components can make projects harder to manage.

React Components – Interview Questions

Reactjs React Component – Objective Questions (MCQs)

Conclusion

React Components are the foundation of every React application. They allow developers to divide the user interface into reusable, independent, and maintainable pieces.

Using components makes applications more organized, scalable, and easier to develop. Whether you are building a small project or a large enterprise application, components help manage the UI efficiently.

Modern React development mainly uses functional components because they are simpler and support Hooks. Understanding components properly is essential for becoming a successful React developer.

Continue Learning React