1
00:00:00,330 --> 00:00:07,650
Nice, and once we're done discussing the general concept of reactor hour, of course, let's get to

2
00:00:07,650 --> 00:00:11,970
work and set it up in our own application.

3
00:00:12,460 --> 00:00:15,950
And first, of course, we would need to navigate you objets.

4
00:00:15,960 --> 00:00:23,040
Then we're looking for folder number 11, and you can probably already guess that we're going to go

5
00:00:23,040 --> 00:00:26,130
with the set up folder and you would be correct.

6
00:00:26,660 --> 00:00:33,200
So we navigate tutorial and we're looking for folder number 11 and then we're looking for to set up

7
00:00:33,780 --> 00:00:34,170
again.

8
00:00:34,170 --> 00:00:35,420
I have there the index.

9
00:00:35,670 --> 00:00:37,080
So the main entry point.

10
00:00:37,410 --> 00:00:40,100
So we don't need to show specific file.

11
00:00:40,560 --> 00:00:46,800
And then, of course, instead of there's a random text, the reactor one, we're going to go with a

12
00:00:46,980 --> 00:00:48,510
set up component.

13
00:00:48,720 --> 00:00:49,010
Awesome.

14
00:00:49,590 --> 00:00:51,630
Now it's going to display the same text.

15
00:00:51,630 --> 00:00:53,160
So you're not hallucinating.

16
00:00:54,000 --> 00:00:55,740
But now, of course, I would want to navigate there.

17
00:00:56,220 --> 00:01:02,280
And most of the files that you'll find in a setup folder are going to be our pages.

18
00:01:02,640 --> 00:01:05,860
Now, if that is a bit confusing, don't worry.

19
00:01:05,880 --> 00:01:08,880
Once we set up the router, you'll see how it works.

20
00:01:08,880 --> 00:01:11,510
But essentially we have about error.

21
00:01:11,520 --> 00:01:16,550
We have also the home as well, not bother people on person.

22
00:01:16,860 --> 00:01:23,670
So everything apart from index where we're setting up our reactor powder and then in that bar where

23
00:01:23,670 --> 00:01:27,600
we display the links, those are going to be our pages.

24
00:01:27,960 --> 00:01:35,850
OK, hopefully that is clear and that once we have that out of the way now let's navigate to the next

25
00:01:35,850 --> 00:01:39,890
year and notice how I'm importing all the pictures.

26
00:01:40,320 --> 00:01:42,240
So once we set up the router.

27
00:01:43,290 --> 00:01:48,340
Depending on the euro, we'll display that specific component.

28
00:01:48,720 --> 00:01:55,830
For example, there's going to be a home page as well as a single person page now in order to get up

29
00:01:55,830 --> 00:02:04,140
and running with a recruiter will need to import from the package, from the reactor or down the browser

30
00:02:04,140 --> 00:02:04,530
router.

31
00:02:04,890 --> 00:02:12,600
And a common practice is giving it, unless in this case we are giving it an alias overorder and then

32
00:02:12,620 --> 00:02:15,080
around as well as the switch.

33
00:02:15,420 --> 00:02:20,530
So one by one, of course, will cover what each of them does in this case.

34
00:02:20,550 --> 00:02:27,270
Let's start by setting up our return, and this is the part where we would want to wrap all our index

35
00:02:27,270 --> 00:02:31,000
return into the router as a side note.

36
00:02:31,350 --> 00:02:38,000
Normally, when you work with the recruiter, you're up your whole application again.

37
00:02:38,280 --> 00:02:42,600
In this case, since we have a separate folder for each and every example.

38
00:02:42,870 --> 00:02:45,690
That's why we're wrapping the return of Energous.

39
00:02:46,050 --> 00:02:52,390
Just keep in mind, when we will be working on our project will go over how we wrap our whole application.

40
00:02:52,830 --> 00:02:55,740
So essentially, the set up is going to be exactly the same.

41
00:02:55,740 --> 00:02:58,670
But the difference is going to be that we're out there.

42
00:02:58,890 --> 00:03:02,970
We'll wrap our objets already in the intelligence.

43
00:03:03,150 --> 00:03:10,290
Doesn't matter whichever place you pick, as long as it is a root component, because that way, of

44
00:03:10,290 --> 00:03:15,390
course, your whole application can access the reactor and can use it in.

45
00:03:15,390 --> 00:03:17,910
This is only the set up folder.

46
00:03:18,360 --> 00:03:23,380
Of course, the final one where we have the final code can use the reactor Rotterdam.

47
00:03:23,850 --> 00:03:28,440
So with our router in place now, we need to set up the routes.

48
00:03:28,890 --> 00:03:35,610
And essentially it just means that in the euro, when we navigate whether or not it is the home page

49
00:03:35,610 --> 00:03:39,650
about, well, then we display that specific component.

50
00:03:39,930 --> 00:03:42,480
Like I said, these are just components.

51
00:03:42,480 --> 00:03:44,970
But I gave it a comment of pages.

52
00:03:45,360 --> 00:03:51,750
So these are just components that will become our pages and the way we set them up as pages.

53
00:03:52,690 --> 00:04:00,430
We're going to go here with Hérault, then we have a path, Propp, and this is a specific prop, so

54
00:04:00,430 --> 00:04:02,320
make sure you name it exactly the same.

55
00:04:02,740 --> 00:04:06,940
And then this is where we showcase what is going to be our YORO.

56
00:04:07,270 --> 00:04:10,030
And the first one I would want to showcase is the homepage.

57
00:04:10,390 --> 00:04:12,580
Now for the homepage, we just go with four words.

58
00:04:13,180 --> 00:04:18,010
That just means the domain name because of course our domain is localhost three thousand.

59
00:04:18,310 --> 00:04:23,320
But then normally you have CNN dot com or Google dot com or whatever.

60
00:04:23,470 --> 00:04:28,960
Just think of the domain for your application, whatever is going to be.

61
00:04:29,140 --> 00:04:30,870
So that is going to be the homepage.

62
00:04:31,240 --> 00:04:38,560
And then once we have the world component inside that rocket component, this is where we display whichever

63
00:04:38,560 --> 00:04:39,700
component we would want.

64
00:04:39,970 --> 00:04:42,370
So keep in mind, technically, if you want.

65
00:04:43,290 --> 00:04:48,990
You can place whichever component your heart desires, because even though this says that, yeah, it

66
00:04:48,990 --> 00:04:53,040
is going to be a home page, you can easily place here people component as well.

67
00:04:53,370 --> 00:04:54,210
Keep that in mind.

68
00:04:54,420 --> 00:05:00,480
But of course, in my case, since it is a home page, I also have a home page component, meaning the

69
00:05:00,480 --> 00:05:01,830
component by the name of home.

70
00:05:02,160 --> 00:05:06,850
And then of course, I'm displaying it now in order to make it a bit more interesting.

71
00:05:07,440 --> 00:05:10,160
I'm going to copy and paste one too.

72
00:05:10,680 --> 00:05:19,140
And then of course, I'll add about as well as people now 40, about what is going to be my.

73
00:05:19,610 --> 00:05:23,160
Well, if the forward slash is the home page.

74
00:05:24,110 --> 00:05:27,790
Let's say that 40 about page, I'm going to go with four.

75
00:05:29,000 --> 00:05:31,640
But again, you are in charge.

76
00:05:32,060 --> 00:05:40,730
If you want to write about shake and bake, that just means that this is going to be the page where

77
00:05:40,730 --> 00:05:41,340
you navigate.

78
00:05:41,980 --> 00:05:48,530
OK, keep that in mind that you are always in charge of what is going to be your URL nonmarket.

79
00:05:48,570 --> 00:05:50,810
I'm just going to with forward and about.

80
00:05:51,140 --> 00:05:57,020
And of course, in order to showcase my about page, I'm going to say that once we navigate there,

81
00:05:57,380 --> 00:05:59,890
I'm going to display the about component.

82
00:06:00,260 --> 00:06:05,930
And finally, I'm going to go also with a people and you can probably already guess.

83
00:06:07,100 --> 00:06:14,380
That we're going to be going to a people page now, the moment we refresh Norrish, now I have the homepage

84
00:06:14,630 --> 00:06:15,680
now, why do I have it?

85
00:06:16,160 --> 00:06:17,060
Well, check it out.

86
00:06:17,450 --> 00:06:21,650
If we now get you a home address, our home component.

87
00:06:21,860 --> 00:06:22,950
This is what we have.

88
00:06:23,330 --> 00:06:31,070
So if I'll go here and say shake and bake, you can probably already guess that we'll just play the

89
00:06:31,070 --> 00:06:33,440
paragraph with that specific text.

90
00:06:33,770 --> 00:06:35,000
So hopefully that is clear.

91
00:06:35,300 --> 00:06:42,380
We have our home page and of course, in the euro bar, since we haven't set up the nav bar yet, if

92
00:06:42,380 --> 00:06:49,010
we go forward slash and then about, we should and let me emphasize something, because there's one

93
00:06:49,020 --> 00:06:52,000
Gotcher we should see the about page.

94
00:06:52,250 --> 00:07:01,910
And once I press yeah, I can see the about page, but there's a tiny issue where I can also see the

95
00:07:01,910 --> 00:07:02,400
homepage.

96
00:07:02,750 --> 00:07:04,700
Now let's try it out with people.

97
00:07:05,090 --> 00:07:12,000
So in the URL bar go here and so slash and line people and let's see what we're going to get.

98
00:07:12,530 --> 00:07:14,530
And again, same thing.

99
00:07:15,430 --> 00:07:21,460
I can see that I have the content from the people page, and if you want to check it out, here it is

100
00:07:21,850 --> 00:07:23,920
essentially I have my data here.

101
00:07:24,220 --> 00:07:27,670
I set up the state variable and I'm just iterating over.

102
00:07:27,880 --> 00:07:34,390
And don't worry, it's going to make sense once we get to you are all parameters why we have this specific

103
00:07:34,390 --> 00:07:34,710
set up.

104
00:07:35,080 --> 00:07:37,720
Most importantly, what is happening here?

105
00:07:38,050 --> 00:07:45,670
Why we have homepage with Shake and Bake and on the people page, even though technically we are in

106
00:07:45,670 --> 00:07:50,840
the people page when you see what's happening by default, when it comes to react rather.

107
00:07:52,060 --> 00:07:59,230
If the path matches, it's going to display both components and as you can see by the URL, well, for

108
00:07:59,230 --> 00:08:04,940
the home page, it also matches the about correct and that it also matches the people.

109
00:08:04,960 --> 00:08:12,400
That's why when we now get people to about or whatever page we will set up, it will also display the

110
00:08:12,400 --> 00:08:16,060
homepage because technically the path matches.

111
00:08:16,540 --> 00:08:22,410
Now, in order to fix that, we would need to add another prop where we say exact.

112
00:08:22,720 --> 00:08:31,130
So once we say you'll notice that now only the exact path matches, whether that is people or whether

113
00:08:31,130 --> 00:08:34,150
that is about or whatever you Aurélio set up.

114
00:08:34,360 --> 00:08:40,000
And only once I go back to my domain, then of course I can see the homepage.

115
00:08:40,420 --> 00:08:45,010
Now, if you want, you can have this exact path to every route.

116
00:08:45,890 --> 00:08:52,070
That is totally up to you, but in this case, since I don't have any nested pages, so there's not

117
00:08:52,070 --> 00:08:56,100
going to be about four slash and something else, I'm just going to avoid that.

118
00:08:56,150 --> 00:09:01,510
Just keep in mind, you're not limited to adding this exact to only the homepage.

119
00:09:01,790 --> 00:09:08,120
You can add it to every route, and that way only the exact match will be displayed.

120
00:09:08,510 --> 00:09:16,250
So that would be a basic setup for a recruiter where we have a ruler, we wrap our whole up being in

121
00:09:16,250 --> 00:09:19,250
this case, of course, it is just the index in the setup.

122
00:09:19,470 --> 00:09:26,450
But normally you would wrap the component and then you have routes online for each and every route that

123
00:09:26,450 --> 00:09:26,840
you have.

124
00:09:26,840 --> 00:09:28,250
You just set up a component.

125
00:09:28,250 --> 00:09:32,330
Whatever you will place in that component in return is going to be displayed.

126
00:09:32,540 --> 00:09:37,790
And that we need to remember about the path problem where essentially we say, well, what is going

127
00:09:37,790 --> 00:09:43,340
to be the URL as far as the home page is just going to be a portal slash and then you can come up with

128
00:09:43,340 --> 00:09:44,720
your own components, of course.

129
00:09:45,020 --> 00:09:52,220
And once the old display as well as the you are, I'll just go with Slash and then whatever the name

130
00:09:52,220 --> 00:09:52,790
you choose.

131
00:09:53,120 --> 00:09:58,550
And then in order to set up an exact match, you just need to have this exact prop.