React Components

React is a popular JavaScript library used for building user interfaces, especially for single-page applications. One of its core concepts is components.

But what exactly is a component in React? Let’s break it down.

What is a React Component?

A React component is a reusable piece of code that represents a part of the user interface. Think of it like a LEGO block — you can build a big structure by combining small blocks.

In React, your web page is made up of multiple components — like a header, footer, sidebar, form, product card, etc. Each component has its own structure (HTML), style (CSS), and behavior (JavaScript logic).

Why Use Components?

• Reusability: You write code once and use it many times.
• Modularity: Break big UI into smaller, manageable parts.
• Easy to maintain: Each component is self-contained.
• Readable code: Organized and clean structure.

Types of React Components

There are mainly two types of components in React:

1. Functional Components (most commonly used)

They are just JavaScript functions that return JSX (HTML-like code). Example:

  function Welcome() {
  return <h1>Hello, welcome to our site!</h1>;
}

Or using modern arrow functions:

const Welcome = () => <h1>Hello, welcome to our site!</h1>;

2. Class Components (older way, less used now)

They use ES6 classes and can hold state and lifecycle methods:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, welcome to our site!</h1>;
  }
}

Today, most developers prefer functional components with Hooks (like useState, useEffect) for state management.

Component Reusability Example

Let’s say you want to display 3 product cards on your website. Instead of writing HTML 3 times, you can create one ProductCard component and reuse it:

function ProductCard(props) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>Price: ₹{props.price}</p>
    </div>
  );
}

Now use it like this:

<ProductCard name="Rose Bouquet" price="250" />
<ProductCard name="Tulip Basket" price="350" />
<ProductCard name="Orchid Pot" price="450" />

Props in Components

Props (short for properties) are how you pass data into a component. It’s like sending ingredients to a recipe.

In the above example, name and price are props.

<ProductCard name="Rose" price="250" />

Inside the component, you access them like props.name and props.price.

State in Components

State is data that a component can change over time — like a counter, form input, or toggle.

Example using useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </>
  );
}

This Counter component tracks how many times the button was clicked.

Component Hierarchy

Components can include other components. For example:

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

This is called component hierarchy or nesting.

Best Practices for Components

• Keep components small and focused.
• Use meaningful names like ProductCard, UserForm, NavBar.
• Use props to make components flexible.
• Keep layout and logic separated when possible.

Recap: Key Terms

Final Thoughts

React components are the building blocks of any React application. Learning how to create, use, and organize components will help you build fast, scalable, and beautiful web interfaces.

If you think of a website as a garden, components are the flowers — each unique, reusable, and vital to making the whole garden (app) beautiful.