1
00:00:00,900 --> 00:00:01,733
Instructor: In this section,

2
00:00:01,733 --> 00:00:04,080
we're gonna get started on this new application right away

3
00:00:04,080 --> 00:00:06,090
by adding in React Router.

4
00:00:06,090 --> 00:00:08,250
So that we have two separate pages

5
00:00:08,250 --> 00:00:10,350
to navigate to inside of our application.

6
00:00:10,350 --> 00:00:11,183
'Cause remember,

7
00:00:11,183 --> 00:00:14,100
on this route route right here I wanna see the Comment List

8
00:00:14,100 --> 00:00:16,350
and then if a user goes to slash post

9
00:00:16,350 --> 00:00:18,363
I wanna see the comment box instead.

10
00:00:19,200 --> 00:00:21,570
So I'll first get started by opening up my terminal

11
00:00:21,570 --> 00:00:23,850
still inside of my testing directory.

12
00:00:23,850 --> 00:00:25,710
And I'll install React Router Dom

13
00:00:25,710 --> 00:00:29,310
by running NPM install dash dash save

14
00:00:29,310 --> 00:00:31,983
react-router-dom, like so.

15
00:00:32,910 --> 00:00:33,870
And then while that's running,

16
00:00:33,870 --> 00:00:36,600
I'm gonna flip over to my code editor.

17
00:00:36,600 --> 00:00:39,480
We're gonna get started inside of our index.js file

18
00:00:39,480 --> 00:00:41,313
inside the SRC directory.

19
00:00:42,600 --> 00:00:44,670
We're going to import the browser router

20
00:00:44,670 --> 00:00:47,040
and the route component from React Router Dom

21
00:00:47,040 --> 00:00:49,940
and then we'll wire it up to our app component right here.

22
00:00:50,880 --> 00:00:52,180
So at the top of the file,

23
00:00:53,580 --> 00:00:55,717
I will import BrowserRouter

24
00:00:56,760 --> 00:01:01,683
and Route from react-router-dom.

25
00:01:02,730 --> 00:01:04,379
I'll then take this browser router

26
00:01:04,379 --> 00:01:06,183
and wrap my app component with it.

27
00:01:09,030 --> 00:01:10,380
So this tells React Router

28
00:01:10,380 --> 00:01:12,150
that it's going to be in charge of deciding

29
00:01:12,150 --> 00:01:14,310
what content to show on the screen

30
00:01:14,310 --> 00:01:17,790
based on the URL that the user is currently looking at.

31
00:01:17,790 --> 00:01:20,160
I'm then going to replace the app component right here

32
00:01:20,160 --> 00:01:21,903
with a route tag instead.

33
00:01:22,770 --> 00:01:24,330
So I'll put the route down

34
00:01:24,330 --> 00:01:26,790
and I'll say that anytime someone goes to the path

35
00:01:26,790 --> 00:01:28,680
of forward slash,

36
00:01:28,680 --> 00:01:32,013
I want to show the component app, like so.

37
00:01:33,930 --> 00:01:35,283
Okay, so good start.

38
00:01:36,540 --> 00:01:38,220
I'm gonna flip back over to my terminal

39
00:01:38,220 --> 00:01:39,660
and it looks like my installation

40
00:01:39,660 --> 00:01:40,590
is still running over here.

41
00:01:40,590 --> 00:01:41,670
So we'll take a quick break,

42
00:01:41,670 --> 00:01:42,780
come back in the next section,

43
00:01:42,780 --> 00:01:44,643
and continue with our refactor.