Components in React

One of the biggest reasons why React is so popular is its component-based approach. Instead of building an entire webpage as one large block of code, React allows you to divide it into small, reusable pieces called components.

Think of components as building blocks. Just like a house is made up of bricks, doors, windows, and a roof, a React application is built using components such as headers, navigation bars, buttons, product cards, forms, and footers.

By using components, developers can write cleaner code, reuse it in different places, and make applications easier to manage.

What is a Component?

A component is a reusable piece of code that returns JSX and displays a part of the user interface.

Each component has a specific responsibility. Instead of creating the whole webpage in one file, you create multiple small components and combine them to build the complete application.

Real-World Example

Imagine you are building an online shopping website. The homepage may contain:

• Header
• Navigation Menu
• Search Bar
• Product Card
• Shopping Cart
• Footer

Each of these sections can be created as a separate React component. This makes your project organized and much easier to update.

Why Do We Use Components?

Without components, developers would have to write the same code repeatedly.

For example, if an online store displays 50 products, writing the HTML for every product separately would take a lot of time. Instead, React allows you to create one Product component and reuse it for every product.

Benefits of Components

• Reusable code
• Easier to maintain
• Better organization
• Faster development
• Cleaner code structure
• Easier debugging
• Simple teamwork on large projects

Creating Your First Component

A React component is simply a JavaScript function that returns JSX.

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

export default Welcome;

Explanation

• function Welcome() creates a component.
• The component returns an h1 element.
• export default allows other files to use this component.

Using a Component

After creating a component, you can use it inside another component.

function Welcome() {
  return <h2>Welcome to Our Website</h2>;
}

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

export default App;

Output

Welcome to Our Website

Notice that the component is used like an HTML tag. This is one of the most powerful features of React.

Reusing Components

A component can be used multiple times without rewriting the code.

function Welcome() {
  return <h2>Welcome!</h2>;
}

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
}

Output

Welcome!

Welcome!

Welcome!

React creates three headings using the same component. This saves time and reduces duplicate code.

Naming Components

React components should follow these rules:

• Start with a capital letter.
• Use meaningful names.
• Keep one component focused on one task.

Good Examples

function Header() {}
function Footer() {}
function ProductCard() {}
function LoginForm() {}

Poor Examples

function test() {}
function abc() {}
function x() {}

Meaningful names make your project easier to understand.

Components Inside Components

React components can contain other components.

function Header() {
  return <h1>My Store</h1>;
}

function Footer() {
  return <p>Copyright 2026</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Welcome to our online store.</p>
      <Footer />
    </div>
  );
}

Here, the App component combines smaller components to create a complete webpage. This approach keeps the code clean and modular.

Organizing Components

As projects grow, components are usually stored in separate files.

src/
|
├── components/
|   ├── Header.jsx
|   ├── Footer.jsx
|   ├── ProductCard.jsx
|   └── Button.jsx
|
├── App.jsx
└── main.jsx

Keeping components in separate files makes the project easier to manage and allows multiple developers to work on different parts of the application at the same time.

Functional Components

Modern React mainly uses functional components. A functional component is a JavaScript function that returns JSX.

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

Functional components are simple, easy to read, and work well with modern React features like Hooks.

Real-World Example

Imagine you are creating a food delivery application. Instead of writing everything in one file, you can create separate components:

• Header
• RestaurantCard
• Menu
• Cart
• OrderSummary
• Footer

Whenever you need a restaurant card, you simply use the same component again. If you later want to change the design of every restaurant card, you only need to update one component instead of editing many different places.

This is why components make development much faster and more efficient.

Best Practices for Components

Here are some simple tips when creating components:

• Keep components small and focused.
• Give components meaningful names.
• Reuse components whenever possible.
• Avoid writing duplicate code.
• Store components in separate files for larger projects.
• Write clean and readable JSX.

Following these practices will make your React applications easier to maintain as they grow.

Summary

Components are the foundation of every React application. They allow developers to divide a webpage into small, reusable, and independent parts. This makes code easier to read, update, and maintain.

Instead of writing the same code repeatedly, you can create a component once and reuse it wherever needed. As your projects become larger, using components helps keep everything organized and manageable.

Key Takeaways

• A component is a reusable piece of a React application's user interface.
• Components help divide large applications into smaller, manageable parts.
• React components are usually created as JavaScript functions.
• Component names should always start with a capital letter.
• Components can be reused multiple times throughout an application.
• Components can contain other components to build complete webpages.
• Organizing components into separate files improves project structure.
• Components make React applications easier to develop, maintain, and scale.