Component in React

What is a Component in React?

A Component is one of the fundamental building blocks of a React application. A React application is normally divided into multiple small, reusable components, where each component represents a part of the user interface (UI).

For example, a typical web page may contain:

App
│
├── Header
├── Navigation
├── Sidebar
├── ProductList
│   ├── ProductCard
│   ├── ProductCard
│   └── ProductCard
├── Footer

Each of these can be implemented as a React component.

Instead of writing one large component containing the entire application, React encourages us to break the UI into small, independent, reusable pieces.

For example:

function Header() {
    return <header>My Website</header>;
}

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

function App() {
    return (
        <>
            <Header />
            <main>Welcome to my website</main>
            <Footer />
        </>
    );
}

Here:

• Header is a component.
• Footer is a component.
• App is also a component.
• App uses Header and Footer.

So, the simplest definition is:

A React component is a reusable piece of UI that can contain its own structure, logic, data, and behavior.

Why Do We Need Components?

Without components, a large React application could become difficult to maintain.

Imagine an e-commerce application with:

Header
Product List
Product Card
Shopping Cart
User Profile
Login
Orders
Footer

If everything were written inside one huge component, it would become difficult to:

• understand the code
• modify a particular UI section
• reuse UI
• test individual sections
• maintain business logic
• manage state
• collaborate with other developers

With components, we can separate responsibilities.

For example:

App
│
├── Header
├── ProductList
│   └── ProductCard
├── Cart
└── Footer

Each component has a specific responsibility.

Basic Structure of a React Component

A component generally contains:

Component
│
├── UI / JSX
├── Logic
├── State
├── Props
└── Event Handling

For example:

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

    function increment() {
        setCount(count + 1);
    }

    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={increment}>
                Increment
            </button>
        </div>
    );
}

This component contains:

• JSX → UI
• State → count
• Event handling → increment()
• Logic → count + 1

Important Characteristics of React Components

Reusable

A component can be used multiple times.

function ProductCard() {
    return (
        <div>
            <h3>Laptop</h3>
            <p>₹50,000</p>
        </div>
    );
}

We can use it multiple times:

function App() {
    return (
        <>
            <ProductCard />
            <ProductCard />
            <ProductCard />
        </>
    );
}

Instead of writing the same HTML three times, we reuse the component.

Independent

A component should generally have a clear responsibility.

For example:

Header       → Application header
ProductCard  → Displays product information
Cart         → Handles shopping cart
Footer       → Application footer

Composable

Components can be combined to create larger components.

For example:

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

And ProductList can contain another component:

function ProductList() {
    return (
        <>
            <ProductCard />
            <ProductCard />
            <ProductCard />
        </>
    );
}

This is called component composition.

Ways to Create React Components

There are two important ways/components styles you will encounter:

1. Function Components
2. Class Components

For modern React development, Function Components are the standard approach. Class Components are mainly important for understanding existing/legacy React applications.

Let's look at both.

1. Function Component

A Function Component is a normal JavaScript function that returns JSX.

The simplest example:

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

Then use it:

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

The important point is:

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

Welcome is a JavaScript function.

But because it returns JSX and follows React's component rules, React treats it as a component.

Function Component Using Arrow Function

A component can also be created using an arrow function.

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

This is equivalent to:

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

Both are valid.

The choice between regular functions and arrow functions is mostly a coding-style preference.

Arrow Function with Implicit Return

If the component contains only a simple JSX expression, we can use an implicit return.

const Welcome = () => <h1>Welcome to React</h1>;

This is a very compact component.

It is equivalent to:

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

Function Component with Props

A component can receive data from its parent through props.

For example:

function User(props) {
    return <h2>Hello, {props.name}</h2>;
}

Use it:

function App() {
    return (
        <>
            <User name="Syed" />
            <User name="Benazir" />
        </>
    );
}

Output:

Hello, Syed
Hello, Benazir

Here:

<User name="Syed" />

passes:

name = "Syed"

to the User component.

Function Component Using Destructuring

Instead of:

function User(props) {
    return <h2>Hello, {props.name}</h2>;
}

we can destructure the props:

function User({ name }) {
    return <h2>Hello, {name}</h2>;
}

This is very common in modern React applications.

Function Component with State

Function Components can use React Hooks such as useState.

import { useState } from "react";

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

    return (
        <div>
            <h2>Count: {count}</h2>

            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Here:

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

creates state.

• count → current state value
• setCount → function used to update the state
• 0 → initial value

This is one of the major reasons Function Components are preferred in modern React.

Function Component with Events

Components can contain event handlers.

function LoginButton() {
    function handleLogin() {
        alert("Login clicked");
    }

    return (
        <button onClick={handleLogin}>
            Login
        </button>
    );
}

The component contains:

UI
+
Logic
+
Event handling

Function Component with Conditional Rendering

Components can conditionally render UI.

function UserStatus({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h2>Welcome back!</h2>;
    }

    return <h2>Please login</h2>;
}

Usage:

<UserStatus isLoggedIn={true} />

or:

<UserStatus isLoggedIn={false} />

Function Component with Lists

Components are commonly used to render collections of data.

function ProductList() {
    const products = ["Laptop", "Mouse", "Keyboard"];

    return (
        <ul>
            {products.map(product => (
                <li key={product}>
                    {product}
                </li>
            ))}
        </ul>
    );
}

The component handles:

Data
↓
Processing
↓
UI rendering

2. Class Component

Before React introduced Hooks, Class Components were widely used for state and lifecycle management.

A Class Component looks like this:

import React, { Component } from "react";

class Welcome extends Component {
    render() {
        return <h1>Welcome to React</h1>;
    }
}

Usage:

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

The class extends:

Component

and must contain a:

render()

method that returns JSX.

Class Component with Props

Props can also be accessed inside a Class Component.

class User extends Component {
    render() {
        return <h2>Hello, {this.props.name}</h2>;
    }
}

Usage:

<User name="Syed" />

Notice the difference.

Function Component:

function User(props) {
    return <h2>Hello, {props.name}</h2>;
}

Class Component:

class User extends Component {
    render() {
        return <h2>Hello, {this.props.name}</h2>;
    }
}

In a class component, we use:

this.props

Class Component with State

A Class Component can maintain state using this.state.

class Counter extends Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0
        };
    }

    render() {
        return (
            <div>
                <h2>Count: {this.state.count}</h2>

                <button
                    onClick={() =>
                        this.setState({
                            count: this.state.count + 1
                        })
                    }
                >
                    Increment
                </button>
            </div>
        );
    }
}

State is accessed using:

this.state

and updated using:

this.setState()

Function Component vs Class Component

For React 19, you should primarily learn Function Components and Hooks.

Are Function Components Just Functions?

Technically, yes, but there is an important distinction.

A normal JavaScript function:

function add(a, b) {
    return a + b;
}

returns a value:

10

A React Function Component returns JSX:

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

React uses that returned JSX to construct the UI.

So:

JavaScript Function
        │
        └── Returns normal value

React Function Component
        │
        └── Returns JSX
                │
                └── Represents UI

Component Naming Rules

React components should normally start with an uppercase letter.

Correct:

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

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

Incorrect:

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

Why?

Because React uses capitalization to distinguish between:

<div />

and:

<Header />

Lowercase names are interpreted as HTML elements.

For example:

<header />

means an HTML/custom DOM tag.

But:

<Header />

means a React component.

Component Name vs HTML Element

Consider:

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

Then:

<Header />

means React should render the Header component.

Whereas:

<header>
    My Website
</header>

is an HTML element.

This capitalization convention is extremely important in React.

Components Can Be Nested

One component can contain another component.

function Header() {
    return <header>My Website</header>;
}

function Content() {
    return <main>Welcome</main>;
}

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

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

The relationship is:

App
│
├── Header
├── Content
└── Footer

This creates a component hierarchy.

Parent Component and Child Component

When one component renders another component, we commonly refer to them as:

Parent Component
       │
       ├── Child Component
       ├── Child Component
       └── Child Component

For example:

function Parent() {
    return <Child />;
}

function Child() {
    return <h2>Hello from Child</h2>;
}

Here:

Parent → Child

The Parent component renders the Child component.

Passing Data from Parent to Child

Data is normally passed from parent to child through props.

function Parent() {
    return <Child name="Syed" />;
}

function Child({ name }) {
    return <h2>Hello, {name}</h2>;
}

The data flow is:

Parent
   │
   │ props
   ↓
Child

This is an important React concept:

Props generally flow from parent to child.

Passing Components as Props

A component can also receive another component through props.

For example:

function Card({ children }) {
    return (
        <div className="card">
            {children}
        </div>
    );
}

Usage:

<Card>
    <h2>Product</h2>
    <p>Laptop</p>
</Card>

Here, the JSX between <Card> and </Card> is passed through the special children prop.

This is an important part of component composition.

Components Can Be Created in Separate Files

In real-world applications, components are usually separated into files.

For example:

src
│
├── components
│   ├── Header.jsx
│   ├── Footer.jsx
│   └── ProductCard.jsx
│
└── App.jsx

Header.jsx:

function Header() {
    return <header>My Website</header>;
}

export default Header;

App.jsx:

import Header from "./components/Header";

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

export default App;

This makes the application easier to organize and maintain.

Named Export and Default Export

A component can be exported using a default export:

export default Header;

and imported as:

import Header from "./Header";

It can also use a named export:

export function Header() {
    return <header>My Website</header>;
}

and imported using:

import { Header } from "./Header";

Both approaches are valid.

Component File Extensions

React components commonly use:

.jsx
.tsx

For JavaScript:

Header.jsx
ProductCard.jsx
App.jsx

For TypeScript:

Header.tsx
ProductCard.tsx
App.tsx

You can also technically write JSX in .js files depending on the tooling, but .jsx and .tsx make the intent clearer.

Types of Components Based on Responsibility

In real applications, components are also often classified based on what they do.

Presentational Component

Primarily responsible for displaying UI.

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

It focuses mainly on presentation.

Container / Logic-Oriented Component

A component may handle data retrieval, state, or business-related UI logic.

function ProductList() {
    const products = [
        { id: 1, name: "Laptop", price: 50000 },
        { id: 2, name: "Mouse", price: 1000 }
    ];

    return (
        <>
            {products.map(product => (
                <ProductCard
                    key={product.id}
                    name={product.name}
                    price={product.price}
                />
            ))}
        </>
    );
}

Here:

ProductList
    │
    │ supplies data
    ↓
ProductCard
    │
    │ displays data
    ↓
    UI

Modern React doesn't require you to rigidly follow the old "container vs presentational" classification, but the separation of logic and presentation is still useful.

Special React Components

React also has some special component concepts.

Examples include:

Fragment
Suspense
Error Boundary
Server Components

For example, Fragment allows multiple elements without adding an extra DOM element:

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

The shorthand:

<>
</>

represents a React Fragment.

React Component Rendering

When React sees:

<App />

it treats App as a component and executes the component function.

Conceptually:

<App />
   │
   ↓
React executes App()
   │
   ↓
App returns JSX
   │
   ↓
React creates/updates UI
   │
   ↓
Browser DOM

For example:

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

React processes the component and eventually displays:

Hello React

in the browser.

Component Is Not the Same as DOM Element

This distinction is important.

<div>
    Hello
</div>

is a DOM/HTML element.

But:

<Welcome />

is a React component.

The component itself can return multiple DOM elements:

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

So the component is an abstraction around UI and behavior.

Component-Based Architecture

A large React application can be structured like this:

Application
│
├── Layout
│   ├── Header
│   ├── Sidebar
│   └── Footer
│
├── Pages
│   ├── Home
│   ├── Products
│   ├── ProductDetails
│   └── Contact
│
├── Components
│   ├── Button
│   ├── Input
│   ├── Card
│   ├── Modal
│   └── ProductCard
│
└── Services
    ├── api.js
    └── auth.js

This approach allows developers to build complex applications from smaller building blocks.

Component Reusability Example

Suppose you need three buttons:

Save
Delete
Cancel

Instead of creating three completely separate implementations, create one reusable component:

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

Then:

<Button text="Save" />
<Button text="Delete" />
<Button text="Cancel" />

The same component is reused with different data.

A More Realistic Example

Consider an employee management application.

App
│
├── Header
├── Sidebar
│
├── EmployeePage
│   │
│   ├── SearchBox
│   ├── EmployeeTable
│   │   └── EmployeeRow
│   │       ├── EditButton
│   │       └── DeleteButton
│   │
│   └── EmployeeForm
│
└── Footer

Each part can be a separate React component.

For example:

function EmployeeRow({ employee }) {
    return (
        <tr>
            <td>{employee.name}</td>
            <td>{employee.email}</td>
            <td>
                <button>Edit</button>
                <button>Delete</button>
            </td>
        </tr>
    );
}

Then EmployeeTable can reuse it:

function EmployeeTable({ employees }) {
    return (
        <table>
            <tbody>
                {employees.map(employee => (
                    <EmployeeRow
                        key={employee.id}
                        employee={employee}
                    />
                ))}
            </tbody>
        </table>
    );
}

This is the real strength of React components: breaking complex UI into manageable, reusable units.

Modern React Recommendation

For a new React 19 application, the preferred approach is:

Function Components
        +
React Hooks
        +
Props
        +
State
        +
Component Composition

You should understand Class Components because you may encounter them in older applications, but you generally don't need to choose them for new development.

Summary

A React Component is a reusable building block of a React application's UI. It can contain JSX, logic, state, props, event handlers, and other components.

The main ways to create components are:

1. Function Component
   │
   ├── Regular function
   ├── Arrow function
   └── Arrow function with implicit return
       
2. Class Component
   │
   ├── extends React.Component
   ├── render()
   ├── this.props
   └── this.state

For modern React:

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

is the preferred style.

The key idea to remember is:

React applications are built by composing small reusable components into larger components, eventually forming the complete application UI.

Quick Interview Answer

If an interviewer asks "What is a Component in React?", you can answer:

A component is a reusable, independent building block of a React application's UI. It is typically a JavaScript function that returns JSX and can contain its own logic, state, event handling, and receive data through props. React applications are built by composing multiple small components into a component hierarchy.