All right, guys.
So now we're going to install React Bootstrap, which is a UI library.
And we also want to install bootstrap and we also want React icons so that we can use font awesome icons.
All right.
So we want to install this in the front end.
So make sure and this is really important throughout the entire course that you're in the correct folder.
So you can see I have two terminals open.
This one is in the root, this one is in the front end.
So I want the front end.
So let's say NPM install, we want react dash.
Bootstrap.
We want bootstrap.
And then I'm also going to install react dash icons.
Again, make sure you're in the front end.
And then what we'll do is, is for now, we'll create a header and footer.
But before we do that, we need to go into our index.js because this is where we're going to bring in
bootstrap.
If you just try to use React, Bootstrap the UI library without actually importing the bootstrap CSS,
it's not going to work correctly.
So let's go, let's get rid of these comments.
We don't need this.
We don't really need report web vitals, but I'll just keep it there anyway.
But I do want to bring in let's see, we'll go right above where we brought in index CSS and let's say
import bootstrap.
So it's going to be bootstrap slash dist slash CSS slash bootstrap min dot CSS.
Now, this is just the default bootstrap file and that's fine if you want to use it.
But in the next video, I'm actually going to bring in a custom bootstrap file that I created just to
give it a little bit of a different look.
But that's completely optional.
You can keep this if you want.
All right.
So let's save that.
And if we look at our application, let's run the dev server.
So npm start.
All right.
So we should see a little bit of change.
Yup.
So you can see that the font has changed because now we're using bootstrap.
Now, as far as the header, let's do that.
So in the source folder, we're going to create a folder for our components and these will be just any
UI components.
We're going to have a separate folder called screens for actual pages or actual routes.
So in components, let's create header.
Dot JSX or JS, whichever.
Or even TS or TSX if you're using TypeScript.
Now, if you want to copy code like this from the main repository, you can do that or you can just
type it out.
I would suggest typing it out just so you get used to it.
But we're going to create a new component called header.
There are a couple things that I want to bring in.
So first of all, we need a couple components from React Dasch Bootstrap.
We're going to want the nav bar component.
So.
NAV bar.
NAV and container, which are all pretty self-explanatory.
And then from font awesome.
I'm going to want the for shopping shopping cart.
Icon and for a user.
And that's going to be from react icon slash for because these are font awesome icons.
Okay now in the header let's change the wrapper element to an actual header tag and then we're just
going to have a bunch of nav bar components.
There's multiple parts to it.
So this first one.
And I'm just.
I'm just using GitHub copilot.
If it gets too annoying, I'll shut it off.
But basically what we have here is just our nav bar.
Oops, that should be lowercase.
B is our nav bar.
We're passing in a bg of dark and a variant of dark expand set to large so that the hamburger menu will
show up when we go under, you know, below large and then collapse on select.
Now inside the nav bar, I want a container.
Okay.
Just so the, you know, the inner elements of the nav bar don't stretch all the way to the edges of
the browser, and then inside that, we'll have the brand.
Okay, So this is, I guess you could call a sub component of nav bar for the brand.
And right now we're just using an href.
But later on when we use React router, we need to use the link component and we'll have to change this
up a little bit.
So that's the brand.
Just saying pro shop.
Then we want the toggle.
So it's going to be nav bar dot toggle.
Make sure you make the T uppercase and just passing in our Aria controls and then underneath that we'll
have the collapse which is going to wrap everything else.
So we want to close that.
Okay.
Now in the collapse, we're going to have the actual nav tag.
So NAV will give it a class name.
Okay.
Now, the class name by default is if you're using GitHub.
Copilot is M auto.
We're going to change that to M.
S auto and that's going to align the links to the right rather than the left next to the logo.
Okay.
And then we want our actual links for that.
We do nav dot link and then an RF later on when we implement React router, we're going to need to use
the link component.
So we have to change this up a little bit.
But for now we'll just use the nav link RF to Cart.
We have the shopping cart icon and text.
Okay.
And then underneath that we're going to have our login.
So that's going to go to slash login for user icon and sign in for the text and that should do it.
So we'll save that.
And then we're going to jump into our App.js and let's bring in.
So we're going to bring in the header.
Now, there are a couple things I want to do as far as formatting this as well.
I want to use a container, so I'm going to import the container from React Bootstrap and let's make
the the outer element in the return.
Let's see.
Yeah, let's.
Let's just put parentheses.
Around this.
And we'll make the outer element just a fragment.
Okay.
So we want to close that.
And then let's go right here, put our header and then I want to actually do a main tag.
And it looks like copilot knows exactly what I'm doing.
So we have a main tag class name of pi three that's just padding on the y axis.
So top and bottom.
And then inside the main we'll have our container and that's going to wrap around for now, just the
H one that we have here.
All right.
So if I save that, you can see since the browser is small, we have the hamburger menu which works.
And then if we make this larger, so if we go past the LG spot, which is right here, that's the breakpoint,
then we get the cart and sign in.
All right.
If you wanted to have the if you didn't want the hamburger menu to show until it's smaller, what you
could do is in header, you could change.
Let's see right here expand.
You could change that to MD.
If I save now, it's not going to show the hamburger menu until you go smaller.
So that's the MD Breakpoint.
So it's really up to you on stuff like that.
But I'm going to keep it at LG.
Actually, you know what?
Let's keep it at MD unless I need to change it.
Just so we can see the links.
All right.
Now, what we'll do is create the footer, which is going to be really simple.
So in components, let's create footer dot JS X and we'll say Ra fc.
And I'm going to bring in just a couple things from React Bootstrap.
So I want to bring in.
Container I want to bring in row and call.
Okay.
And instead I'm going to have just a copyright that says the year, but instead of actually just hard
coding the year, we're going to get it using the date JavaScript date object.
So let's say const current year and set that to new date and then get full year.
And let's come down here.
We're going to wrap this.
Everything is going to be wrapped in a footer tag.
Get rid of this text and then let's do our container.
And then we'll have our row.
Whoops.
We want our row.
And then let's do a column.
And we're going to end that.
Okay, So the column just has a class name of text center, obviously to center the text and then padding
on the y axis.
And then inside that, we're going to have a paragraph and let's say pro shop, ampersand, copy, semicolon,
that'll give me the copy symbol.
And then this is where we want to put the current year.
So that's our footer.
Let's bring it into App.js.
So import footer and we're going to put that.
Right below the ending main tag.
So we'll save that.
And now we have pro shop at.
Copyright 2023.
So that's the header and footer we brought in.
We're using React Bootstrap.
In the next video, I'm just going to bring in the custom bootstrap file CSS file that I created.
It's completely optional.
I just think this looks very, very bootstrap y'all.
Right?
So I'm going to change that up a little bit.