Component tree
- React Native course
- Beginner
- Lesson 9/116
- 5 min
Learn nested component trees with JSX.
Component tree
JSX forms a tree through nested tags. The outermost tag is the root; the ones inside are its children. This structure is called the component tree.
For example, in <View><View><Text>Hello</Text></View></View> the outer View is the root; the inner View is its child, and Text is a grandchild.
The tree structure makes it easy to break the screen into logical pieces and arrange them.
Nested Views
You can place another View inside a View. This is the basic way to divide the screen into regions: header, content, footer.
In nested tags, the closing order goes inside out. The innermost tag closes first.
Example: <View><Text>...</Text></View>. Here Text closes first, then View.
Practice Write nested Views
Write an App component. An outer <View> should contain a second <View>, and that should contain <Text>Hello</Text>. Closing order must be inside out.
Starter code
// Write nested Views
function App() {
return null;
}Sample solution
function App() {
return (
<View>
<View>
<Text>Hello</Text>
</View>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the tree concepts
| Term | Meaning |
|---|---|
Root |
Outermost tag |
Child |
Inner tag |
Nesting |
Forms the tree |
Closing order |
Inside out |
2 Inner View closing
<View>
<View>
<Text>Hello</Text>
____
</View><View>
<View>
<Text>Hello</Text>
</View>
</View>Explanation: The inner View closes first.
3 Which is a valid tree?
- <View><Text>Hello</View></Text>
- <View /><Text /></View>
- <View><Text>Hello<Text></View>
- <View><View><Text>Hello</Text></View></View> Correct answer
Explanation: Tags are properly nested and closed.