1
00:00:00,320 --> 00:00:00,830
All right, guys.

2
00:00:00,830 --> 00:00:05,450
So now we're going to install React Bootstrap, which is a UI library.

3
00:00:05,450 --> 00:00:12,950
And we also want to install bootstrap and we also want React icons so that we can use font awesome icons.

4
00:00:13,070 --> 00:00:13,430
All right.

5
00:00:13,430 --> 00:00:15,590
So we want to install this in the front end.

6
00:00:15,590 --> 00:00:21,800
So make sure and this is really important throughout the entire course that you're in the correct folder.

7
00:00:21,800 --> 00:00:23,930
So you can see I have two terminals open.

8
00:00:23,960 --> 00:00:26,720
This one is in the root, this one is in the front end.

9
00:00:26,720 --> 00:00:28,090
So I want the front end.

10
00:00:28,100 --> 00:00:32,930
So let's say NPM install, we want react dash.

11
00:00:33,540 --> 00:00:34,680
Bootstrap.

12
00:00:34,710 --> 00:00:36,480
We want bootstrap.

13
00:00:36,480 --> 00:00:40,890
And then I'm also going to install react dash icons.

14
00:00:41,580 --> 00:00:43,680
Again, make sure you're in the front end.

15
00:00:44,780 --> 00:00:50,480
And then what we'll do is, is for now, we'll create a header and footer.

16
00:00:50,480 --> 00:00:57,080
But before we do that, we need to go into our index.js because this is where we're going to bring in

17
00:00:57,080 --> 00:00:57,800
bootstrap.

18
00:00:57,800 --> 00:01:04,340
If you just try to use React, Bootstrap the UI library without actually importing the bootstrap CSS,

19
00:01:04,370 --> 00:01:05,900
it's not going to work correctly.

20
00:01:05,900 --> 00:01:09,470
So let's go, let's get rid of these comments.

21
00:01:09,470 --> 00:01:10,220
We don't need this.

22
00:01:10,220 --> 00:01:15,110
We don't really need report web vitals, but I'll just keep it there anyway.

23
00:01:15,110 --> 00:01:22,280
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

24
00:01:22,280 --> 00:01:25,610
import bootstrap.

25
00:01:26,770 --> 00:01:34,870
So it's going to be bootstrap slash dist slash CSS slash bootstrap min dot CSS.

26
00:01:34,900 --> 00:01:40,480
Now, this is just the default bootstrap file and that's fine if you want to use it.

27
00:01:40,480 --> 00:01:45,850
But in the next video, I'm actually going to bring in a custom bootstrap file that I created just to

28
00:01:45,850 --> 00:01:47,800
give it a little bit of a different look.

29
00:01:47,800 --> 00:01:49,510
But that's completely optional.

30
00:01:49,510 --> 00:01:51,310
You can keep this if you want.

31
00:01:51,700 --> 00:01:52,060
All right.

32
00:01:52,060 --> 00:01:53,590
So let's save that.

33
00:01:53,590 --> 00:01:58,030
And if we look at our application, let's run the dev server.

34
00:01:58,030 --> 00:01:59,980
So npm start.

35
00:02:04,300 --> 00:02:04,780
All right.

36
00:02:04,780 --> 00:02:08,620
So we should see a little bit of change.

37
00:02:09,320 --> 00:02:09,710
Yup.

38
00:02:09,710 --> 00:02:13,850
So you can see that the font has changed because now we're using bootstrap.

39
00:02:14,820 --> 00:02:17,460
Now, as far as the header, let's do that.

40
00:02:17,460 --> 00:02:23,550
So in the source folder, we're going to create a folder for our components and these will be just any

41
00:02:23,580 --> 00:02:24,870
UI components.

42
00:02:24,870 --> 00:02:30,750
We're going to have a separate folder called screens for actual pages or actual routes.

43
00:02:30,750 --> 00:02:33,750
So in components, let's create header.

44
00:02:33,780 --> 00:02:37,260
Dot JSX or JS, whichever.

45
00:02:37,290 --> 00:02:40,800
Or even TS or TSX if you're using TypeScript.

46
00:02:40,830 --> 00:02:47,070
Now, if you want to copy code like this from the main repository, you can do that or you can just

47
00:02:47,070 --> 00:02:47,580
type it out.

48
00:02:47,580 --> 00:02:50,250
I would suggest typing it out just so you get used to it.

49
00:02:50,250 --> 00:02:53,850
But we're going to create a new component called header.

50
00:02:53,850 --> 00:02:56,280
There are a couple things that I want to bring in.

51
00:02:56,280 --> 00:03:01,860
So first of all, we need a couple components from React Dasch Bootstrap.

52
00:03:02,560 --> 00:03:04,810
We're going to want the nav bar component.

53
00:03:04,810 --> 00:03:05,230
So.

54
00:03:05,230 --> 00:03:06,160
NAV bar.

55
00:03:06,820 --> 00:03:12,400
NAV and container, which are all pretty self-explanatory.

56
00:03:12,400 --> 00:03:14,440
And then from font awesome.

57
00:03:14,440 --> 00:03:18,880
I'm going to want the for shopping shopping cart.

58
00:03:20,690 --> 00:03:24,410
Icon and for a user.

59
00:03:24,410 --> 00:03:30,230
And that's going to be from react icon slash for because these are font awesome icons.

60
00:03:30,590 --> 00:03:37,220
Okay now in the header let's change the wrapper element to an actual header tag and then we're just

61
00:03:37,220 --> 00:03:39,680
going to have a bunch of nav bar components.

62
00:03:39,890 --> 00:03:41,690
There's multiple parts to it.

63
00:03:41,690 --> 00:03:43,520
So this first one.

64
00:03:45,430 --> 00:03:46,630
And I'm just.

65
00:03:46,630 --> 00:03:48,550
I'm just using GitHub copilot.

66
00:03:49,330 --> 00:03:51,590
If it gets too annoying, I'll shut it off.

67
00:03:51,610 --> 00:03:55,210
But basically what we have here is just our nav bar.

68
00:03:55,240 --> 00:03:56,440
Oops, that should be lowercase.

69
00:03:56,470 --> 00:03:58,080
B is our nav bar.

70
00:03:58,090 --> 00:04:05,920
We're passing in a bg of dark and a variant of dark expand set to large so that the hamburger menu will

71
00:04:05,920 --> 00:04:11,920
show up when we go under, you know, below large and then collapse on select.

72
00:04:11,950 --> 00:04:14,770
Now inside the nav bar, I want a container.

73
00:04:16,910 --> 00:04:17,269
Okay.

74
00:04:17,269 --> 00:04:22,880
Just so the, you know, the inner elements of the nav bar don't stretch all the way to the edges of

75
00:04:22,880 --> 00:04:26,390
the browser, and then inside that, we'll have the brand.

76
00:04:26,430 --> 00:04:31,520
Okay, So this is, I guess you could call a sub component of nav bar for the brand.

77
00:04:31,520 --> 00:04:33,890
And right now we're just using an href.

78
00:04:33,890 --> 00:04:40,730
But later on when we use React router, we need to use the link component and we'll have to change this

79
00:04:40,730 --> 00:04:41,750
up a little bit.

80
00:04:41,840 --> 00:04:43,220
So that's the brand.

81
00:04:43,220 --> 00:04:44,700
Just saying pro shop.

82
00:04:44,720 --> 00:04:46,160
Then we want the toggle.

83
00:04:46,160 --> 00:04:48,500
So it's going to be nav bar dot toggle.

84
00:04:48,500 --> 00:04:55,040
Make sure you make the T uppercase and just passing in our Aria controls and then underneath that we'll

85
00:04:55,040 --> 00:04:58,470
have the collapse which is going to wrap everything else.

86
00:04:58,490 --> 00:05:00,500
So we want to close that.

87
00:05:01,580 --> 00:05:02,020
Okay.

88
00:05:02,030 --> 00:05:05,450
Now in the collapse, we're going to have the actual nav tag.

89
00:05:05,450 --> 00:05:08,000
So NAV will give it a class name.

90
00:05:09,230 --> 00:05:09,670
Okay.

91
00:05:09,680 --> 00:05:13,250
Now, the class name by default is if you're using GitHub.

92
00:05:13,250 --> 00:05:14,930
Copilot is M auto.

93
00:05:14,960 --> 00:05:16,530
We're going to change that to M.

94
00:05:16,530 --> 00:05:22,830
S auto and that's going to align the links to the right rather than the left next to the logo.

95
00:05:23,130 --> 00:05:23,490
Okay.

96
00:05:23,490 --> 00:05:26,010
And then we want our actual links for that.

97
00:05:26,010 --> 00:05:32,850
We do nav dot link and then an RF later on when we implement React router, we're going to need to use

98
00:05:32,850 --> 00:05:33,750
the link component.

99
00:05:33,750 --> 00:05:35,430
So we have to change this up a little bit.

100
00:05:35,430 --> 00:05:39,030
But for now we'll just use the nav link RF to Cart.

101
00:05:39,060 --> 00:05:41,940
We have the shopping cart icon and text.

102
00:05:42,180 --> 00:05:42,570
Okay.

103
00:05:42,570 --> 00:05:45,270
And then underneath that we're going to have our login.

104
00:05:45,270 --> 00:05:51,540
So that's going to go to slash login for user icon and sign in for the text and that should do it.

105
00:05:51,540 --> 00:05:52,770
So we'll save that.

106
00:05:52,770 --> 00:05:58,050
And then we're going to jump into our App.js and let's bring in.

107
00:05:59,370 --> 00:06:01,320
So we're going to bring in the header.

108
00:06:01,560 --> 00:06:05,430
Now, there are a couple things I want to do as far as formatting this as well.

109
00:06:05,430 --> 00:06:14,190
I want to use a container, so I'm going to import the container from React Bootstrap and let's make

110
00:06:14,190 --> 00:06:17,100
the the outer element in the return.

111
00:06:18,120 --> 00:06:19,170
Let's see.

112
00:06:21,980 --> 00:06:23,060
Yeah, let's.

113
00:06:23,090 --> 00:06:25,100
Let's just put parentheses.

114
00:06:26,060 --> 00:06:27,680
Around this.

115
00:06:28,240 --> 00:06:31,510
And we'll make the outer element just a fragment.

116
00:06:33,100 --> 00:06:33,730
Okay.

117
00:06:33,730 --> 00:06:35,290
So we want to close that.

118
00:06:36,110 --> 00:06:43,910
And then let's go right here, put our header and then I want to actually do a main tag.

119
00:06:44,030 --> 00:06:47,510
And it looks like copilot knows exactly what I'm doing.

120
00:06:48,210 --> 00:06:53,250
So we have a main tag class name of pi three that's just padding on the y axis.

121
00:06:53,250 --> 00:06:54,570
So top and bottom.

122
00:06:54,570 --> 00:07:02,940
And then inside the main we'll have our container and that's going to wrap around for now, just the

123
00:07:02,940 --> 00:07:04,620
H one that we have here.

124
00:07:06,260 --> 00:07:06,560
All right.

125
00:07:06,560 --> 00:07:12,650
So if I save that, you can see since the browser is small, we have the hamburger menu which works.

126
00:07:12,650 --> 00:07:18,530
And then if we make this larger, so if we go past the LG spot, which is right here, that's the breakpoint,

127
00:07:18,530 --> 00:07:20,870
then we get the cart and sign in.

128
00:07:21,080 --> 00:07:21,470
All right.

129
00:07:21,470 --> 00:07:27,500
If you wanted to have the if you didn't want the hamburger menu to show until it's smaller, what you

130
00:07:27,500 --> 00:07:30,320
could do is in header, you could change.

131
00:07:31,280 --> 00:07:33,830
Let's see right here expand.

132
00:07:33,830 --> 00:07:35,510
You could change that to MD.

133
00:07:35,870 --> 00:07:41,090
If I save now, it's not going to show the hamburger menu until you go smaller.

134
00:07:41,090 --> 00:07:42,950
So that's the MD Breakpoint.

135
00:07:42,950 --> 00:07:45,620
So it's really up to you on stuff like that.

136
00:07:45,620 --> 00:07:47,180
But I'm going to keep it at LG.

137
00:07:49,360 --> 00:07:50,230
Actually, you know what?

138
00:07:50,230 --> 00:07:52,990
Let's keep it at MD unless I need to change it.

139
00:07:53,950 --> 00:07:55,840
Just so we can see the links.

140
00:07:56,080 --> 00:07:56,530
All right.

141
00:07:56,560 --> 00:08:00,970
Now, what we'll do is create the footer, which is going to be really simple.

142
00:08:00,970 --> 00:08:08,400
So in components, let's create footer dot JS X and we'll say Ra fc.

143
00:08:09,490 --> 00:08:13,330
And I'm going to bring in just a couple things from React Bootstrap.

144
00:08:14,200 --> 00:08:15,610
So I want to bring in.

145
00:08:16,560 --> 00:08:21,330
Container I want to bring in row and call.

146
00:08:22,240 --> 00:08:22,720
Okay.

147
00:08:22,720 --> 00:08:28,680
And instead I'm going to have just a copyright that says the year, but instead of actually just hard

148
00:08:28,690 --> 00:08:32,710
coding the year, we're going to get it using the date JavaScript date object.

149
00:08:32,710 --> 00:08:39,730
So let's say const current year and set that to new date and then get full year.

150
00:08:39,760 --> 00:08:41,440
And let's come down here.

151
00:08:41,440 --> 00:08:43,179
We're going to wrap this.

152
00:08:44,140 --> 00:08:47,290
Everything is going to be wrapped in a footer tag.

153
00:08:47,320 --> 00:08:51,430
Get rid of this text and then let's do our container.

154
00:08:52,860 --> 00:08:54,930
And then we'll have our row.

155
00:08:55,110 --> 00:08:55,670
Whoops.

156
00:08:56,370 --> 00:08:58,440
We want our row.

157
00:08:59,290 --> 00:09:01,330
And then let's do a column.

158
00:09:03,530 --> 00:09:05,690
And we're going to end that.

159
00:09:06,140 --> 00:09:12,200
Okay, So the column just has a class name of text center, obviously to center the text and then padding

160
00:09:12,200 --> 00:09:13,580
on the y axis.

161
00:09:13,580 --> 00:09:22,910
And then inside that, we're going to have a paragraph and let's say pro shop, ampersand, copy, semicolon,

162
00:09:22,910 --> 00:09:24,560
that'll give me the copy symbol.

163
00:09:24,560 --> 00:09:27,440
And then this is where we want to put the current year.

164
00:09:29,240 --> 00:09:30,290
So that's our footer.

165
00:09:30,290 --> 00:09:32,410
Let's bring it into App.js.

166
00:09:32,420 --> 00:09:37,070
So import footer and we're going to put that.

167
00:09:38,860 --> 00:09:41,230
Right below the ending main tag.

168
00:09:41,290 --> 00:09:42,820
So we'll save that.

169
00:09:42,820 --> 00:09:45,580
And now we have pro shop at.

170
00:09:45,790 --> 00:09:47,710
Copyright 2023.

171
00:09:48,880 --> 00:09:51,370
So that's the header and footer we brought in.

172
00:09:51,400 --> 00:09:53,050
We're using React Bootstrap.

173
00:09:53,050 --> 00:09:58,300
In the next video, I'm just going to bring in the custom bootstrap file CSS file that I created.

174
00:09:58,300 --> 00:09:59,710
It's completely optional.

175
00:09:59,710 --> 00:10:02,680
I just think this looks very, very bootstrap y'all.

176
00:10:02,680 --> 00:10:02,920
Right?

177
00:10:02,920 --> 00:10:04,840
So I'm going to change that up a little bit.