Join eggheadSign in
Chooce video playback speed
speed:1
  5. 5
    Building a Tree of UI Components in React with Children or with Self-closing tags
    40s

Building a Tree of UI Components in React with Children or with Self-closing tags

InstructorChris Achard

Share this video with your friends

Send Tweet

You can reuse your custom react components multiple times and build them into a tree of components like this:

<Greeting />
<div>
  <Greeting />
</div>

Notice that the <div> tag contains the Greeting tag as a child, but the Greeting tag contains no children - so it requires the trailing slash (/>) so it can be a "self closing" tag

Chris Achard: We have our custom Greeting component that we're already using down here, but we can put more than one of them here as well. If we have another <div> at a different level, for example, we can have another Greeting, and now we have two "Hello, React!"s and they're independent from each other. They're not connected in any way.

Notice how they make this tree of components and that's what we're looking for. We have parents, which contain zero or more children. This <div> is a parent of this child. If we look closely, some tags, like this <div>, have an opening and a closing tag, but <Greeting> doesn't have a closing tag. We need to put a / here to make it a self-closing tag. React requires that if we don't have a closing tag.