Component tree

Learn that components nest inside each other to form a tree.

Component tree depth

When a component calls other components inside it, the tree gets deeper. In function App() { return <Layout><Card /></Layout>; }, App calls Layout and Layout renders Card.

Deep trees can be harder to read, but separating each level with a meaningful name keeps things tidy. Three or four levels deep is fine for React.

Nested components pass data through props. We'll cover that in the next group.

No multiple roots

A component must return a single root JSX. You can't put two sibling tags side by side: return <h1>A</h1><p>B</p>; is invalid.

The fix is to wrap them: <div><h1>A</h1><p>B</p></div> or, since React 17+, use a fragment: <><h1>A</h1><p>B</p></>.

Fragments don't render to the DOM; they only group. They are the clean way to avoid extra divs.

Exercise Two elements with a fragment

Complete the skeleton. Write a component called Title that returns a fragment (<>...</>) with <h1>Title</h1> and <p>Subtitle</p> inside. Don't forget to export.

Show example solution

function Title() {
  return <><h1>Title</h1><p>Subtitle</p></>;
}

export default Title;

Test yourself

Nested component

App calls Card inside ____.

Show answer

App calls Card inside Layout.

Why split into many components?
- It runs faster
- Readability and reuse
- We write less code
- SEO improves
Show answer

Readability and reuse — Splitting components improves readability and reuse.
Match the solutions

Single root

One JSX
Fragment

Grouping
div

Wrapper
Multiple roots

Invalid

Next lesson: Naming rules

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies