Nesting React Components

In the last lesson, Using React Components, you saw how to place a component into your page. That is fine for one box, but a real page is never just one box:

• It has a header on top.
• It has some main content in the middle.
• And it has a footer at the bottom.

So how do you build the whole thing? You put components inside other components. That is called nesting. And it is how every React app is built.

🤔 Why Nest Components At All?

Imagine you tried to write your entire page inside one giant component. The header, the menu, the article, the footer, all in one file. Here is the pain you would hit:

• The file grows huge, so one small change means scrolling through hundreds of lines to find the right spot.
• And if you wanted the same footer on another page, you would have to copy and paste all of it.

Nesting fixes this. You build each part as its own small component, then place those small components inside a bigger one. The big component just lines them up in order.

So what does nesting really give you?

• One huge component is hard to read and hard to change. Small components are not.
• Repeating the same chunk on many pages means copy-paste everywhere. Nesting lets you write a piece once and reuse it.
• You build small simple pieces, then assemble them like building blocks.

🧩 What Nesting Actually Means

Nesting just means writing one component’s tag inside another component:

• The outer one is the parent. A parent is the component that holds other components inside it.
• The ones placed inside are the children. A child is a component that lives inside another component.

Think of a house. The house is the parent. Inside it you have rooms, a kitchen, and a bathroom. Each room is its own thing with its own job, but they all sit inside the same house. You do not build one giant room that does everything. You build separate rooms and put them in the house.

In React it looks the same. Here is a tiny parent that holds one child:

function Welcome() {
  return <h1>Hello there!</h1>;
}

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

Let’s read through that:

• Welcome is a small component that returns one heading.
• App is the parent. Inside its <div> it writes <Welcome />.
• So App does not contain the heading text itself. It contains the Welcome component, which brings the heading along with it.
• When React renders App, it sees <Welcome />, goes and runs that component, then drops the output right there. The result on screen is just the heading inside a div.

🏗️ Building a Real Page From Small Pieces

Now let’s build something that looks like a real website. A page usually has three parts stacked top to bottom: a header, the main content, and a footer. We will make each one its own component, then nest all three inside a parent called App.

First, the three small children. Each one is simple and does just its own part:

function Header() {
  return (
    <header>
      <h1>My Cooking Blog</h1>
      <nav>Home · Recipes · About</nav>
    </header>
  );
}

function MainContent() {
  return (
    <main>
      <h2>Today's Recipe</h2>
      <p>A warm bowl of tomato soup in fifteen minutes.</p>
    </main>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 My Cooking Blog. All rights reserved.</p>
    </footer>
  );
}

Each of those is a separate, focused component:

• Header shows the site title and a small menu.
• MainContent shows the actual article for the page.
• Footer shows the copyright line at the bottom.
• None of them knows about the others, see? That is the point. Each one minds its own small job.

Now the parent. App does not write any headings or paragraphs itself. It just places the three children in the order we want them:

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

Let’s read the parent:

• App returns one <div> that wraps everything.
• Inside, it lists <Header />, then <MainContent />, then <Footer />.
• React runs each child in turn and stacks their output top to bottom.

So App reads almost like a table of contents. You glance at it and you instantly see the shape of the page. Here is what shows up on screen:

My Cooking Blog
Home · Recipes · About

Today's Recipe
A warm bowl of tomato soup in fifteen minutes.

© 2026 My Cooking Blog. All rights reserved.

The big win here is that each piece is small and easy to change:

• Want a different menu? You open Header and only touch that. The footer and the content do not care.
• And if you build another page tomorrow, you can reuse the same Header and Footer. You only write a new MainContent.

🌳 The Component Tree

When you nest components, they form a shape called a component tree. A component tree is just a map of which component sits inside which. The parent sits at the top, and its children branch out below it.

Our little page looks like this:

Let’s read the tree:

• App is at the top. It is the root, the one parent that holds the whole page.
• Header, MainContent, and Footer branch out under it as its three children.

This is not just a drawing. React really does build your app as a tree like this. And the tree can go deeper:

• A child can be a parent too. For example, MainContent could hold its own children like RecipeCard and CommentList.
• And each of those could hold smaller pieces. You keep nesting small components until the whole page is built, layer by layer.

Here is the same idea in a table, so the parent and child roles are clear:

⚠️ Common Mistakes

A few things catch people out when they first start nesting. Watch for these.

First, lowercase component names. React reads <header /> as the plain HTML tag and <Header /> as your component. If your component does not show up, check the first letter.

// ❌ Avoid: React thinks this is a plain HTML tag, not your component
<header />

// ✅ Good: capital letter tells React it's your component
<Header />

Second, returning more than one tag without a wrapper. A component must return one parent element. If you list two tags side by side with nothing around them, the build breaks.

// ❌ Avoid: two top-level tags, no single wrapper
function App() {
  return (
    <Header />
    <Footer />
  );
}

// ✅ Good: one wrapping element holds both children
function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

A couple more slip-ups to keep an eye on:

• Forgetting the self-closing slash. When a component has nothing inside, write it as <Header /> with the slash. Leaving it as <Header> with no closing tag is an error.
• Defining a component inside another component’s body. Keep each component as its own separate function at the top level, so do not write function Header() inside App. It still works, but it causes problems later, so build the habit of keeping them separate now.

✅ Best Practices

Keep these habits and your trees stay clean as the app grows.

• Give each component one clear job. If a component is doing the header and the footer, split it into two.
• Name components after what they show, like Header, RecipeCard, CommentList. The name should tell you what is inside.
• Let the parent just arrange the children. The parent reads like a layout, and the real content lives in the small children.
• Put each component in its own file once it grows. Small focused files are easier to find and reuse than one long file.
• Build pieces you can reuse. A good Header or Footer can sit on many pages without any change.

🧩 What You’ve Learned

A quick recap of what you can now do:

• ✅ Nest components by writing one component’s tag inside another.
• ✅ Tell apart the parent (the outer component) and the children (the ones inside it).
• ✅ Build a real page layout by splitting it into small Header, MainContent, and Footer components, then assembling them in App.
• ✅ Picture your app as a component tree, with the root parent on top and children branching below.
• ✅ Avoid the common slip-ups: lowercase names, missing wrappers, and missing self-closing slashes.

🚀 What’s Next?

You can now assemble a page from nested pieces. Next you will learn how parents and children work together in richer ways. You will pass pieces into each other to build flexible layouts.

React Component Composition