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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!