React component

A React component is a reusable piece of UI. Modern React applications mainly use function components. A function component is a JavaScript function that returns JSX.

1 Basic Functional Component

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

The component can then be used like an HTML element:

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

2 Why Components?

Components help divide a large application into smaller responsibilities.

E-Commerce App
  ├── Header
  ├── SearchBar
  ├── ProductList
  │     ├── ProductCard
  │     ├── ProductCard
  │     └── ProductCard
  ├── Cart
  └── Footer

Each component can focus on one part of the UI.

3 Component Tree

flowchart TD
A[App] --> B[Header]
A --> C[ProductPage]
C --> D[SearchBox]
C --> E[ProductList]
E --> F[ProductCard]
E --> G[ProductCard]
A --> H[Footer]

4 Component Naming

React components should normally use PascalCase.

function ProductCard() {
    return <div>Product</div>;
}

Use it as:

<ProductCard />

5 Components Can Contain Logic

A component is not only HTML-like markup. It can contain JavaScript variables, calculations, event handlers, and Hooks.

function ProductCard() {
    const price = 1000;
    const quantity = 2;
    const total = price * quantity;

    return (
        <div>
            <p>Price: ₹{price}</p>
            <p>Quantity: {quantity}</p>
            <p>Total: ₹{total}</p>
        </div>
    );
}

6 Components Should Be Reusable

A good component can be used with different data.

function ProductCard({ name, price }) {
    return (
        <article>
            <h2>{name}</h2>
            <p>₹{price}</p>
        </article>
    );
}

function ProductList() {
    return (
        <div>
            <ProductCard name="Laptop" price={75000} />
            <ProductCard name="Phone" price={40000} />
        </div>
    );
}

7 Parent and Child Components

When one component renders another component, the first component is the parent and the rendered component is the child.

flowchart TD
A[App Parent] --> B[Header Child]
A --> C[ProductList Child]
C --> D[ProductCard Child]

8 Complete Example — Employee Application

function Header() {
    return (
        <header>
            <h1>Employee Management</h1>
        </header>
    );
}

function EmployeeCard({ name, role }) {
    return (
        <article>
            <h2>{name}</h2>
            <p>{role}</p>
        </article>
    );
}

function EmployeeList() {
    return (
        <section>
            <EmployeeCard
                name="Rahul"
                role="Software Engineer"
            />

            <EmployeeCard
                name="Priya"
                role="Project Manager"
            />
        </section>
    );
}

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

9 Component Composition

Instead of making one component responsible for everything, smaller components can be combined to create a complete page.

flowchart TD
A[App] --> B[Header]
A --> C[Main]
C --> D[Search]
C --> E[List]
E --> F[Card]
A --> G[Footer]

10 Component Responsibilities

A component should ideally have a clear responsibility. A very large component containing API logic, complex state, validation, many event handlers, and a huge JSX tree can become difficult to maintain.

Breaking it into smaller components can improve readability and reuse.

11 Function Component vs Class Component

12 Common Mistakes

• Creating one huge component for an entire application page.
• Using unclear component names.
• Putting unrelated responsibilities into one component.
• Duplicating the same UI instead of creating a reusable component.
• Forgetting that component names should normally start with an uppercase letter.

13 Interview Questions

1. What is a React component?
2. What is a functional component?
3. Why do React component names start with uppercase letters?
4. What is a component tree?
5. What is component composition?
6. Why should large components be broken into smaller components?
7. What is the difference between function and class components?

14 Key Takeaways

• Components are reusable UI building blocks.
• Modern React mainly uses function components.
• Components can contain JavaScript logic and JSX.
• Components can render other components.
• Good component design gives each component a clear responsibility.

Conclusion

Components are the foundation of React architecture. A large React application is essentially a tree of small components working together. Once you understand how to create and compose functional components, props and state become natural next steps.