Complete React Tutorial (& Redux) #12 - Nesting Components

Key Takeaways

all right there so we have our react app up and running but the minute we're only showing this one component this is the only component being rendered to the Dom and that is the app.js file right here this component and this is known as a root component in react and a root component is the mother of all components that sits at the top of our application structure so typically react apps have one root component which is always rendered to the Dom and in our case that is app KS here it sits at the top of the tree now every time someone visits our application this root component is rendered then if we want to show different components then we can nest them inside that root component and we could switch these components in and out dependent on the user's behavior on the website now when a component sits inside another component like that we say that that component is nested in it the navbar component is nested inside the app component so let's have a look in the code exactly how we can nest a component all right then so what I'd like to do is create a new component and then nest that component inside this routes app component right here so first of all let's create a file for that new component in source I'm going to call this ninja's dot j s and we want to create our new component in this file but first of all let's just have a look at how this component was created very similar to how we created them in the first few lessons we're saying here class up extends component now before when we created them we said react component when we just added the react library into the HTML file but we don't need to do that anymore because what we're doing at the top here is we're importing react but also component from the react library as well so we can just say class up extends component because of that import and that's going to do exactly the same thing so first of all let's copy this import right here whenever we create a class-based component we're going to need to import these two things react and component all right so then down here let us create that class-based component I'm going to call this ninjas and it's extends components like so okay so inside we need that render method and that render method returns a JSX template so I'll do a div first of all and give this a class name of ninja and let's do that again okay that works and inside another series of divs one for the name one for the age and one for the belt so first of all a div for the name the name is going to be Ryu and then after that we'll do another div this one for the age so age is going to be thirty and then finally one for the belt colors of div and then belt is going to be black like so all right so we've created that class now we need to export it because we want to import it into this component and then nest it so at the bottom export default and then ninja's which is the name of that class so now we've created the component and we've exported it at the bottom so what we could do is import that component into this file and then we can nest that component inside this template so let's import it first of all it's called ninjas so we'll import ninjas from and then in quotations its dot forward slash that means this current directory since but in the same directory right here then the name of the file which is ninjas the import is clever enough to figure that out okay so we've imported that component now we can nest it inside this component but how do we do that what do we do to be just right ninjas like that well no but it's pretty simple we just need ninjas in a tag like so we output it as if it was an HTML element exactly as we write it right here self closing as well okay so now that is going to take the template from this component and it's going to nest it right here like so so if we save that we should see it on at the screen we see that component right here is nested inside the root component and it's being rendered now to the Dom okay cool so that's how we nest I can ponen but why did we need to do that in the first place why did we need a new component to nest why couldn't we have just added all of that code directly here instead well the idea of different components is that we're keeping our code more modular and that component ninjas jeaious it may have its own states and methods at some point which we don't want to muddle up with the states on methods of this component and also if we wanted to we could reuse this component and nestea in different places later on as well so that's how we nest the component now it would be nice to make the content inside this component more dynamic and not just hard-coded like with that so to do that we'll use props and I'll explain those in the very next video