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

Chris Achard
InstructorChris Achard

Share this video with your friends

Send Tweet
Published a year ago
Updated 2 weeks ago

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: [0:00] 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.

[0:15] 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.