React Components

A component is one of the most important concepts in React.

React applications are built by combining small, independent pieces of UI called components. Each component is responsible for describing a particular part of the interface, such as a navigation bar, button, product card, login form, sidebar, user profile, or even an entire page.

Instead of creating one huge piece of code for an entire application, React allows you to divide the interface into smaller and more manageable components.

For example, imagine an online shopping website.

A product page might contain:

Product Page
│
├── Header
├── Navigation
├── Product Image
├── Product Information
├── Price
├── Add to Cart Button
├── Reviews
└── Footer

Each of these sections can be represented by a React component.

For example:

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

function ProductImage() {
  return <img src="/product.jpg" alt="Product" />;
}

function ProductInfo() {
  return (
    <section>
      <h2>Wireless Headphones</h2>
      <p>₹2,499</p>
    </section>
  );
}

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

The App component combines the smaller components to create the complete interface.

This idea of breaking a user interface into smaller pieces is at the heart of React.

What Exactly Is a Component?

A React component is a reusable piece of UI logic and structure.

A component usually contains:

• JSX that describes the UI
• JavaScript logic
• Data
• Event handling
• State
• Props
• Other components

A very simple component looks like this:

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

Here, Welcome is a React component.

It describes what React should render:

<h1>Welcome to React</h1>

The component can then be used inside another component:

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

React renders the Welcome component as part of the application’s UI.

Components Are the Building Blocks of React

You can think of React components like building blocks.

Imagine building a house.

You wouldn’t normally construct the entire house as one giant piece. Instead, you have different parts:

House
│
├── Door
├── Windows
├── Kitchen
├── Bedroom
├── Bathroom
└── Roof

Similarly, a React application can be divided into:

Application
│
├── Header
├── Navigation
├── Sidebar
├── Main Content
├── Cards
├── Forms
└── Footer

Each part can become a component.

For example:

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

function Sidebar() {
  return <aside>Sidebar</aside>;
}

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

Then combine them:

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

This makes the application easier to understand and maintain.

A Component Can Be Very Small

A component doesn’t need to represent a large section of a page.

Even a button can be a component:

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

A logo can be a component:

function Logo() {
  return <img src="/logo.png" alt="Website Logo" />;
}

A heading can technically be a component:

function Title() {
  return <h1>React Course</h1>;
}

However, not everything needs to become a component.

You should create components when doing so improves reuse, organization, readability, or separation of responsibilities.

Components Can Represent Complete Sections

Components can also represent much larger parts of an application.

For example:

function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Welcome to your dashboard.</p>
    </main>
  );
}

A component can even represent an entire page:

function HomePage() {
  return (
    <main>
      <h1>Home</h1>
      <p>Welcome to our website.</p>
    </main>
  );
}

Therefore, there is no fixed size for a component.

A component can represent:

Small UI
   ↓
Button

Medium UI
   ↓
Product Card

Large UI
   ↓
Dashboard

Entire UI
   ↓
Application

The right size depends on the application’s design.

Components Return JSX

A component normally returns JSX describing the UI it should render.

function Greeting() {
  return <h1>Hello!</h1>;
}

The return statement tells the component what UI it should produce.

You can return multiple elements by wrapping them in a parent element:

function Profile() {
  return (
    <div>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </div>
  );
}

Or use a Fragment:

function Profile() {
  return (
    <>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </>
  );
}

The component itself doesn’t directly manipulate the browser DOM. React uses the component’s description of the UI to determine what should appear in the DOM.

Components Can Contain JavaScript

A component isn’t just HTML-like JSX.

Because a component is written using JavaScript, it can contain variables and logic.

function UserProfile() {
  const name = "Arafat";
  const age = 22;

  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

Here the component contains:

const name = "Arafat";
const age = 22;

and uses those values inside JSX.

This is what makes React components dynamic.

Components Can Receive Data

Components can receive data from other components using props.

For example:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Another component can provide the value:

function App() {
  return <Greeting name="Arafat" />;
}

The Greeting component can now display:

Hello, Arafat!

The same component can be reused with different data:

<Greeting name="Arafat" />
<Greeting name="Rahul" />
<Greeting name="Sara" />

This is one of the major reasons components are so powerful.

You create the structure once and provide different data when using it.

Components Can Manage State

Components can also have their own state.

For example:

import { useState } from "react";

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

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

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

The Counter component manages:

count

When the user clicks the button, the state changes.

React then updates the relevant part of the UI.

This means components can contain both structure and behavior.

Components Can Respond to User Actions

Components can handle events such as:

• Clicks
• Typing
• Form submission
• Mouse movement
• Selection changes
• Keyboard input

For example:

function Button() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

The component contains both the button’s UI and the behavior that should happen when the button is clicked.

Components Can Use Other Components

Components can be combined together.

For example:

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

function Content() {
  return <main>Welcome to my website.</main>;
}

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

Another component can use all three:

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

This is called component composition.

Larger interfaces are created by combining smaller components.

Components Are Different From HTML Elements

A React component may look similar to an HTML element, but they are not the same thing.

HTML element:

<button>Click Me</button>

React component:

<Button />

The capitalization is important.

React recognizes:

<Button />

as a component.

Whereas:

<button />

is treated as a built-in HTML element.

For example:

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

Now:

<Button />

uses your custom component, while:

<button>
  Click Me
</button>

uses the browser’s built-in button element.

Why Component Names Start With Capital Letters

React component names should begin with an uppercase letter.

Correct:

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

Used as:

<Header />

Incorrect:

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

When JSX sees:

<header />

it interprets it as an HTML element rather than your custom component.

The capitalization convention tells React that the name represents a component.

Components Make Code Reusable

Suppose a website has ten product cards.

Without reusable components, you might repeat the same structure many times.

Instead, create one component:

function ProductCard() {
  return (
    <article>
      <h2>Product</h2>
      <p>₹999</p>
      <button>Buy Now</button>
    </article>
  );
}

Then use it multiple times:

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

Later, props can make each card display different information:

<ProductCard
  name="Laptop"
  price={59999}
/>

<ProductCard
  name="Headphones"
  price={2499}
/>

The component structure remains reusable.

Components Improve Maintainability

Imagine an application with thousands of lines of UI code.

If everything exists inside one component, it becomes difficult to:

• Find specific code
• Fix bugs
• Understand the application
• Reuse UI
• Make changes
• Test individual parts

Breaking the interface into components creates smaller units.

For example:

App
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── Hero
│   ├── ProductList
│   │   └── ProductCard
│   └── Newsletter
│
└── Footer

Each component has a clearer purpose.

Components Can Be Reused Across Pages

Suppose your website has:

Home
Products
About
Contact

The same Header and Footer might appear on every page.

Instead of recreating them separately:

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

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

you can reuse them:

function HomePage() {
  return (
    <>
      <Header />
      <main>Home</main>
      <Footer />
    </>
  );
}

function ProductsPage() {
  return (
    <>
      <Header />
      <main>Products</main>
      <Footer />
    </>
  );
}

This keeps common UI consistent.

Components Can Be Reused With Different Data

A reusable component doesn’t have to display the same content every time.

Consider:

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

Now:

<UserCard
  name="Arafat"
  role="Frontend Developer"
/>

<UserCard
  name="Rahul"
  role="Backend Developer"
/>

<UserCard
  name="Sara"
  role="UI Designer"
/>

The component structure stays the same while the data changes.

This is a fundamental React pattern:

Reusable Component
        +
Different Data
        ↓
Different UI

Components Can Be Dynamic

Components don’t have to produce the same UI every time.

For example:

function Status({ online }) {
  return (
    <p>
      {online ? "Online" : "Offline"}
    </p>
  );
}

Now:

<Status online={true} />

produces:

Online

while:

<Status online={false} />

produces:

Offline

The component’s output changes according to its data.

Components Help Separate Responsibilities

A good React application usually divides responsibilities between components.

For example:

Header
→ Handles website navigation

ProductCard
→ Displays product information

SearchBox
→ Handles search input

Cart
→ Displays cart information

CheckoutForm
→ Handles checkout fields

Footer
→ Displays footer information

Instead of one component handling everything, each component can have a focused responsibility.

This makes the application easier to understand.

Components Can Be Stored in Separate Files

As an application grows, components are commonly separated into individual files.

For example:

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

Header.jsx:

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

export default Header;

App.jsx:

import Header from "./components/Header";

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

export default App;

Separating components into files becomes increasingly useful as applications grow.

Components Don’t Have to Be Huge

A common beginner mistake is thinking that every component should represent an entire page.

For example, this can become difficult to maintain:

function Dashboard() {
  // Hundreds of lines of JSX and logic...
}

Instead, a dashboard could be divided into:

Dashboard
│
├── DashboardHeader
├── Statistics
│   ├── StatCard
│   ├── StatCard
│   └── StatCard
├── RecentOrders
└── ActivityList

Each component can focus on a specific part of the interface.

However, don’t split components unnecessarily. A component should provide a meaningful boundary rather than simply being created because a piece of JSX exists.

A Component Is More Than Just UI

It is tempting to think:

“A component is just a piece of HTML.”

That is not quite accurate.

A React component can combine:

UI
+
JavaScript
+
Data
+
Props
+
State
+
Events
+
Other Components

For example:

function ProductCard({ product }) {
  const isAvailable = product.stock > 0;

  function handleBuy() {
    console.log("Product added to cart");
  }

  return (
    <article>
      <h2>{product.name}</h2>

      <p>₹{product.price}</p>

      {isAvailable && (
        <button onClick={handleBuy}>
          Buy Now
        </button>
      )}
    </article>
  );
}

This component contains:

• Props
• A calculated value
• An event handler
• Conditional rendering
• JSX
• Dynamic data

That is why components are better understood as independent UI units with their own structure and behavior.

Component Thinking

When building a React application, it helps to think about the interface as a collection of components.

Instead of asking:

“How do I write this entire page?”

think:

“What parts of this page should be independent UI components?”

For a blog page, you might identify:

Blog Page
│
├── Header
├── Navigation
├── BlogHero
├── ArticleList
│   └── ArticleCard
├── Sidebar
│   ├── Categories
│   └── PopularPosts
└── Footer

This way of thinking is called component-based development.

It is one of the key ideas that separates React development from writing a single large HTML document.

When Should You Create a Component?

Create a component when a piece of UI:

Is Reused

If the same UI appears multiple times, a component is often useful.

<ProductCard />
<ProductCard />
<ProductCard />

Has Its Own Responsibility

For example:

<SearchBox />

can handle the search interface independently.

Has Its Own State

For example:

<Counter />

can manage its own counter state.

Has Complex Logic

If a section of a page contains significant logic, separating it into a component can make the parent easier to understand.

Makes the Parent Easier to Read

Instead of:

function App() {
  // huge amount of JSX
}

you might have:

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

The structure becomes much easier to understand.

When Should You Not Create a Component?

Not every element needs its own component.

For example, this doesn’t necessarily need a component:

<p>Welcome to our website.</p>

Creating:

function WelcomeText() {
  return <p>Welcome to our website.</p>;
}

is possible, but it may add unnecessary complexity if the element is only used once and has no meaningful independent behavior.

Avoid creating hundreds of tiny components simply for the sake of splitting code.

The goal is useful separation, not maximum fragmentation.

A Real-World Example

Consider a learning website.

The page might look like:

React Course
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── CourseHero
│   ├── CourseTitle
│   ├── CourseDescription
│   └── EnrollButton
│
├── CourseContent
│   ├── LessonCard
│   ├── LessonCard
│   └── LessonCard
│
├── Instructor
│   └── InstructorCard
│
└── Footer

The main component might look like:

function CoursePage() {
  return (
    <>
      <Header />
      <CourseHero />
      <CourseContent />
      <Instructor />
      <Footer />
    </>
  );
}

Notice how the parent component becomes easy to understand.

You can immediately see the page structure without reading every implementation detail.

That is one of the major benefits of component-based development.

Components and the React Rendering Process

When React renders an application, it starts from a component and follows the components used inside it.

For example:

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

App uses Header.

If Header contains:

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

then Header uses Logo and Navigation.

React can therefore build the UI by following this structure:

App
 ↓
Header
 ├── Logo
 └── Navigation

As the application becomes larger, this structure forms a component tree, which will be covered in detail later.

Components and the DOM

It is important to understand that a React component is not itself a DOM element.

For example:

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

Header is a React component.

The component produces:

<header>My Website</header>

which becomes part of the browser’s DOM.

Conceptually:

React Component
      ↓
      JSX
      ↓
React rendering process
      ↓
DOM
      ↓
Browser UI

React manages the relationship between your components and the rendered DOM.

Components and Reusability

One of the biggest advantages of components is that you can write a UI structure once and reuse it.

For example:

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

You can use it wherever appropriate:

<ProductCard>
  <Button />
</ProductCard>

or:

<Checkout>
  <Button />
</Checkout>

As you learn props, you can make the component even more flexible:

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

Now:

<Button>Buy Now</Button>
<Button>Login</Button>
<Button>Submit</Button>

The same component can support different content.

Common Beginner Mistakes

Treating Components Like HTML

Incorrect:

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

Components still need valid JSX structure and properly closed elements.

Using Lowercase Component Names

Incorrect:

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

Correct:

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

Creating Components Without a Purpose

Don’t turn every small piece of text into a component.

Instead, consider whether the component provides:

• Reusability
• Independent behavior
• Clear responsibility
• Better organization
• Easier maintenance

Putting the Entire Application in One Component

A large component can become difficult to maintain.

Instead of putting everything into:

function App() {
  // huge application
}

divide meaningful sections into components.

Making Too Many Tiny Components

The opposite problem is also possible.

This:

Page
├── Div
├── Heading
├── Paragraph
├── Span
└── Text

doesn’t necessarily improve an application.

Create components around meaningful UI and behavior rather than individual HTML elements.

Components in a Typical React Project

A React project might eventually look like:

src/
│
├── App.jsx
├── main.jsx
│
├── components/
│   ├── Header.jsx
│   ├── Navigation.jsx
│   ├── Button.jsx
│   ├── ProductCard.jsx
│   └── Footer.jsx
│
├── pages/
│   ├── Home.jsx
│   ├── Products.jsx
│   └── About.jsx
│
└── assets/

This structure isn’t mandatory. React doesn’t require a specific folder structure.

The important idea is to organize your components in a way that makes the project easy to understand and maintain.

Image Placement

Place this image immediately after the section “Components Are the Building Blocks of React”.

Create a 16:9 educational React infographic showing an application being broken into reusable components.

The visual should show:

                 React Application
                        │
        ┌───────────────┼───────────────┐
        ↓               ↓               ↓
      Header          Main            Footer
                        │
              ┌─────────┼─────────┐
              ↓         ↓         ↓
           Hero      Cards      Sidebar
                        │
                     Card

Show the components as clean visual UI blocks connected together. Include a small code editor area showing <Header />, <ProductCard />, and <Footer />, alongside a browser preview.

Use a modern React/developer education aesthetic, minimal text, clear hierarchy, and a professional 16:9 layout.

Caption: React applications are built by combining reusable components.

Alt text: React component architecture showing an application divided into reusable UI components.

Practice Exercise

Create a simple React application using separate components for:

Header
MainContent
Footer

Create:

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

Then create a MainContent component containing:

Welcome to React
Learning React components

Finally, create a Footer component containing:

© 2026 My Website

Combine them inside App:

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

Bonus Challenge

Create a reusable Card component and use it three times:

React
JavaScript
HTML

Try to make the component accept the card title through a prop:

<Card title="React" />
<Card title="JavaScript" />
<Card title="HTML" />

You will learn how to make components reusable with props in the upcoming chapters.

Quick Component Cheat Sheet

Concept	Meaning
Component	A reusable piece of UI
JSX	Describes the UI a component renders
function Header()	Defines a function component
<Header />	Uses a React component
Props	Data passed into a component
State	Data managed by a component
Composition	Combining components together
Reusability	Using the same component in multiple places
Component Tree	Hierarchical structure of components
App	Common top-level application component

Key Takeaways

• A component is a reusable piece of UI in React.
• React applications are built by combining components.
• Components can be small, such as a button, or large, such as an entire page.
• A component can contain JSX, JavaScript logic, state, props, and event handlers.
• Components can use other components.
• Component names should begin with an uppercase letter.
• Components make applications easier to organize, reuse, maintain, and understand.
• Props allow components to receive different data.
• State allows components to manage changing data.
• Not every HTML element needs to become a component.
• Good components usually have a clear purpose or responsibility.
• Large React applications are organized as trees of components.
• Component-based development is the foundation on which the rest of React is built.