1
00:00:00,690 --> 00:00:03,640
We are going to use bootstrap CSX for styling this project.

2
00:00:03,730 --> 00:00:09,140
So in this video we're going to focus on installing bootstrap and then wiring it up to our project bootstrap

3
00:00:09,140 --> 00:00:10,870
is a global CSX file.

4
00:00:10,880 --> 00:00:15,830
In other words it contains some CSX that is meant to be applied to our entire application and all the

5
00:00:15,830 --> 00:00:17,510
different pages inside of it.

6
00:00:17,630 --> 00:00:21,860
The little CSX files have to be wired up to next to us in a very particular fashion.

7
00:00:21,860 --> 00:00:25,940
So the code we're about we're about to write is going to look just a little bit strange but trust me

8
00:00:25,940 --> 00:00:28,580
is the way that we are supposed to do it with Next j us.

9
00:00:28,610 --> 00:00:29,880
So let's get to it.

10
00:00:29,900 --> 00:00:32,220
I'm going to find that Pages directory inside there.

11
00:00:32,220 --> 00:00:36,480
I'm going to make a new file called underscore app dot J.S..

12
00:00:36,560 --> 00:00:39,000
It's very critical that you named this file identical.

13
00:00:39,020 --> 00:00:42,670
Make sure you have underscore at DOT J.S. at the very top.

14
00:00:42,680 --> 00:00:53,540
We are going to import bootstraps USS so to write out imports bootstrap dissed USS bootstrap dot CSX.

15
00:00:53,580 --> 00:00:57,030
Now we have not installed bootstrap as an empty module just yet.

16
00:00:57,240 --> 00:00:59,400
And this line right here is assuming that we have.

17
00:00:59,510 --> 00:01:03,930
So we are going to go back over to our terminal in just a little bit and install bootstrap until we

18
00:01:03,930 --> 00:01:05,040
do this right here.

19
00:01:05,040 --> 00:01:08,620
This airport is not going to work correctly after that.

20
00:01:08,620 --> 00:01:11,830
Inside this file we're gonna start to write out a little bit a strange code.

21
00:01:11,830 --> 00:01:14,850
Let's just write it out and I'll tell you what it is doing.

22
00:01:15,060 --> 00:01:18,410
So we're gonna write out expert defaults.

23
00:01:18,600 --> 00:01:21,020
We're going to export a react component.

24
00:01:21,150 --> 00:01:25,620
This component is going to receive a props object that has two properties inside of it that we care

25
00:01:25,620 --> 00:01:26,750
about inside of here.

26
00:01:26,910 --> 00:01:32,740
So I can do a little bit of dy structuring and pull out component and Page props.

27
00:01:32,940 --> 00:01:39,240
Now as usual it is critical that you capitalize the C on component and have identical spelling and capitalization

28
00:01:39,300 --> 00:01:41,270
on page props as well.

29
00:01:41,570 --> 00:01:49,360
We are then going to return component and spread over page props.

30
00:01:49,500 --> 00:01:51,290
So what's going on right here.

31
00:01:51,300 --> 00:01:56,550
Well behind the scenes whenever you try to navigate to some distinct page with next J us next is going

32
00:01:56,550 --> 00:02:01,310
to import your component from one these different files in our case either index out J us or banana

33
00:02:01,320 --> 00:02:05,930
j ust next does not just take your component and show it on the screen.

34
00:02:05,930 --> 00:02:12,100
However instead it wraps it up inside of its own custom default component then that is referred to inside

35
00:02:12,120 --> 00:02:18,190
next to us as the app what we've done here by defining this underscore Abdul J.S. vile is we have defined

36
00:02:18,220 --> 00:02:25,030
our own custom app component so whenever we try to visit our banana root inside the browser or our root

37
00:02:25,040 --> 00:02:31,360
route which would show our index not a US component next to us is going to import that given component

38
00:02:31,960 --> 00:02:38,190
and it's going to pass it into this app component right here as this component prop so compound right

39
00:02:38,200 --> 00:02:43,570
there is going to be equal to either our banana component or the index component and then page props

40
00:02:43,630 --> 00:02:48,850
are gonna be the set of components that we had been intending to pass to either banana or index.

41
00:02:48,850 --> 00:02:53,350
So long story short this thing is kind of like a thin wrapper around the component that we're trying

42
00:02:53,350 --> 00:02:55,090
to show on the screen.

43
00:02:55,090 --> 00:02:56,980
Why do we have to define this at all.

44
00:02:56,980 --> 00:03:02,830
Well if we ever want to include some global sea in our project which bootstrap is we can only import

45
00:03:02,830 --> 00:03:06,750
global sea assets into this app file.

46
00:03:06,940 --> 00:03:11,350
It turns out that as we start to try to visit some other components or other pages like let's say we

47
00:03:11,350 --> 00:03:17,680
go to banana J.S. or the banana roots if we go to banana next is not going to load up or even pass that

48
00:03:17,710 --> 00:03:19,320
index file.

49
00:03:19,320 --> 00:03:24,690
So any CSF we had imported inside there would be not included inside of our final a nail file.

50
00:03:25,480 --> 00:03:30,190
So if we have any global sea assets that must be included on every single page it has to be imported

51
00:03:30,190 --> 00:03:35,080
into this app file because this is the only file that we are guaranteed to load up every single time

52
00:03:35,140 --> 00:03:37,400
a user comes to our application.

53
00:03:37,410 --> 00:03:42,850
OK so let's say this and then remember this is not going to work correctly until we actually install

54
00:03:42,850 --> 00:03:44,120
bootstrap CFS.

55
00:03:44,230 --> 00:03:49,040
So let's go over to our terminal and install it right now.

56
00:03:49,110 --> 00:03:54,030
I'm going to go into my client directory and I'll run npm install bootstrap

57
00:03:58,070 --> 00:03:59,510
and there we go.

58
00:03:59,570 --> 00:04:05,950
Now when we install bootstrap remember we are adding something to our package not JS on file scaffold

59
00:04:05,950 --> 00:04:09,070
does not sync changes to that package not just on file.

60
00:04:09,070 --> 00:04:13,540
Instead anytime scaffold detects a change to it it's going to attempt to rebuild the image.

61
00:04:13,570 --> 00:04:16,750
So if you now go back over to your window that is running scaffold.

62
00:04:16,750 --> 00:04:21,700
Chances are you're going to see next to us trying to rebuild your client image.

63
00:04:21,720 --> 00:04:22,410
It looks like minded.

64
00:04:22,420 --> 00:04:29,340
So right here now we should in theory be able to go back over to our browser reload the page and see

65
00:04:29,340 --> 00:04:29,830
bootstraps.

66
00:04:29,840 --> 00:04:31,210
Yes that's kicking it.

67
00:04:31,290 --> 00:04:35,970
So if I refresh the page I will notice now that landing page right here is a distinctly different font

68
00:04:36,000 --> 00:04:37,600
than what it was before.

69
00:04:37,600 --> 00:04:41,560
So that means that bootstrap is has been successfully loaded up.

70
00:04:41,750 --> 00:04:46,910
By the way if you want to read more about this CSX global thing and why it exists you can take a look

71
00:04:46,910 --> 00:04:48,680
at this you your l right here.

72
00:04:48,800 --> 00:04:51,950
I'm not going to list the whole thing out but if you want to feel free to pause the video and we'll

73
00:04:51,950 --> 00:04:57,110
give you a little bit more of a definition or explanation of why we had to do this inside this app file

74
00:04:57,380 --> 00:05:02,640
and you can also take a look at some documentation around that custom app component as well.

75
00:05:02,640 --> 00:05:02,910
All right.

76
00:05:02,940 --> 00:05:03,750
So it looks good.

77
00:05:03,750 --> 00:05:07,260
Let's take a quick pause right here when we continue the next video we're gonna start putting together

78
00:05:07,350 --> 00:05:09,150
our sign up and sign forms.