Component tree
- React course
- Beginner
- Lesson 10/84
- 4 min
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.
Practice 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.
Starter code
// Write the Title component hereSample solution
function Title() {
return <><h1>Title</h1><p>Subtitle</p></>;
}
export default Title;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Nested component
App calls Card inside ____.App calls Card inside Layout.Explanation: Layout is the wrapper between App and Card.
2 Why split into many components?
- It runs faster
- Readability and reuse Correct answer
- We write less code
- SEO improves
Explanation: Splitting components improves readability and reuse.
3 Match the solutions
| Term | Meaning |
|---|---|
Single root |
One JSX |
Fragment |
Grouping |
div |
Wrapper |
Multiple roots |
Invalid |