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
From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.