React Components

Components are the building blocks of a React app: each one is a small, reusable piece of the user interface.

Creating a Component

A function component is a JavaScript function that returns JSX.

function Header() {
  return (
    <header>
      <h1>Karachi Computer Mart</h1>
      <p>Laptops, phones and accessories</p>
    </header>
  );
}

Two rules matter:

• The name must start with a capital letter: Header, not header. React treats lowercase tags as plain HTML elements.
• It must return something: JSX, null (show nothing), a string or a number.

You can also write components as arrow functions:

const Footer = () => {
  return <footer>© 2026 Karachi Computer Mart</footer>;
};

Both styles work the same way. Pick one and stay consistent.

Using a Component

Use a component like an HTML tag. You can place it inside other components.

function App() {
  return (
    <div>
      <Header />
      <p>Today's offer: 10% off on all keyboards.</p>
      <Footer />
    </div>
  );
}

Karachi Computer Mart
Laptops, phones and accessories
Today's offer: 10% off on all keyboards.
© 2026 Karachi Computer Mart

This is called composition: big components are built from smaller ones.

A Component Tree

Every React app forms a tree. App is at the top, and other components sit inside it.

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

When you plan an app, draw boxes around parts of the design. Each box that repeats or has its own job is a good component.

Components in Separate Files

In real projects each component usually has its own file. Create src/components/Header.jsx:

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

export default Header;

Then import it in App.jsx:

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

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

export default App;

A file can have only one default export, but many named exports.

Do Not Define Components Inside Components

Always define components at the top level of a file, not inside another component function. A component defined inside another is created again on every render, which causes bugs and slow pages.

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

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

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

Keep Components Pure

A component should only calculate and return JSX. Given the same input, it should return the same output. Do not change outside variables while rendering. Things like fetching data or timers go in event handlers or in useEffect, which you will learn later.

Exercise