1
00:00:00,180 --> 00:00:05,040
Beautiful and I would want to start this project by setting up our pages.

2
00:00:05,190 --> 00:00:13,180
Of course, we react router and what I'm looking for are the home page than the about page, where we'll

3
00:00:13,200 --> 00:00:15,420
just have some dummy text.

4
00:00:15,750 --> 00:00:22,760
Also, we would need to have a cocktail page where will display info about that specific cocktail.

5
00:00:23,010 --> 00:00:29,550
And then eventually also I would want to have the error page where if the user navigate to the page,

6
00:00:29,550 --> 00:00:31,280
that doesn't exist in this case.

7
00:00:31,290 --> 00:00:31,680
Hello.

8
00:00:31,980 --> 00:00:37,980
Because we have some kind of text where we say, oops, it's a dead end and then we can navigate back

9
00:00:37,980 --> 00:00:38,690
to the homepage.

10
00:00:38,970 --> 00:00:40,380
And of course, we're going to do that.

11
00:00:40,380 --> 00:00:44,530
We react router, as always, you should install it.

12
00:00:44,640 --> 00:00:46,970
But of course, I already installed for us.

13
00:00:47,190 --> 00:00:54,450
So for this project and the package just on your right away fine react Rotterdam version 5.0.

14
00:00:54,750 --> 00:00:59,970
But then in your own project you need to run, npm, install and then react.

15
00:00:59,970 --> 00:01:07,770
Hyphen router, hyphen down and then once you're installed we can start using it and we have few options.

16
00:01:08,010 --> 00:01:15,510
We can either wrap our whole road component, which in our case is going to be app or if you want to.

17
00:01:16,390 --> 00:01:18,160
You can also do it in the index.

18
00:01:18,190 --> 00:01:24,640
Yes, so this is where you'd want to get the router and then usually you would place it in between the

19
00:01:24,640 --> 00:01:31,360
provider and the app because, of course, you would want to access whatever is coming from the provider

20
00:01:31,810 --> 00:01:36,790
and the router as well as far as the pages and all that.

21
00:01:37,000 --> 00:01:40,780
But in my case, I'm going to go with Apple, essentially.

22
00:01:40,970 --> 00:01:44,380
I'll wrap my whole component right there.

23
00:01:44,950 --> 00:01:46,900
Just keep in mind you have multiple options.

24
00:01:47,170 --> 00:01:52,970
And maybe in one of the project, essentially, we will set up a router in the next.

25
00:01:53,060 --> 00:01:58,090
Yes, OK, just keep in mind that we're just talking about the browser router.

26
00:01:58,300 --> 00:02:01,660
We're not talking about the the switches or nothing like that.

27
00:02:01,660 --> 00:02:07,150
We're just talking about the router, because that's the one that wraps our whole up.

28
00:02:07,420 --> 00:02:10,360
In our case, of course, that is going to be the objets.

29
00:02:10,810 --> 00:02:15,170
So here I have imported already everything from the reactor down.

30
00:02:15,610 --> 00:02:16,720
We have browser router.

31
00:02:16,720 --> 00:02:23,530
We have router, which has the alias of rather than we have a single aroud as well as the switch component.

32
00:02:23,830 --> 00:02:29,110
And then of course, we have the pages, we have all the pages coming from the pages directory.

33
00:02:29,320 --> 00:02:31,540
And then eventually we also have one component.

34
00:02:31,690 --> 00:02:35,290
And of course that is going to be our number in here.

35
00:02:35,290 --> 00:02:44,800
I would like to replace my having two with a router course, which is coming from reactor down and inside

36
00:02:44,800 --> 00:02:45,100
of it.

37
00:02:45,280 --> 00:02:46,900
I'll place the number first.

38
00:02:47,780 --> 00:02:54,020
Because remember, I did not want to place in my bar and and switch, now I'm going to go with my switch

39
00:02:54,020 --> 00:02:58,810
component and inside of the switch component, I will set up my roots.

40
00:02:59,150 --> 00:03:03,320
I'll start with a homeworld, so I'll have a world component.

41
00:03:03,320 --> 00:03:08,420
And I'm going to right away add exact Propp because I don't want to go to the home page.

42
00:03:08,660 --> 00:03:15,950
If the user is going to forget about or a cocktail that we need to add a path which of course points

43
00:03:15,950 --> 00:03:21,650
to our domain, which is just going to be a force and then which component we would want to render because

44
00:03:21,680 --> 00:03:27,590
I'm going with a home, then we have one route for about one for cocktail.

45
00:03:27,740 --> 00:03:33,250
But in there we'll set up our you are our parameters and then we have one for the error.

46
00:03:33,710 --> 00:03:38,300
So let me just copy and paste this thing one, two and three times.

47
00:03:38,660 --> 00:03:45,470
And I don't need the exact amount, so I'm just going to say about path that is going to be my YORO.

48
00:03:46,010 --> 00:03:52,300
And then of course, in here we go with about component, then we have one for that single cocktail

49
00:03:52,550 --> 00:03:55,850
and this is where we would want to use those YORO parameters.

50
00:03:56,120 --> 00:04:02,390
So we go with some kind of YORO, which in my case is going to be forward slash cocktail and Gulfport's.

51
00:04:02,720 --> 00:04:08,330
And this is where I would want to set up that program and I'm just going to name my one ID.

52
00:04:08,600 --> 00:04:14,510
So we have a colon and then Heidi, and then of course, once we click on that cocktail will pass in

53
00:04:14,510 --> 00:04:18,350
that idea and then we'll handle that in our single cocktail page.

54
00:04:18,710 --> 00:04:21,290
And of course, this is our single cocktail page.

55
00:04:21,650 --> 00:04:24,320
So we go with a single cocktail component.

56
00:04:24,590 --> 00:04:27,590
And lastly, I also want to have the error page.

57
00:04:27,920 --> 00:04:35,990
So we go around and then I remember it needed to have a path and we're going to add a star and then

58
00:04:35,990 --> 00:04:37,610
which component we would want to display.

59
00:04:38,060 --> 00:04:40,220
We're going to go with error page.

60
00:04:40,520 --> 00:04:47,240
So the error component and not once I have everything in place, I should see the Navar as of course

61
00:04:47,240 --> 00:04:51,290
my bar is above the switch command that is by design.

62
00:04:51,500 --> 00:04:58,010
And then once we navigate to Yarrabah and we start typing about this, now we're navigating to about

63
00:04:58,010 --> 00:05:04,160
page that as far as a single cocktail, we're going for cocktail and then some kind of value can.

64
00:05:04,190 --> 00:05:09,230
At the moment it doesn't really matter which value because we just have a single cocktail page.

65
00:05:09,530 --> 00:05:13,340
And then course, we also want to go with error page.

66
00:05:13,940 --> 00:05:15,530
My guess is going to be hello.

67
00:05:15,770 --> 00:05:17,630
And now I have the page.

68
00:05:18,050 --> 00:05:23,660
So with our structure in place now, we can start putting some meat on the bones, whether that is not

69
00:05:23,660 --> 00:05:26,060
bar or rest of the pages.