From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

How the component tree structure in React works and nested components

How the component tree structure in React works and nested components

Now, you can have components inside of components. A header component is pretty small level, but imagine a homepage component that has a header in it, and has a login information, button component, and cool animation component, and whatever. Now, what you should see is, wait a minute, you can have a larger component and then smaller components in that component, and that would be nested components. We're talking about a homepage, how would that actually look? Well, we could write another function and we're going to use uppercase because now we know to use uppercase homepage like this. And we can return for now just an empty div. So we're going to just return. And this is JSX, right? And now we're able to do this because we have our script running. And you know what, it's good form, even with JSX to end our expressions, because it's still a JavaScript return expression. So we're still going to end them properly. And let me ask you you this. How could you actually now nest the header…

Contents