Building a Tree of UI Components in React with Children or with Self-closing tags
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.