1

00:00:00,720  -->  00:00:02,890
So we've got re-act router installed now.

2

00:00:02,940  -->  00:00:07,930
Let's go ahead and talk a little bit about what it's going to be doing for us exactly.

3

00:00:07,950  -->  00:00:13,690
I'm going to go ahead and pull up a diagram to help explain exactly what's going on with it.

4

00:00:14,430  -->  00:00:14,840
OK.

5

00:00:14,880  -->  00:00:18,600
So here's kind of what's going on with re-act router.

6

00:00:18,770  -->  00:00:21,960
It's got a diagram here of our Web page.

7

00:00:21,960  -->  00:00:26,760
You know the page load in the user's browser and then a couple of steps that go around the loop here

8

00:00:26,760  -->  00:00:27,190
.

9

00:00:27,330  -->  00:00:33,540
So I know it's probably pretty pedantic for me to read the text on here but you know just humor me for

10

00:00:33,540  -->  00:00:33,960
a little bit.

11

00:00:33,960  -->  00:00:36,220
Let's kind of walk through this diagram a little bit.

12

00:00:36,510  -->  00:00:41,390
So our diagram starts with the top left and then goes around clockwise from there.

13

00:00:41,940  -->  00:00:43,700
So we start off at the web browser.

14

00:00:43,700  -->  00:00:47,430
This is where you know of course everything starts off fat and let's say that the user is just kind

15

00:00:47,430  -->  00:00:49,920
of sitting there you know hand-done whatever.

16

00:00:50,010  -->  00:00:55,740
Reading some text on the screen and they say oh this looks like a really neat link over here I click

17

00:00:55,740  -->  00:00:57,440
on this link right.

18

00:00:57,780  -->  00:01:02,100
When the user clicks on the link it does really one thing you know that we really care about as many

19

00:01:02,100  -->  00:01:04,610
things but there's only one thing that we care about.

20

00:01:04,800  -->  00:01:10,020
It changes or else that's what we really care about in our application we really care about whenever

21

00:01:10,020  -->  00:01:12,660
the you are well inside of that address bar changes.

22

00:01:12,670  -->  00:01:16,030
So most critical critical thing in the world to us right now.

23

00:01:16,830  -->  00:01:23,550
So this diagram is meant to illustrate exactly what happens when the user does basically any action

24

00:01:23,820  -->  00:01:28,950
that changes the R L so it kicks off this whole series of events that go through here.

25

00:01:28,950  -->  00:01:32,120
Let's walk through them one by one.

26

00:01:32,130  -->  00:01:36,470
So first off the first thing I tell you is that we just installed re-act router.

27

00:01:36,510  -->  00:01:36,840
Right.

28

00:01:36,840  -->  00:01:42,570
You know we just said NPM install re-act router but we also got a kind of a bonus package out of that

29

00:01:42,570  -->  00:01:43,520
as well.

30

00:01:43,680  -->  00:01:46,620
The extra package that we got is called history.

31

00:01:47,040  -->  00:01:55,230
History is a tiny javascript package that has one purpose to it just one it manages the URL of the web

32

00:01:55,230  -->  00:02:00,940
browser it watches the Welford changes and it also has the ability to update it over time.

33

00:02:00,960  -->  00:02:05,610
Basically it's how our application is going to work directly with the u r l.

34

00:02:05,610  -->  00:02:09,410
In practice we shouldn't ever really have to very directly work with the history.

35

00:02:09,420  -->  00:02:14,490
So throughout our application we'll probably never see a direct reference to this history library but

36

00:02:14,550  -->  00:02:17,240
trust me it's there.

37

00:02:17,520  -->  00:02:21,140
So whenever the world changes history is watching for that.

38

00:02:21,150  -->  00:02:26,130
And so the browser basically says hey history library just so you know you know the user just changed

39

00:02:26,130  -->  00:02:26,720
the URL.

40

00:02:26,730  -->  00:02:27,700
Here's the new one.

41

00:02:27,720  -->  00:02:30,490
You I assume that you want to do something with this.

42

00:02:30,720  -->  00:02:32,540
History takes new Ural.

43

00:02:32,670  -->  00:02:38,490
And again it's only job is to monitor the user L and make changes to it and know whenever it updates

44

00:02:38,510  -->  00:02:38,970
.

45

00:02:39,330  -->  00:02:45,280
So it takes that new or new Ural and then it kicks on down the line to react router you know react rather

46

00:02:45,280  -->  00:02:48,720
be in the library that we just installed.

47

00:02:48,750  -->  00:02:52,260
So here's where things start to get really interesting this is the part that we actually have some control

48

00:02:52,260  -->  00:02:52,650
over.

49

00:02:52,650  -->  00:02:57,430
You know we don't really have that much control over history but we sure do overreact router.

50

00:02:57,870  -->  00:03:00,970
So history is told.

51

00:03:00,980  -->  00:03:07,530
Avi you are all just updated it pass it on to react router re-act router takes that you are l and its

52

00:03:07,530  -->  00:03:12,600
purpose is to change the components that are being used in our application.

53

00:03:12,600  -->  00:03:14,170
Based on that URL.

54

00:03:14,340  -->  00:03:18,900
In other words it's a part of our app that will make the user think that they're navigating around to

55

00:03:18,900  -->  00:03:20,450
a different web page.

56

00:03:20,490  -->  00:03:26,940
It takes CRL and depending on the characters that you are l it's going to return a different set of

57

00:03:26,940  -->  00:03:28,650
components to react.

58

00:03:28,650  -->  00:03:34,610
It says OK you know I see this new euro you are l it just got changed based on this you were ill.

59

00:03:34,620  -->  00:03:41,070
I think I need to render a component A B and C or maybe X Y and Z or maybe you know a component whatever

60

00:03:41,130  -->  00:03:42,100
doesn't matter.

61

00:03:42,420  -->  00:03:48,510
It takes that you were l decides hey I need to render some new set of components and then it passes

62

00:03:48,510  -->  00:03:50,130
them on to react.

63

00:03:50,610  -->  00:03:53,490
So reactor receives those new components from re-act router.

64

00:03:53,610  -->  00:03:58,140
It says Oh I just you know got this new collection of components I guess.

65

00:03:58,170  -->  00:04:03,720
You know the user all change or you know whatever I just need to show some new content on the screen

66

00:04:04,290  -->  00:04:10,320
so reac goes ahead and renders all the content on screen and the content just flows right back into

67

00:04:10,320  -->  00:04:11,430
the browser.

68

00:04:11,430  -->  00:04:16,950
And as far as the user is concerned the user thinks that they just navigated to make totally different

69

00:04:16,950  -->  00:04:17,590
page.

70

00:04:17,610  -->  00:04:18,260
Right.

71

00:04:18,270  -->  00:04:25,200
These are things that they just change pages entirely they don't really know what's going on behind

72

00:04:25,200  -->  00:04:25,710
the scenes.

73

00:04:25,710  -->  00:04:27,840
All they know is that well the world changed.

74

00:04:27,840  -->  00:04:31,320
Now I see a different bunch of content on the screen.

75

00:04:31,320  -->  00:04:34,650
So that's really the relation between these three libraries.

76

00:04:34,650  -->  00:04:39,990
We've got history which is kind of working behind the scenes and it's messy you know watching the euro

77

00:04:40,260  -->  00:04:42,860
and also has the ability to update it when required.

78

00:04:43,200  -->  00:04:49,010
But all it's really doing is taking the role when it changes and pass it on to reactor router rewash

79

00:04:49,020  -->  00:04:54,990
router takes the L and says OK based on this Eurail I need to show this component and this component

80

00:04:55,020  -->  00:05:01,700
and this component reactor router tosses out over to react and then react puts out some each female

81

00:05:01,770  -->  00:05:06,270
and shows it to the screen and that's it that's really you know the whole cycle here.

82

00:05:06,420  -->  00:05:11,190
Once we start going through their application and as you start working on larger applications this whole

83

00:05:11,190  -->  00:05:16,230
process might start to seem like a little bit of a mystery but really at its core it's really a pretty

84

00:05:16,230  -->  00:05:20,910
simple straightforward process so always try to keep this diagram in your mind as you're building these

85

00:05:21,330  -->  00:05:23,980
you know more and more complex applications.

86

00:05:24,390  -->  00:05:24,780
OK.

87

00:05:24,810  -->  00:05:29,970
So with all this in mind now we've got a little bit better idea of the theory behind these different

88

00:05:29,970  -->  00:05:30,820
libraries.

89

00:05:30,990  -->  00:05:33,340
Let's go ahead and continue in the next section