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.