Components can render other components inside them, building up a full UI from small, focused pieces — exactly matching the component tree from Chapter 1:
function Header() {
return <header><h1>My Site</h1></header>;
}
function Footer() {
return <footer>© 2026</footer>;
}
function App() {
return (
<>
<Header />
<main>Page content here</main>
<Footer />
</>
);
}As a project grows past a handful of components, keeping them all in a dedicated components/ folder (rather than scattered in src/ directly) keeps the project navigable — this is the near-universal convention in real React codebases.
A useful mental split as apps grow: presentational components just receive data and render UI (like a Card that displays a title and image), while container components manage data, state, and logic, then pass the results down to presentational children. This isn't a strict rule enforced by React itself, but it's a widely used pattern for keeping components focused and reusable — you'll build on this idea directly in Chapter 28 (Component Design).
Breaking every single element into its own tiny component creates excessive complexity and prop-passing overhead. Cramming an entire page into one giant component makes it unreadable and hard to reuse. A good rule of thumb: if a piece of UI is reused, or if a section is complex enough to reason about on its own, it deserves its own component.
Build a small ProfileCard component that renders a name, a bio, and is used twice inside App.jsx with different content.
function ProfileCard() {
return (
<div className="card">
<h3>Priya Sharma</h3>
<p>Frontend Developer learning React.</p>
</div>
);
}
function App() {
return (
<>
<ProfileCard />
<ProfileCard />
</>
);
}Q How do I decide when to create a new component?
A good signal is reuse — if the same UI pattern appears more than once, extract it. Another signal is complexity — if a section of JSX is getting long or handles its own distinct logic, splitting it out improves readability.
Q Can a component file contain more than one component?
Yes, technically, but the convention is one main component per file, matching the filename. Small helper components used only within that file are a reasonable exception.