1
00:00:00,820 --> 00:00:04,750
In the last video we did a little bit of setup in our application and now we're ready to start learning

2
00:00:04,780 --> 00:00:07,480
about navigation to get started with navigation.

3
00:00:07,480 --> 00:00:10,640
We're going to install a dependency called re-act router.

4
00:00:11,050 --> 00:00:14,440
We're going to first install this dependency from our terminal and we'll will very quickly start talking

5
00:00:14,440 --> 00:00:16,960
about exactly what it does at my terminal.

6
00:00:16,960 --> 00:00:22,420
I'm going to stop my running server with Control-C and then I will install re-act router with NPM install

7
00:00:22,670 --> 00:00:25,890
the dash save re-act router Dom.

8
00:00:25,900 --> 00:00:27,270
Now this is really important.

9
00:00:27,280 --> 00:00:31,240
Make sure you get the dash dom on there right.

10
00:00:31,240 --> 00:00:32,440
So I'm going to hit enter.

11
00:00:32,450 --> 00:00:36,250
I'm going to go through the installation process and while that's going I first want to tell you a little

12
00:00:36,250 --> 00:00:41,080
bit about why we just installed something called react rather dumb as opposed to something called re-act

13
00:00:41,080 --> 00:00:43,470
router which you might have expected.

14
00:00:43,470 --> 00:00:49,650
All right so a quick diagram over here so in of the re-act router family of libraries there's a couple

15
00:00:49,650 --> 00:00:55,230
of different dependencies that you could possibly install now you will very commonly make a typo or

16
00:00:55,230 --> 00:00:56,160
at least do.

17
00:00:56,280 --> 00:01:01,110
I very frequently personally always accidentally install the re-act router library but it turns out

18
00:01:01,170 --> 00:01:04,750
we never actually want to install re-act router by itself.

19
00:01:04,850 --> 00:01:11,610
The re-act router library as it is published on NPM is the core library of everything inside the reactor.

20
00:01:11,640 --> 00:01:12,870
General project.

21
00:01:13,140 --> 00:01:17,650
So this library right here has some Kord navigation logic inside of it.

22
00:01:17,700 --> 00:01:23,240
It decides how to work with re-act how to change content out depending upon some different rules and

23
00:01:23,280 --> 00:01:29,580
some other low level logic to get an actual implementation of re-act router that works inside of specifically

24
00:01:29,640 --> 00:01:30,670
the browser.

25
00:01:30,810 --> 00:01:35,580
We install the package re-act router Dom and that's what we just installed two seconds ago.

26
00:01:35,580 --> 00:01:40,200
So any time that you want to use re-act router on a project to handle navigation as we are about to

27
00:01:40,200 --> 00:01:45,390
do you're always going to be installing this project called re-act router dumb and you are not going

28
00:01:45,390 --> 00:01:50,490
to install re-act router now just so you know there are some other very similarly named projects you

29
00:01:50,490 --> 00:01:52,560
might think that you need as well.

30
00:01:52,620 --> 00:01:54,860
There's another one called re-act router native.

31
00:01:55,050 --> 00:01:59,540
This is a routing library for use in sight of re-act native projects.

32
00:01:59,640 --> 00:02:05,310
In our case for what we're doing inside this course we're making web applications so we make use of

33
00:02:05,340 --> 00:02:06,460
re-act router Dom.

34
00:02:06,750 --> 00:02:13,800
We are not making native mobile apps re-act router native right here is for native mobile applications

35
00:02:13,920 --> 00:02:17,400
so it's not appropriate for anything that we are doing inside the browser.

36
00:02:17,640 --> 00:02:20,460
If you're making an application it's going to run inside the browser.

37
00:02:20,550 --> 00:02:23,540
You always want re-act Rotterdam as opposed to react native.

38
00:02:23,550 --> 00:02:26,810
You usually don't want re-act native unless you really know you do.

39
00:02:26,850 --> 00:02:30,990
Now finally there's one other package that you might really think is relevant to what we're doing is

40
00:02:30,990 --> 00:02:33,350
called re-act router redux.

41
00:02:33,390 --> 00:02:38,190
This is a library that is very similar to the reacts redux library that we've been using in our past

42
00:02:38,190 --> 00:02:39,570
few applications.

43
00:02:39,570 --> 00:02:44,760
It is essentially a compatibility layer to get re-act router and redux to play along with each other

44
00:02:44,820 --> 00:02:46,140
very nicely.

45
00:02:46,140 --> 00:02:50,700
Now in this course you and I are not going to make use of re-act router redux So we are not going to

46
00:02:50,700 --> 00:02:52,220
use this library right here.

47
00:02:52,260 --> 00:02:57,710
It is 100 percent not necessary and in general I personally recommend that you do not use it.

48
00:02:57,720 --> 00:03:03,150
In fact even the authors of reactor ordered themselves inside the official documentation do not recommend

49
00:03:03,180 --> 00:03:07,260
that you tried to keep track of stuff in site of redux related to navigation.

50
00:03:07,500 --> 00:03:10,500
So this is more of a if you really think you need it.

51
00:03:10,500 --> 00:03:15,780
You can go and try it but in general it's better to just kind of even ignore that it exists.

52
00:03:16,260 --> 00:03:18,120
Ok so I can flip back over to my terminal.

53
00:03:18,120 --> 00:03:22,680
It looks like I successfully installed re-act router dom so I going to start my project back up with

54
00:03:22,710 --> 00:03:29,690
NPM start and then after I get that back up I'm going to flip back over to my code editor then at the

55
00:03:29,690 --> 00:03:30,640
top of this file.

56
00:03:30,650 --> 00:03:36,110
I'm going to import a couple of different properties or different things from this re-act Rotterdam

57
00:03:36,170 --> 00:03:37,020
library.

58
00:03:37,130 --> 00:03:46,400
So underneath my import re-act I'll say import browser router and route from re-act router Dom.

59
00:03:46,540 --> 00:03:48,930
Now this is another thing to keep in mind here.

60
00:03:49,010 --> 00:03:51,480
Make sure that you're putting reactor at or dom here.

61
00:03:51,500 --> 00:03:55,880
I can guarantee you almost without a doubt that at some point inside this application you're going to

62
00:03:55,970 --> 00:03:57,920
accidentally type re-act router.

63
00:03:57,920 --> 00:04:02,740
But in every case for this application we are always going to write out re-act rodder done.

64
00:04:02,870 --> 00:04:06,460
Now normally as you well know from going through a lot of content in this course.

65
00:04:06,470 --> 00:04:12,020
Usually I explain things with a ton of diagrams but re-act router is actually one instance where it

66
00:04:12,020 --> 00:04:17,110
is so much easier to just show you a quick example to help you understand exactly how it works.

67
00:04:17,120 --> 00:04:21,800
So we're just going to very quickly write up a quick example with re-act Rotterdam to help you get a

68
00:04:21,800 --> 00:04:23,120
better sense of what's going on.

69
00:04:24,200 --> 00:04:24,500
All right.

70
00:04:24,500 --> 00:04:28,550
To get started with this quick little example we're going to write some code into this file that we're

71
00:04:28,550 --> 00:04:32,570
going to delete very quickly once we get a better idea of how this thing is behaving.

72
00:04:32,600 --> 00:04:38,520
So up above my app component I'm going to make two other kind of dummy little components just like stand

73
00:04:38,520 --> 00:04:39,580
in things.

74
00:04:39,830 --> 00:04:47,900
So inside of my file I'm going to say Konst page one is going to be a functional component that returns

75
00:04:47,930 --> 00:04:50,450
a div with the text.

76
00:04:50,460 --> 00:04:57,070
Page 1 and then I'm going to copy paste that down and then for the second copy I'm going to change it

77
00:04:57,070 --> 00:04:59,230
to say Page 2 instead.

78
00:05:02,810 --> 00:05:07,910
Then inside of my app component I'm going to turn this into a multi-line GSX block.

79
00:05:11,570 --> 00:05:17,270
Inside of the div I'm going to place an instance of this browser router right here your browser router

80
00:05:17,270 --> 00:05:19,190
is an actual re-act component.

81
00:05:19,250 --> 00:05:21,260
We'll talk about exactly what is doing just a moment.

82
00:05:21,260 --> 00:05:24,650
But like I said it's a lot easier to show than to explain.

83
00:05:24,650 --> 00:05:26,460
In this particular case.

84
00:05:26,660 --> 00:05:29,930
So inside the div right here I'm going to place browser router

85
00:05:33,940 --> 00:05:40,740
and then inside of there I'm going to put a route on the route I'm going to pass in a prop that says

86
00:05:40,800 --> 00:05:45,210
path forward slash like so inside of a string.

87
00:05:45,660 --> 00:05:48,770
After that I'll put in the key word exact on it's own.

88
00:05:48,840 --> 00:05:53,280
No assignment here so we're not going to say exact equals something or anything like that I'm just going

89
00:05:53,280 --> 00:05:54,910
to put the word exact.

90
00:05:55,050 --> 00:06:00,270
And then finally I'll say component I'll put down my curly braces to indicate that I want to reference

91
00:06:00,270 --> 00:06:07,960
a javascript variable inside of some GSX and I'm going to put in there page 1 like so.

92
00:06:08,170 --> 00:06:15,540
And then after that I'm going to put another route for this one I'm going to say slash page to I'm not

93
00:06:15,540 --> 00:06:21,490
going to put the exact keyword this time in it'll put in just component age 2.

94
00:06:21,610 --> 00:06:23,960
Now I'll close off that tag as well.

95
00:06:23,970 --> 00:06:24,230
All right.

96
00:06:24,240 --> 00:06:25,710
So we now have a browser router.

97
00:06:25,800 --> 00:06:26,880
We have two routes.

98
00:06:26,880 --> 00:06:27,750
We have two paths.

99
00:06:27,750 --> 00:06:30,930
We have one X X and two components like so.

100
00:06:30,930 --> 00:06:35,310
So I'm not going to save this and we're going to flip back to the browser is going to see what happens

101
00:06:35,730 --> 00:06:37,730
after we observe some interesting behavior.

102
00:06:37,740 --> 00:06:42,300
We'll have a long discussion to talk about exactly how re-act router is working behind the scenes for

103
00:06:42,300 --> 00:06:45,330
us and what it's going to really do inside of our project.

104
00:06:45,330 --> 00:06:46,290
All right.

105
00:06:46,290 --> 00:06:47,790
So I can flip back over.

106
00:06:47,850 --> 00:06:50,190
I made a little mistake I forgot one little element here.

107
00:06:50,190 --> 00:06:55,020
So inside of the browser router I'm going to wrap both those routes with the div like so my mistake

108
00:06:55,080 --> 00:06:57,930
while I kind of broke the free flow here.

109
00:06:57,950 --> 00:06:59,720
But we'll fix that up really quickly.

110
00:06:59,730 --> 00:07:01,670
So going to save that and then flip back over.

111
00:07:02,040 --> 00:07:07,710
OK so now successfully without any error message I see Page 1 appear on the screen.

112
00:07:07,810 --> 00:07:12,810
Now very interestingly I'm going to change my address bar up here I'm going to go to a local host on

113
00:07:12,810 --> 00:07:19,380
three thousand splash page too like so now I see the text page to appear on the screen.

114
00:07:19,770 --> 00:07:24,090
Now just to make things a little bit more interesting than this I'm going to go to my page to component

115
00:07:25,720 --> 00:07:34,680
and I'll put say a button tag inside of your that says something like click me like so and I'll save

116
00:07:34,680 --> 00:07:36,470
that and we'll flip back over.

117
00:07:36,510 --> 00:07:38,870
And now I see on page two I see that button.

118
00:07:38,940 --> 00:07:44,030
But if I go back to just local home 3000 I still see that page one component appear.

119
00:07:44,100 --> 00:07:44,440
OK.

120
00:07:44,460 --> 00:07:48,640
So what we see here is a very simple example of what re-act rodders is doing.

121
00:07:48,690 --> 00:07:52,800
And so I think that you can kind of understand based upon the you are ill we are seeing some different

122
00:07:52,800 --> 00:07:54,230
content on the screen.

123
00:07:54,430 --> 00:07:55,530
Let's take a pause right here.

124
00:07:55,560 --> 00:07:59,970
When we come back the next video we're going to break down this little example into its little component

125
00:07:59,970 --> 00:08:00,930
parts so to speak.

126
00:08:00,940 --> 00:08:03,090
And we'll talk about what re-act writer is doing for us.

127
00:08:03,150 --> 00:08:05,080
So a quick pauses I'll see you in just a minute.