Right now App.jsx holds one heading. A real Watchlist screen has a header, a form, a filter bar and a list of movie cards, and some pieces appear many times. If you write it all in one function you get a 300-line component that nobody wants to touch. Components let you name each piece, write it once and reuse it.

A component is a function

Here is a complete component:

function Header() {
  return (
    <header>
      <h1>My Watchlist</h1>
      <p>Movies I want to see</p>
    </header>
  );
}

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

Three rules make this work:

1. It’s a function that returns JSX. JSX is the HTML-like syntax inside return. You’ll learn its rules in the next lesson.
2. Its name starts with a capital letter. <Header /> tells React “call the Header function”. A lowercase <header> means the HTML element.
3. You use it as a tag, not a function call. You write <Header /> and React decides when to call Header(). That’s what lets React track it, re-render it and give it state later.

The parentheses around the multi-line JSX aren’t required by React. They stop JavaScript’s automatic semicolon insertion from ending the return early, which would silently return undefined.

Components inside components

Components nest like HTML. Add a movie card and use it twice:

function MovieCard() {
  return (
    <article>
      <h2>Arrival</h2>
      <p>2016</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <Header />
      <MovieCard />
      <MovieCard />
    </main>
  );
}

You now have two identical cards. That’s obviously not useful yet; the cards need to show different movies. Passing data into a component is what props are for, and they’re coming in Section 2. For now, notice the shape: App is the parent, and Header and the two MovieCards are its children. Every React app is a tree like this.

One component per file

When a component is reused or grows past a screenful, give it its own file. The usual layout is a src/components folder:

export default function MovieCard() {
  return (
    <article>
      <h2>Arrival</h2>
      <p>2016</p>
    </article>
  );
}

import Header from './components/Header.jsx';
import MovieCard from './components/MovieCard.jsx';

export default function App() {
  return (
    <main>
      <Header />
      <MovieCard />
    </main>
  );
}

JavaScript modules give you two kinds of export:

• Default export: export default function MovieCard(). One per file, imported without braces: import MovieCard from '…'.
• Named export: export function MovieCard(). Any number per file, imported with braces: import { MovieCard } from '…'.

Both are fine. Many teams prefer named exports because the name is fixed and editors rename it everywhere for you. Pick one convention per project and stick to it. This course uses default exports for components, matching the file Vite generated.

Components should be predictable

React may call your component function many times: on every update, twice in StrictMode, and sometimes when it’s preparing a screen in the background. So a component should behave like a formula. Given the same inputs, it returns the same JSX and doesn’t change anything outside itself while rendering. Don’t modify global variables, fetch data or touch the DOM directly in the function body. You’ll learn where that kind of work belongs (event handlers and effects) in Section 3.

Here’s the difference in practice. A component that does visits += 1 on a module-level variable will report different numbers in development and production, because StrictMode calls it twice. A component that only reads its inputs and returns JSX gives the same answer no matter how often React calls it.

Return a single root

A component returns one JSX element. To return siblings without adding an extra <div>, wrap them in a fragment:

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

A fragment groups elements in your code but adds nothing to the DOM. Use a real element like <main> or <section> when it has meaning for the page’s structure, and a fragment when it doesn’t.

You can now split a screen into named pieces. Next you’ll learn the rules of JSX itself: why it’s className and not class, how curly braces work, and what JSX turns into when Vite compiles it.