Components

A React component is a reusable part of a user interface.

In modern React, components are usually written as JavaScript or TypeScript functions.

A component can return JSX describing what should appear on the screen.

Example — Simple Component

function Welcome() {
  return (
    <div>
      <h1>Pizza Ordering</h1>
      <p>This reusable panel is a React component.</p>
    </div>
  );
}

export default Welcome;

How It Works

function Welcome()

Declares a function named Welcome.

Because its name starts with a capital letter, it can be used as a React component.

return

Returns the JSX describing the interface.

<div>

Groups the heading and paragraph.

export default Welcome

Makes the component available for import in another file.

Browser Result

localhost:5173

Pizza Ordering

This reusable panel is a React component.

Important: A React component is not a special HTML element. It is a JavaScript or TypeScript function that React calls when rendering the interface.

---

Imagine creating a online pizza-ordering interface.

The website contains:

• Header
• Navigation
• Pizza menu
• Pizza cards
• Cart summary
• Footer

Without components, we might place the entire interface inside one large function or HTML structure.

As the website grows, the code becomes difficult to read and maintain.

React allows us to divide the interface into smaller, reusable parts.

Example — Component Structure

App
├── Header
├── Navigation
├── PizzaMenu
│   ├── PizzaCard
│   ├── PizzaCard
│   └── PizzaCard
├── CartSummary
└── Footer

Each component has a specific responsibility.

For example:

Header displays the website header.

Navigation displays navigation links.

PizzaMenu displays a collection of pizzas.

PizzaCard displays an individual pizza.

CartSummary displays information about the customer's current order.

Main Advantages

Reusability

A component can be used multiple times.

Maintainability

Changes to a component can be made in one place.

Readability

Small components are easier to understand than large files.

Organization

Components help structure complex applications.

Testing

Independent components can be tested more easily.

---

A basic React component is a function that returns JSX.

Example — Pizza Component

function PizzaCard() {
  return (
    <div>
      <h2>Margherita pizza</h2>
      <p>From 8.50 €</p>
    </div>
  );
}

Explanation

PizzaCard is the component name.

return provides the JSX.

<h2> displays the pizza name.

<p> displays the destination.

The component currently contains fixed information.

Later, we will use props to display different pizzas using the same component.

Browser Result

localhost:5173

Margherita pizza

From 8.50 €

---

Components can be used inside other components.

For example, we can create a PizzaCard component and use it inside App.

Complete Example — App.tsx

function PizzaCard() {
  return (
    <div>
      <h2>Margherita pizza</h2>
      <p>From 8.50 €</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>Pizza Menu</h1>

      <PizzaCard />
    </div>
  );
}

How It Works

First, we define the PizzaCard component.

Then, we define the App component.

Inside App, we write:

<PizzaCard />

React recognizes PizzaCard as a component and renders its JSX.

Browser Result

localhost:5173

Pizza Menu

Margherita pizza

From 8.50 €

Important Difference

This is a component declaration:

function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

This is component usage:

<PizzaCard />

The first defines the component.

The second tells React to render it.

---

One of React's most important features is component reusability.

We can create a component once and use it multiple times.

Example — Three Pizza Cards

function PizzaCard() {
  return (
    <div>
      <h2>Margherita pizza</h2>
      <p>From 8.50 €</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>Pizza Menu</h1>

      <PizzaCard />
      <PizzaCard />
      <PizzaCard />
    </div>
  );
}

Browser Result

localhost:5173

Pizza Menu

Margherita pizza
From 8.50 €

Margherita pizza
From 8.50 €

Margherita pizza
From 8.50 €

React renders three instances of the same component.

Why Are All Pizzas Identical?

Because the component contains fixed values:

<h2>Margherita pizza</h2>
<p>From 8.50 €</p>

To display different pizzas, we can pass data through props.

Props will be covered in the next lesson.

---

React applications are organized as a tree of components.

A component can contain other components.

The component at the top of the application is commonly called the root component.

In a typical Vite React project, this component is App.

Example — Component Tree

App
├── Header
├── Main
│   ├── PizzaCard
│   └── PizzaCard
└── Footer

Practical Example

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

function PizzaCard() {
  return <p>Pepperoni pizza — 10.50 €</p>;
}

function Footer() {
  return <p>Pizza Palace — Order online</p>;
}

export default function App() {
  return (
    <div>
      <Header />

      <main>
        <PizzaCard />
        <PizzaCard />
      </main>

      <Footer />
    </div>
  );
}

How It Works

App is the parent component.

Header, PizzaCard, and Footer are child components.

The same PizzaCard component appears twice.

Browser Result

localhost:5173

Pizza Palace

Pepperoni pizza — 10.50 €

Pepperoni pizza — 10.50 €

Pizza Palace — Order online

Important

The component tree describes relationships between React components.

It is related to, but not identical to, the browser's DOM tree.

---

React component names must begin with a capital letter when used directly in JSX.

The common naming convention is PascalCase.

Examples:

App
Pizza
PizzaCard
CartSummary
CustomerMenu
NavigationBar

Correct

function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Usage:

<PizzaCard />

Incorrect

function pizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Usage:

<pizzaCard />

React treats lowercase JSX tag names as intrinsic elements rather than references to your component function.

PascalCase vs camelCase

Use PascalCase for React components.

Use camelCase for ordinary variables and functions.

---

When using React with TypeScript, components containing JSX should be saved in .tsx files.

Examples:

App.tsx
PizzaCard.tsx
Header.tsx
Footer.tsx

Why .tsx?

The .tsx extension tells TypeScript that the file can contain JSX syntax.

For example:

function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

This is valid inside a .tsx file.

A normal .ts file does not support JSX syntax.

.ts vs .tsx

---

As an application grows, keeping every component inside App.tsx becomes inconvenient.

A common approach is to store components in separate files.

Recommended Project Structure

src/
├── components/
│   ├── Header.tsx
│   ├── PizzaCard.tsx
│   └── Footer.tsx
│
├── App.tsx
├── main.tsx
└── index.css

This structure keeps the main application component in src/App.tsx and reusable components in src/components/.

Some teams also move App.tsx into the components folder. Both approaches are valid when the project uses a consistent structure.

Why Separate Files?

Each component has its own responsibility.

It becomes easier to find, edit, reuse, and test individual components.

---

To use a component in another file, we must export it.

Example — PizzaCard.tsx

Create:

src/components/PizzaCard.tsx

Add:

export default function PizzaCard() {
  return (
    <div>
      <h2>Margherita pizza</h2>
      <p>From 8.50 €</p>
    </div>
  );
}

What Does export default Mean?

It marks PizzaCard as the default export of the file.

Another file can import it without curly braces.

---

Now open:

src/App.tsx

Import PizzaCard:

import PizzaCard from "./components/PizzaCard";

Then use it:

import PizzaCard from "./components/PizzaCard";

export default function App() {
  return (
    <div>
      <h1>Available Pizzas</h1>

      <PizzaCard />
      <PizzaCard />
      <PizzaCard />
    </div>
  );
}

How It Works

import PizzaCard imports the component.

"./components/PizzaCard" specifies the file path.

<PizzaCard /> renders the imported component.

Important

The import path is relative to the file performing the import.

If App.tsx and PizzaCard.tsx are in the same folder, we can use:

import PizzaCard from "./PizzaCard";

If PizzaCard.tsx is inside components, we use:

import PizzaCard from "./components/PizzaCard";

---

JavaScript and TypeScript support two common export styles.

Default Export

export default function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Import:

import PizzaCard from "./PizzaCard";

No curly braces are required.

Named Export

export function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Import:

import { PizzaCard } from "./PizzaCard";

Curly braces are required for named imports.

Comparison

Both approaches are valid.

In these notes, we will generally use default exports for page-level components and stay consistent within each feature.

---

Some projects place App.tsx inside src/components.

For example:

src/
├── components/
│   ├── App.tsx
│   └── PizzaCard.tsx
│
├── main.tsx
└── index.css

After moving App.tsx, the import path in main.tsx must be updated.

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import "./index.css";
import App from "./components/App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Explanation

"./components/App" points to the new location of the root component.

React still renders App inside the root DOM element.

Only the file organization has changed.

---

Let's build a simple page using three separate components.

Project Structure

src/
├── components/
│   ├── Header.tsx
│   ├── PizzaCard.tsx
│   └── Footer.tsx
│
├── App.tsx
├── main.tsx
└── index.css

Header.tsx

export default function Header() {
  return (
    <header>
      <h1>Pizza Palace</h1>
      <p>Fresh pizza delivered to your door</p>
    </header>
  );
}

PizzaCard.tsx

export default function PizzaCard() {
  return (
    <article>
      <h2>Vegetarian pizza</h2>
      <p>Size: Large</p>
      <p>Price: 9.50 €</p>
    </article>
  );
}

Footer.tsx

export default function Footer() {
  return (
    <footer>
      <p>Pizza Palace — 2026</p>
    </footer>
  );
}

App.tsx

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

export default function App() {
  return (
    <div>
      <Header />

      <main>
        <h2>Available Pizzas</h2>

        <PizzaCard />
        <PizzaCard />
      </main>

      <Footer />
    </div>
  );
}

Browser Result

localhost:5173

Pizza Palace

Fresh pizza delivered to your door

Available Pizzas

Vegetarian pizza

Size: Large
Price: 9.50 €

Vegetarian pizza

Size: Large
Price: 9.50 €

Pizza Palace — 2026

Why Is This Better Than One Large Component?

Each part of the interface has its own file.

If we want to modify the header, we edit Header.tsx.

If we want to change the pizza card structure, we edit PizzaCard.tsx.

If we want to modify the footer, we edit Footer.tsx.

We do not need to search through one large component.

---

Currently, our PizzaCard component always displays the same pizza.

In real applications, we usually want to display different data.

For example:

<PizzaCard name="Pepperoni pizza" />
<PizzaCard name="Prosciutto pizza" />

This is possible using props.

Props allow parent components to pass data to child components.

Example

interface PizzaCardProps {
  name: string;
}

function PizzaCard(props: PizzaCardProps) {
  return (
    <h2>{props.name}</h2>
  );
}

export default PizzaCard;

Usage:

<PizzaCard name="Pepperoni pizza" />
<PizzaCard name="Prosciutto pizza" />

Browser Result

localhost:5173

Pepperoni pizza

Prosciutto pizza

We will study props in detail in the next lesson.

---

Mistake 1 — Lowercase Component Names

Incorrect:

function pizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Correct:

function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Mistake 2 — Forgetting to Export a Component

If a component needs to be imported into another file, it must be exported.

Correct:

export default function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Mistake 3 — Incorrect Import Path

Suppose PizzaCard.tsx is inside:

src/components/

And App.tsx is inside:

src/

Incorrect:

import PizzaCard from "./PizzaCard";

Correct:

import PizzaCard from "./components/PizzaCard";

Mistake 4 — Incorrect JSX Component Usage

Incorrect:

<PizzaCard>

Correct for a component without children:

<PizzaCard />

Mistake 5 — Calling the Component as an Ordinary Function

Avoid:

PizzaCard()

To render a component, use JSX:

<PizzaCard />

React then manages the component's rendering and lifecycle.

Mistake 6 — Confusing Default and Named Imports

Incorrect for a default export:

import { PizzaCard } from "./components/PizzaCard";

Correct:

import PizzaCard from "./components/PizzaCard";

The import syntax must match the export style used by the component file.

---

Exercise 1 — Create a Status Component

Create an AvailabilityBadge component that displays Available to order. Render it inside App.

Exercise 2 — Reuse a Component

Create a PizzaCard component and render it three times. Use a fixed Margherita pizza for now.

Exercise 3 — Build a Component Tree

Create Header, PizzaMenu, PizzaCard, and Footer components. Draw their parent-child relationship before writing the JSX.

Exercise 4 — Split Components into Files

Move Header and PizzaCard into separate files inside src/components/. Export and import both components correctly.

Exercise 5 — Try Named Exports

Change one component from a default export to a named export, then update its import statement.

---

• Components are reusable functions that return JSX.
• Component names use PascalCase so React can distinguish them from HTML elements.
• A parent component can render one or many child components.
• Reusing a component creates separate component instances.
• Files containing TypeScript and JSX use the .tsx extension.
• Components can be organized into separate files and connected with imports and exports.
• Default and named exports use different import syntax.
• App is commonly the root component in a Vite React project.
• Props make reusable components display different data and are covered in the next lesson.

---

• Your First Component
• Importing and Exporting Components
• Thinking in React

Next, learn how props allow parent components to pass typed data to reusable child components.