[00:00:01] Back to the reactor building. And this guy I want to show you another way we can implement his header component. So we didn't the wise guy that we are in the styles to this component and the way we're currently using it as a rapper a higher component in any rapper kind of way over our routes. So the way I want to do this is kind of like creating a functional component or a constant that returns a functional component. So basically when your first view is calmed down etc.. So we don't have hard crowd. And then let's create a new file or a new directory or components here. I'm going to call it HRC in here and create a new file and call it letters. Yes we have now what we want to do in here is we basically want to we basically want to do the same thing except for make it function. So pretty simple stuff. We just need to get our base kind of react coheres import React component from react and then we just need to say constant headers is equal to that of a child. This is an arrow function to child function and then we need to return across return class stands component rather then and here we obviously need to return GSX and export it explorative evolve ahead. And the reason I'm showing you how to do this is not because we're going to use it. We're actually going to switch back to the normal letter we have at the end of this guide but I want to show you this way of doing it because this is one. [00:01:53][111.2]
[00:01:53] Another way to break a component and to another way to write a higher component for that matter. So let's go ahead and get started by putting in the code the same GSX in here that we have in our headers we get the same styles because we're going to keep these styles so we have not had her and then we have headed out Jats. Let's just take our code from and our address and make sure you don't change anything in here you want to keep dodgiest saying. Just replace all of that could be GSX and add header with the dot com. Okay now with this we can call it a really different way. Rockety use that as a piece of GSX that we normally would. We're actually going to use it very similarly to the way we use the connect the connector component decorator provided by UX so I'll show you how we do that. Let's go in here and then let's go to one of our components. It's going to sign in and in here all we need to import is headers Lozzi import. I had heard from DOT slash slash Josee SLASH HEADER k. Now all we have to do is go down here to our signing here and say do something like we're doing with our Connect and. I'm a little different but pretty solid. So all you do is say I header and then Hassin sign in as a cast and the component as a parameter so our component here we're passing it in as a parameter and it's pretty straightforward with me. Once you understand it you're cooking out patterns. [00:03:35][102.2]
[00:03:35] We're in our head and I guess as we take a parameter as a child so if we were to compile app right now it actually wouldn't render our signing to bind and try and understand why. So like you see all we have is our header and the reason we don't have it is because we're not using child anywhere. We're seeing this thought process children but there is no process and there's no child. So we got the wheat that won't change a thing. Now what we need to do is instead render child as a component. So basically child in this case is our assignment because we're passing signing into our head herd as a predator. It's going in here and saying okay child the sign we want to render sign. So it's just putting our header right. But now let's get to the application and see what. Yeah okay yeah we are signing and everything's working. So that's all great but I don't want to give up this approach. I don't want to use this approach because one downside is you'll notice not only doing it or signing component we have to do it in every single component such as newsletter and support requests. Every single route because our start Jaji us. We aren't wrapping every route with our header. It's only on her assignment. So let's go ahead and uncoil our header and that was that back to our header here. You know we can just leave this we're just not going to use it. So let's go to our sign in and let's get rid of the call that I had here and then let's go up here and let's get rid of that header. The important. [00:05:16][100.4]
[00:05:19] OK. Now what we have said together we need to move on and further sign our application. The next thing I want to do in the next guide is handle this part here. It's going to be another kind of wrapper component or actually what we'll do is we'll use it the same way we just used the we just wrote that Nouhad. Because we don't want to use this and every component. So we don't want to wrap it the way we did with our header but an approach we could take is by creating it and then just wrapping it around the routes we need it to say we only did it in these four hours. We could say better or we could say like a top rate or whatever we want to call it. And then just wrap these components in it and then we get that effect only on those components. But I don't want to do that. We'll do it the way we just roll our new header. Even though we're not going to use this 900. And before we commit our code I want to point out one thing you'll notice rendering child in here and we're doing the exact same thing and not just not props the children and then in our CSX we're referencing main right. And then we're saying Each one MP these styles will actually apply to every age one MP basically in our application anything that is inside of this. Because if you go to your head or we're headed out gestures we'll be using this. [00:06:47][88.8]
[00:06:49] You'll notice that our child components such as are sign and is still inside the main hatters so a quick fix around this is just copying the dev here putting in one hour and then closing it right here and then typing this in and then getting the cost him on his parent. So the reason I'm gonna do this is because now will only be applied to these H1 IP tags and won't be applied for children components or child components. So let's go out and commit our code and then hop into the next guy to get status get out get commit and therefore commit message let's just say learned a new way to or we want to actually are like we're developing. So let's say a second way to render hundred Park and fixed HMO nothing. Yeah but she gets Let's hop into the next guy where we will get started on this component here and we will also be adding some margin to get our or actually into the into the side here. So let's go ahead and do that. I'll catch you. Nice guy. [00:06:49][0.0]
[402.7]