1
00:00:07,480 --> 00:00:10,840
We come back to continue this project?

2
00:00:10,870 --> 00:00:15,860
First, let's configure our application to use React Router Dom.

3
00:00:16,120 --> 00:00:21,760
So inside the app this way we want to implement the routing.

4
00:00:21,760 --> 00:00:30,040
So first step is that we need to require the methods from the React router dom and we need a couple

5
00:00:30,040 --> 00:00:30,490
of them.

6
00:00:30,490 --> 00:00:40,330
So we go ahead and then the structure for the React router dom as React router dom and going to be us

7
00:00:40,330 --> 00:00:41,620
from that.

8
00:00:41,620 --> 00:00:49,420
So what we need here is what we call browser router also that we need what is called routes and then

9
00:00:49,420 --> 00:00:56,350
the route itself and here we go before we continue, unless we have some component.

10
00:00:56,350 --> 00:01:00,580
So here let's create a folder component.

11
00:01:03,230 --> 00:01:08,630
And inside the components, I need to have one folder, four forms.

12
00:01:09,170 --> 00:01:14,420
So here let's create one component called log in form.

13
00:01:15,950 --> 00:01:17,570
And as that.

14
00:01:17,720 --> 00:01:23,870
And for this, I'm going to use an extension that's going to help me to scale for the component.

15
00:01:23,870 --> 00:01:27,470
And the extension is called React Redux.

16
00:01:27,620 --> 00:01:29,380
And this is the extension.

17
00:01:29,390 --> 00:01:29,930
Yes.

18
00:01:29,990 --> 00:01:31,790
When we add redux.

19
00:01:31,790 --> 00:01:37,790
So to be able to scaffold the component, let's see how I'm going to do it.

20
00:01:37,820 --> 00:01:42,320
You make use of r e, f, c e and then hit enter.

21
00:01:42,320 --> 00:01:46,280
And now I have the dummy component, so let's save it.

22
00:01:46,280 --> 00:01:49,160
And now let's implement the navigation.

23
00:01:49,160 --> 00:01:52,130
So here I have all the methods I need.

24
00:01:52,160 --> 00:01:59,870
The next one going to be the component, going to be the log in and I have the auto import as that.

25
00:01:59,870 --> 00:02:03,530
So now I have the component where I want to navigate.

26
00:02:03,530 --> 00:02:10,780
So now let's remove everything from here and let's bring the first method browser router.

27
00:02:11,000 --> 00:02:14,600
So this one is going to wrap all our components.

28
00:02:14,600 --> 00:02:18,200
So after that we bring in the root.

29
00:02:18,350 --> 00:02:26,600
The next one is we are going to use a root to render all our components as that, and for this root

30
00:02:26,600 --> 00:02:28,430
it takes in couple of properties.

31
00:02:28,460 --> 00:02:35,450
The first one is a path where I want to go for this one going to be slash log in, then that's going

32
00:02:35,450 --> 00:02:39,590
to be the element, meaning which components do we want to render?

33
00:02:39,590 --> 00:02:49,280
When I visit, slash, look in and want to be as object and here I'll pass in the component as log in

34
00:02:50,000 --> 00:02:51,680
as that perfect.

35
00:02:51,710 --> 00:02:57,320
Now I have the navigation being implemented, how easy it is.

36
00:02:57,320 --> 00:03:04,700
So with this one I have all the methods from React to Dom being injected into this component.

37
00:03:04,700 --> 00:03:09,320
For example, use params, use navigation and use location.

38
00:03:09,320 --> 00:03:11,030
So now let's check it out.

39
00:03:11,030 --> 00:03:12,140
It is working.

40
00:03:12,260 --> 00:03:20,390
If I go to forward slash log in and I have the log in page now we are on track.

41
00:03:20,420 --> 00:03:27,410
The next video I will provide all the table cases component to have a beautiful forms and then beautiful

42
00:03:27,440 --> 00:03:28,400
homepage.

43
00:03:28,520 --> 00:03:31,460
All right, so let's get rocking in the next video.