Component tree

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.

Exercise 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.

Show example solution

function App() {
  return (
    <View>
      <View>
        <Text>Hello</Text>
      </View>
    </View>
  );
}

Test yourself

Match the tree concepts

Root

Outermost tag
Child

Inner tag
Nesting

Forms the tree
Closing order

Inside out

Inner View closing

<View>
  <View>
    <Text>Hello</Text>
  ____
</View>

Show answer

<View>
  <View>
    <Text>Hello</Text>
  </View>
</View>

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>
Show answer

<View><View><Text>Hello</Text></View></View> — Tags are properly nested and closed.

Next lesson: Self-closing

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies