React Components

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 lets you 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.

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 lets you 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.

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.