With our ReACT rotor complete we can start working on rest of the straight forward parts of our app
and the straightforward parts that I'm talking about is going to be the number or the header.
Then we're also going to set up a hero component in the home page.
We're also going to do the about page as well as the aero page.
So let's get those things out of the way and then we can start working on the context and all of the
more difficult stuff.
Now I'm gonna head over back to my app and then within the app just first I'm gonna import the header
so the header is going to be where we're gonna have the number.
Again if you're looking at components you're gonna have the heterogeneous with just a simple hello from
header and first I would like to imported in the app drawer yes.
So I'm gonna head over where I have the pages and run after the pages.
I had a comment that by the way was misspelled name.
So I was hoping you would correct me but you didn't so this should be components.
Then we are importing a header header from and then of course we're looking for the header folder or
I'm sorry not a header over components folder and then we're looking for our header component and then
if we would want to render let's say now BAA in all of our pages we just need to place it within the
router so outside of the switch but still within the router we're going to place our header component
so I'm going to say header and then you're gonna notice that each and every page you're navigating to
you're gonna have the header which currently just has a dumb heading one with a hello from header but
eventually that is going to be the number and of course that's what we're looking for because each and
every page would navigate to I would still want to have my number.
Now once we have imported within the app just we're going to head over back to heterogeneous and then
within the header James we would need to import a link.
So in order to navigate around our project we're gonna have to use a link component that is coming from
you guessed it react a router down and then for the time being we're not going to do any more imports
later on there's gonna be user and all that but for the time being we're just going to leave it the
way it is.
And I'm also gonna change around my return so I'm not going to return a damn having one.
Instead we're going to return a header and then this particular header is also gonna have a glass offender.
So who would want to add a class name and just type the proper prob and then we just type in header
and then within a header First I would like to place my logo somewhere have the I am G and we're gonna
have to import our logo from our assets.
So let's go with the import and get a name it logo and that is coming from the assets folder.
So within the assets you're going to find a logo SPG and let's just place that logo.
So let's write logo online for alternative.
I don't know I'm just gonna say a vintage vintage vintage TEC logo.
Let's save it and let's see how do we have of course our logo.
Awesome.
Now for the logo I'm going to add also a class name just so it's now not so massive.
So the class name is going to be logo and of course now it's gonna be smaller.
I would also like to point out that in fact if something doesn't look exactly the same when your computer
is mine.
Well one of the reasons could be the fact that I have massively zoomed in just so you can see it better.
So I am at two hundred and fifty.
So in your case probably this is going to look much smaller.
So this is going to look something like that.
But again I think that it's a little bit more useful if you can see it more clear of what is happening
in my browser.
That's the reason why I have zoomed in and then right after the image we're going to set up our NAV
bar.
So we're gonna have a nav element and then within the NAV element we're going to have a U L so on our
list and then there's gonna be two divs and these two divs are just for the styling purposes more specifically
for the layout purposes.
So we're going to have a div and then within the first div there's gonna be few list items and then
there's also gonna be the other day with more list items.
So let me just create these two divs first and then within the first div we're gonna place the home
about product and then the second one is gonna have this log in and cart and the way we set up the links
is we're going to first have a list item and then we're going to have our link component and linked
component has a prop so instead of having a link with an eye trip we in fact have a link component and
then this component has the true bump and then we specifically say where we would want to navigate.
So if this link is gonna be pointing towards the homepage then of course two needs to match to wherever
you are all we had for the homepage.
So if the path the home page was forward slash and you would want to direct a link to our home page
course you'd need to make sure that both of these strings match.
So for the home page this is just going to be a forward slash and that I'm gonna type in whatever text
out of one for my home.
Now I have my first line.
So let me copy and paste it one too and then we're just going to turn this around where second one is
gonna be about third one is going to be products and we're going to do the same thing with the names
about a Zen product.
So those are our first real links.
We're gonna save it and then of course we're gonna work with our log in as well as the card.
So the second one is going to be logging in card.
Let's see whether I have zoomed in.
Yep.
I still have hundreds 50.
Everything's fine so let's go with Ally again in this case.
We are showing a link component link and of course we're going to navigate through a log page so forward
slash log in and then the text is also going to be logging.
Let me copy and paste the allies and we're going to do the same thing for the card.
So we're going to have the card as well as the text is going to be card as a side note if I have links
in multiple places in the project which currently we don't.
And in this project in fact we're not going to have links in multiple places.
I do like to have this info set up somewhere as a separate data.
So that way I can loop over and lets say I can display it within that bar as well as the footer.
And that way if I need to let's say change the path or the text I can do it in one place.
So this is not probably the best case scenario where we're just hard coding but since we are just using
in one place I mean we're just going to go with it.
But again normally if you have links in multiple places it does make sense to set it up somewhere as
a separate data and then just loop over it as an array.
My guess I didn't do it but if you let's say would want to do that.
That's definitely one of the options that you can have.
And now we're going to head over to a bigger browser window which is going to test it out.
So if I'm going to head over to a home page and a half hello from our bridge can navigate to about page
and have about page and the products there and also log in as well as the car.
And if we're going to test it out she'd still have the error page.
So let's navigate to the hello and of course this is going to be on our Web page and you can see that
every time we navigating to a different page we still have the Navarre as well as the logo.
And of course that was our goal.
So everything worked out really well.
And now we can start working on our next component.