1
00:00:07,180 --> 00:00:08,410
Welcome back.

2
00:00:08,440 --> 00:00:13,030
In this video, let's get started with react router dom.

3
00:00:13,540 --> 00:00:21,490
I have created fresh react application with a default component and this is what you see.

4
00:00:21,610 --> 00:00:24,880
So here, let's do some housekeeping here.

5
00:00:24,940 --> 00:00:29,680
So inside the app, let's remove every code inside.

6
00:00:30,930 --> 00:00:36,930
And now let's add h one and let's call it as we act.

7
00:00:39,520 --> 00:00:40,920
Rooter done.

8
00:00:41,380 --> 00:00:41,790
Good.

9
00:00:41,800 --> 00:00:45,130
And let's remove the CSV file also from here.

10
00:00:45,730 --> 00:00:50,440
So the next step is that let's install the react router.

11
00:00:50,770 --> 00:00:58,120
So back to my terminal here and let me open an instance of my terminal and let's go ahead and then install

12
00:00:58,120 --> 00:00:59,080
the package.

13
00:00:59,110 --> 00:01:08,020
If you go to the website, so let's click on familiar with React Router Dom and let's go ahead and install

14
00:01:08,050 --> 00:01:13,750
the exact version and that is React Router Dom, Act Virgin six.

15
00:01:13,750 --> 00:01:15,610
So let's copy this one.

16
00:01:15,610 --> 00:01:17,590
And now back to our terminal.

17
00:01:17,620 --> 00:01:21,460
Make sure that you install the exact version.

18
00:01:21,460 --> 00:01:23,170
So let's hit enter.

19
00:01:24,130 --> 00:01:24,780
Great.

20
00:01:24,790 --> 00:01:33,220
So let's clear the console and now let's restart our server because we have installed a new package.

21
00:01:33,790 --> 00:01:34,240
Great.

22
00:01:34,240 --> 00:01:37,870
So let's collapse this one and now let's get going.

23
00:01:38,200 --> 00:01:41,500
So here we are going to create a couple of components.

24
00:01:41,500 --> 00:01:47,920
So inside the SABC, let's create one folder and call this one as component.

25
00:01:48,220 --> 00:01:51,340
We are going to have four components.

26
00:01:51,340 --> 00:01:52,680
So here we go.

27
00:01:52,750 --> 00:01:56,830
The first one is going to be about two GHz.

28
00:01:57,040 --> 00:02:03,940
And for this I'm going to scaffold the component using an extension called React Redux.

29
00:02:04,000 --> 00:02:11,320
If you search for React Redux, this is the extension that I'm going to use to scaffold react component.

30
00:02:11,320 --> 00:02:13,180
So now here we go.

31
00:02:13,210 --> 00:02:17,320
Let me close this one and also close this one also.

32
00:02:17,470 --> 00:02:25,270
So when I make use of our AFC, I'm going to have functional component and here let me have a parent

33
00:02:25,270 --> 00:02:28,270
dev or it can be a fragment.

34
00:02:28,270 --> 00:02:36,880
And for each one, I'm going to call this one as about as page and let me add P tab.

35
00:02:36,910 --> 00:02:40,870
And for this P, I'm going to add some text inside.

36
00:02:41,110 --> 00:02:45,490
So I'll pay some dummy text inside here and I'm good to go.

37
00:02:45,700 --> 00:02:53,950
So the next component is going to be the admin page, so I can copy this one and then paste it and change

38
00:02:53,950 --> 00:02:56,890
this one to admin.

39
00:02:57,680 --> 00:03:01,970
Meaning is for admin only at main page.

40
00:03:02,510 --> 00:03:02,950
Great.

41
00:03:02,960 --> 00:03:10,300
So let me change this one to admin page and you're going to be protected.

42
00:03:10,310 --> 00:03:16,580
So let's rename this one back to admin page.

43
00:03:16,970 --> 00:03:21,440
Then the next component is going to be contact us.

44
00:03:21,440 --> 00:03:24,800
So here is going to be contact.

45
00:03:25,580 --> 00:03:32,600
So here let's be name this one back to contact and let's change the H one.

46
00:03:33,220 --> 00:03:33,610
Sorry.

47
00:03:33,630 --> 00:03:36,140
Supposed to be h one here guys.

48
00:03:36,140 --> 00:03:43,180
So here is going to be as a contact and let me get back to the about.

49
00:03:43,490 --> 00:03:46,400
It's going to be h one likewise.

50
00:03:46,400 --> 00:03:49,250
I mean, it's going to be h one.

51
00:03:49,850 --> 00:03:57,170
The next component that you are going to create is called off root, meaning that we are going to use

52
00:03:57,170 --> 00:04:00,170
that component to protect a component.

53
00:04:00,170 --> 00:04:02,300
And I will show you as we move on.

54
00:04:02,300 --> 00:04:03,950
So let's copy this one.

55
00:04:03,950 --> 00:04:09,980
And here, let's rename this one as of round great.

56
00:04:09,980 --> 00:04:13,730
And let's rename this one to off.

57
00:04:16,670 --> 00:04:17,329
Root.

58
00:04:17,360 --> 00:04:22,710
Now we have the component ready, the next video.

59
00:04:22,730 --> 00:04:28,750
Let's go ahead and then configure our application to use React Router Dom.