React Components

Creating components is one of the first practical skills you need to learn in React.

A React application is built by combining multiple components. Each component can represent a specific part of the interface, such as a header, button, navigation bar, product card, profile, form, sidebar, or complete page.

The basic process is simple:

Create a component
       ↓
Return JSX
       ↓
Export the component
       ↓
Import it where needed
       ↓
Render it using <ComponentName />

For example:

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

Then use it:

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

This chapter will take you from creating a simple component to building reusable components with props, children, state, and other components.

Creating a Basic Component

The simplest React component is a JavaScript function that returns JSX.

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

Here:

function Header()

creates the component.

And:

return <header>My Website</header>;

defines the UI that the component returns.

You can then use the component like this:

<Header />

A Complete Simple Example

A complete React component can look like this:

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

export default Greeting;

The component is exported so another file can use it.

For example:

import Greeting from "./Greeting";

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

export default App;

The browser will display the JSX returned by Greeting.

Creating a Component Inside App.jsx

When you’re learning React, you can create multiple components in the same file.

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

function MainContent() {
  return (
    <main>
      <h1>Welcome</h1>
      <p>Learn React step by step.</p>
    </main>
  );
}

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

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

export default App;

This is useful for small examples and while learning.

As your project grows, you will normally move reusable components into separate files.

Creating Components in Separate Files

A common project structure is:

src/
├── App.jsx
├── main.jsx
└── components/
    ├── Header.jsx
    ├── MainContent.jsx
    └── Footer.jsx

Each component has its own file.

Header.jsx

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

export default Header;

Footer.jsx

function Footer() {
  return (
    <footer>
      <p>© 2026 My Website</p>
    </footer>
  );
}

export default Footer;

App.jsx

import Header from "./components/Header";
import Footer from "./components/Footer";

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

      <main>
        <h2>Welcome to My Website</h2>
      </main>

      <Footer />
    </>
  );
}

export default App;

This structure becomes much easier to manage as the application grows.

Understanding the Component Creation Process

When creating a component, you can think through these steps:

Decide what UI needs to be separated
              ↓
Create a function
              ↓
Give it a PascalCase name
              ↓
Return JSX
              ↓
Export it if needed
              ↓
Import it where needed
              ↓
Render it with <ComponentName />

For example, if you need a product card:

function ProductCard() {
  return (
    <article>
      <h2>Wireless Headphones</h2>
      <p>₹2,499</p>
      <button>Buy Now</button>
    </article>
  );
}

Then:

<ProductCard />

You now have a reusable component.

Choosing What Should Become a Component

Before creating a component, look at the interface and identify meaningful sections.

For example, a shopping page might contain:

Shopping Page
│
├── Header
├── SearchBar
├── CategoryMenu
├── ProductList
│   └── ProductCard
├── CartSummary
└── Footer

Each section could potentially become a component.

For example:

function SearchBar() {
  return <input placeholder="Search products..." />;
}

function CartSummary() {
  return (
    <aside>
      <h2>Your Cart</h2>
    </aside>
  );
}

Then the page can combine them:

function ShoppingPage() {
  return (
    <>
      <Header />
      <SearchBar />
      <ProductList />
      <CartSummary />
      <Footer />
    </>
  );
}

The goal isn’t to turn every HTML element into a component. The goal is to create meaningful, manageable UI units.

Naming Components

React component names should start with an uppercase letter.

Use:

Header
Footer
ProductCard
UserProfile
SearchBar
LoginForm
CourseCard

Avoid:

header
footer
productcard
userprofile

PascalCase is the standard naming convention.

For multiple words, capitalize each word:

ProductCard
UserProfile
NavigationBar
ShoppingCart
CourseDetails

Why Capitalization Matters

React distinguishes custom components from built-in HTML elements based partly on capitalization.

For example:

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

Use:

<Header />

React recognizes Header as a component.

But:

<header />

is interpreted as an HTML element.

Therefore, this is correct:

<Header />

not:

<header />

when you mean your custom Header component.

Returning JSX From a Component

A component needs to return something React can render.

Simple example:

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

Multiple elements can be wrapped:

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>
    </>
  );
}

Creating Components With JavaScript Logic

Components can contain JavaScript before their return.

function Product() {
  const price = 2499;
  const discount = 500;

  const finalPrice = price - discount;

  return (
    <div>
      <h2>Wireless Headphones</h2>
      <p>Final Price: ₹{finalPrice}</p>
    </div>
  );
}

The component isn’t just markup. It can calculate values and use those values in its UI.

Creating Components With Props

A component becomes much more useful when it can receive data.

For example:

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

Now the component can be used with different values:

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

<ProductCard
  name="Mechanical Keyboard"
  price={4999}
/>

The same component structure is reused for different products.

Creating a Component With Default Values

You can provide default values when appropriate.

For example:

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

Now:

<Button />

renders:

Click Me

While:

<Button text="Buy Now" />

renders:

Buy Now

Default values can make reusable components more convenient.

Creating Components With children

React components can receive content between their opening and closing tags through the children prop.

For example:

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

You can use it like this:

<Card>
  <h2>React</h2>
  <p>Learn React step by step.</p>
</Card>

The content inside <Card> becomes children.

This is extremely useful for creating flexible layouts.

Creating a Reusable Button

Let’s create a more flexible button component:

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

Now you can use it with different content:

<Button>
  Buy Now
</Button>

<Button>
  Login
</Button>

<Button disabled>
  Submit
</Button>

The component provides the common button structure while the parent controls the content and state.

Creating Components With State

Components can use React state.

import { useState } from "react";

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

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

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

The component now has its own changing data.

The flow is:

User clicks button
       ↓
setCount()
       ↓
State changes
       ↓
React renders updated component
       ↓
New count appears

This is how function components become interactive.

Creating Components With Events

Components can contain event handlers.

function LoginButton() {
  function handleLogin() {
    console.log("Login clicked");
  }

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

The component contains both:

• The button UI.
• The behavior that happens when the button is clicked.

You can also use an inline event handler:

function LoginButton() {
  return (
    <button onClick={() => console.log("Login clicked")}>
      Login
    </button>
  );
}

Creating Components From Existing UI

When working on a real application, you don’t always start by writing components from scratch.

You can start with a page:

function App() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
      </header>

      <section>
        <h2>Products</h2>

        <article>
          <h3>Laptop</h3>
          <p>₹59,999</p>
        </article>

        <article>
          <h3>Headphones</h3>
          <p>₹2,499</p>
        </article>
      </section>

      <footer>
        <p>© 2026 My Store</p>
      </footer>
    </main>
  );
}

You can identify meaningful sections and extract them into components:

App
├── Header
├── ProductSection
│   └── ProductCard
└── Footer

This process is called component extraction.

Creating a Header Component

Before:

<header>
  <h1>My Store</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/products">Products</a>
  </nav>
</header>

After extraction:

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

      <nav>
        <a href="/">Home</a>
        <a href="/products">Products</a>
      </nav>
    </header>
  );
}

Then:

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

      <main>
        Content
      </main>
    </>
  );
}

The App component is now easier to read.

Creating a Product Card Component

Suppose you have repeated product markup:

<article>
  <h2>Laptop</h2>
  <p>₹59,999</p>
  <button>Buy Now</button>
</article>

and:

<article>
  <h2>Headphones</h2>
  <p>₹2,499</p>
  <button>Buy Now</button>
</article>

Instead of repeating the structure, create:

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

Then:

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

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

Now the structure exists in one place.

Creating Components From Data

A common React pattern is to store data separately and pass it into components.

const products = [
  {
    id: 1,
    name: "Laptop",
    price: 59999
  },
  {
    id: 2,
    name: "Headphones",
    price: 2499
  }
];

Create a component:

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

Then render the data:

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

This is a common pattern in real React applications:

Data
 ↓
map()
 ↓
Component
 ↓
Props
 ↓
UI

Creating Components With Conditional UI

A component can decide what to display based on props.

function AccountStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  }

  return <p>Please log in.</p>;
}

Then:

<AccountStatus isLoggedIn={true} />

or:

<AccountStatus isLoggedIn={false} />

The same component handles both situations.

Creating Components With Multiple Props

A component can receive many props.

function UserCard({
  name,
  role,
  location,
  online
}) {
  return (
    <article>
      <h2>{name}</h2>
      <p>{role}</p>
      <p>{location}</p>
      <p>{online ? "Online" : "Offline"}</p>
    </article>
  );
}

Use it:

<UserCard
  name="Arafat"
  role="Frontend Developer"
  location="Hyderabad"
  online={true}
/>

As the component grows, keep the props meaningful and avoid passing unnecessary values.

Creating Components With className

Components can receive classes through props.

function Card({ className = "", children }) {
  return (
    <article className={`card ${className}`}>
      {children}
    </article>
  );
}

Then:

<Card className="featured">
  <h2>React Course</h2>
</Card>

This allows the parent component to customize the component’s appearance.

Creating Components With Composition

Instead of making one component responsible for everything, you can combine smaller components.

function Logo() {
  return <h1>My Store</h1>;
}

function Navigation() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/products">Products</a>
    </nav>
  );
}

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

Now:

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

The structure becomes:

App
 ↓
Header
 ├── Logo
 └── Navigation

This is the beginning of component composition.

Component Files and Imports

When components are separated into files, import paths must be correct.

Suppose:

src/
├── App.jsx
└── components/
    └── Header.jsx

Then:

import Header from "./components/Header";

The ./ means the current directory.

If the component is inside another folder:

components/layout/Header.jsx

then:

import Header from "./components/layout/Header";

Incorrect paths are a common source of errors.

Common Mistakes

Forgetting to Export the Component

If the component is in another file:

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

you need to export it:

export default Header;

Or:

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

Forgetting to Import the Component

If Header is in another file:

<Header />

you must import it:

import Header from "./components/Header";

Using the Wrong Capitalization

Incorrect:

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

Correct:

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

Forgetting the Return Statement

Incorrect:

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

Correct:

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

Incorrectly Calling a Component

Avoid:

Header()

when you intend to render it as a React component.

Use:

<Header />

This allows React to manage the component correctly.

Creating Components Inside Another Component

Avoid unnecessarily doing this:

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

  return <Header />;
}

Prefer defining Header at module scope:

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

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

This avoids recreating the component definition on every render and makes the component easier to reuse.

Best Practices

Give Components a Clear Purpose

A component should represent a meaningful piece of UI or behavior.

Good:

<ProductCard />
<SearchBar />
<Navigation />
<CheckoutForm />

Make Repeated UI Reusable

If you find yourself copying the same JSX several times, consider creating a component.

Instead of repeating:

<article>
  <h2>...</h2>
  <p>...</p>
</article>

create:

<ProductCard />

Keep Components Manageable

If a component becomes very large and contains several independent responsibilities, consider extracting meaningful sections into smaller components.

Use Props Instead of Hardcoding

Instead of:

function ProductCard() {
  return <h2>Laptop</h2>;
}

prefer:

function ProductCard({ name }) {
  return <h2>{name}</h2>;
}

Now the component can be reused.

Don’t Over-Componentize

Creating a component for every single element can make the project harder to navigate.

Good component design balances:

Reusability
+
Readability
+
Clear Responsibility

A Complete Example

Let’s build a small learning platform using several components.

Header

function Header() {
  return (
    <header>
      <h1>Web4Learners</h1>

      <nav>
        <a href="/">Home</a>
        <a href="/courses">Courses</a>
      </nav>
    </header>
  );
}

Course Card

function CourseCard({ title, price, students }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>₹{price}</p>
      <p>{students} students</p>

      <button>
        Enroll Now
      </button>
    </article>
  );
}

Course List

function CourseList() {
  const courses = [
    {
      id: 1,
      title: "React for Beginners",
      price: 1499,
      students: 1200
    },
    {
      id: 2,
      title: "JavaScript Essentials",
      price: 999,
      students: 850
    }
  ];

  return (
    <section>
      {courses.map((course) => (
        <CourseCard
          key={course.id}
          title={course.title}
          price={course.price}
          students={course.students}
        />
      ))}
    </section>
  );
}

Footer

function Footer() {
  return (
    <footer>
      <p>© 2026 Web4Learners</p>
    </footer>
  );
}

App

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

      <main>
        <h2>Popular Courses</h2>
        <CourseList />
      </main>

      <Footer />
    </>
  );
}

export default App;

The application structure is now:

App
├── Header
├── Main
│   └── CourseList
│       └── CourseCard
└── Footer

This is a practical example of how React applications are built from smaller components.

Image Placement

Place this image immediately after the section “Understanding the Component Creation Process”.

Create a 16:9 modern React educational infographic showing the process of creating and using a React component.

Show this flow:

Create Function
      ↓
function ProductCard() {
      ↓
   return JSX
      ↓
export default ProductCard
      ↓
Import Component
      ↓
<ProductCard />
      ↓
Rendered UI

Show a code editor on the left and a browser preview on the right containing a simple product card.

Use a modern, polished developer-education aesthetic with clean typography, subtle React branding, and minimal text. Avoid an outdated textbook appearance.

Caption: Creating a React component involves defining it, exporting it, importing it, and rendering it.

Alt text: React component creation workflow from JavaScript function to rendered UI.

Practice Exercise

Create a small React application for a course website.

Create these components:

Header
CourseCard
Footer

Header

Display:

Web4Learners
Home
Courses
About

CourseCard

Make the component accept:

title
price
instructor

For example:

<CourseCard
  title="React for Beginners"
  price={1499}
  instructor="John"
/>

Display all three values.

Footer

Display:

© 2026 Web4Learners

Finally, combine everything inside App:

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

      <main>
        <CourseCard
          title="React for Beginners"
          price={1499}
          instructor="John"
        />
      </main>

      <Footer />
    </>
  );
}

Bonus Challenge

Create three different CourseCard components with different course information.

Then move each component into its own file:

src/
├── App.jsx
└── components/
    ├── Header.jsx
    ├── CourseCard.jsx
    └── Footer.jsx

Export and import each component correctly.

Quick Cheat Sheet

Concept	Example
Create component	function Header() { ... }
Return JSX	return <h1>Hello</h1>
Use component	<Header />
Export component	export default Header
Import component	import Header from "./Header"
Receive props	function Card({ title })
Use props	<h2>{title}</h2>
Receive children	function Card({ children })
Render children	{children}
Use state	useState(0)
Handle events	onClick={handleClick}
Render conditionally	{isVisible && <Card />}
Render lists	{items.map(...)}

Key Takeaways

• Creating components is one of the fundamental skills in React.
• A function component is created using a JavaScript function that returns JSX.
• Component names should use PascalCase.
• Components can be created in the same file or separate files.
• Components in separate files should normally be exported and imported.
• Props allow components to receive dynamic data.
• children allows components to receive content between their opening and closing tags.
• Components can contain JavaScript logic, state, event handlers, and conditional rendering.
• Repeated UI is a strong candidate for a reusable component.
• Components can be combined to build larger interfaces.
• Avoid both extremely large components and unnecessary tiny components.
• A well-designed component should have a clear purpose and be easy to understand.
• The typical React workflow is create → export → import → render.
• As your applications grow, creating well-organized components becomes essential for maintaining a clean React codebase.