1
00:00:00,150 --> 00:00:08,280
So far, all our examples were in the same page, even though it works for our editorial when it comes

2
00:00:08,280 --> 00:00:09,420
to real apps.

3
00:00:09,830 --> 00:00:13,260
It's nice to have multiple pages, not one.

4
00:00:13,270 --> 00:00:15,780
We talk about a JavaScript frameworks.

5
00:00:16,080 --> 00:00:20,000
We are not talking about traditional HMO pages.

6
00:00:20,610 --> 00:00:28,890
In that case, we have a new term, a single page application, which just means that we have our one

7
00:00:28,890 --> 00:00:32,910
page in this case where we have there with an idea of root.

8
00:00:33,840 --> 00:00:41,460
Instead of going back to a server and requesting info about the pages where the user navigates, we

9
00:00:41,460 --> 00:00:46,560
set up a routing on the client side without the page refreshers.

10
00:00:46,890 --> 00:00:54,120
To give you a visual example, navigate to IMGs and then import as always.

11
00:00:54,120 --> 00:00:55,670
You can call it whatever you like.

12
00:00:56,040 --> 00:01:00,590
My case, I'm going to go with Final, of course, from online.

13
00:01:00,610 --> 00:01:07,430
We're looking into Turrill, then we're looking at the folder number 11 and the final folder.

14
00:01:07,860 --> 00:01:14,040
So here where we have the advanced react in this case, I'm just going to add my final component to

15
00:01:14,040 --> 00:01:16,980
give you a good understanding of what we're going to create.

16
00:01:17,400 --> 00:01:24,960
So notice here how we have the number and then we have three links and check out the URL bar, as well

17
00:01:24,960 --> 00:01:34,230
as this refresh icon where notice as I'm going from one page to another one, I'm switching the URL,

18
00:01:34,620 --> 00:01:38,880
but we're not doing a full page refresh.

19
00:01:39,240 --> 00:01:47,060
So each and every time we navigate to about or people or home, we're not going to a server and fetching

20
00:01:47,070 --> 00:01:52,610
the data and then coming back is that all of this is happening on the client side.

21
00:01:52,980 --> 00:01:57,290
And of course, this is what we're going to create in the following windows.

22
00:01:57,720 --> 00:02:04,470
Now, when it comes to react, it does not have built in routing and we'll need to use an external package

23
00:02:04,470 --> 00:02:10,200
for that and the most popular routing library and reaction is by far the react router.

24
00:02:10,680 --> 00:02:12,360
But let me be very clear.

25
00:02:12,360 --> 00:02:19,230
It's not part of the official react, even though it might seem so because of its popularity, it is

26
00:02:19,230 --> 00:02:20,840
still an external package.

27
00:02:21,180 --> 00:02:28,040
If you check the folder for your computer, you will find a markdown file with more info.

28
00:02:28,410 --> 00:02:32,070
So what I would want right now is to remove my example.

29
00:02:32,640 --> 00:02:40,020
Hopefully you can see what we're going to create and then navigate to react router folder.

30
00:02:40,290 --> 00:02:44,850
And then you're looking for react router info marked on file.

31
00:02:45,300 --> 00:02:52,890
And here you'll find a link to official docs just so you can see where I'm getting the information from.

32
00:02:53,280 --> 00:03:01,350
And also keep in mind that for your own project, you'll have to install the react or order down first.

33
00:03:01,620 --> 00:03:05,770
And you do that by running NPM install, react, router down.

34
00:03:06,090 --> 00:03:08,250
Now, of course, I already installed this.

35
00:03:09,060 --> 00:03:16,680
So if you go to a package JSON, if you check out the packages, you'll see that there is react router

36
00:03:16,680 --> 00:03:21,540
dom and more specifically the version of five point you.

37
00:03:21,840 --> 00:03:28,020
Now just to showcase how we would install the package, I'll stop their server and then again we'll

38
00:03:28,020 --> 00:03:39,190
run and RPM and remember what was the command npm install and react router and then so that's what you

39
00:03:39,230 --> 00:03:41,190
need to do in your own project.

40
00:03:41,310 --> 00:03:47,970
You install the dependency and then it's going to get added to the package JSON and then of course you

41
00:03:47,970 --> 00:03:53,800
can start using it because you'll see that there's going to be some import in the upcoming videos.

42
00:03:54,030 --> 00:03:56,010
Now let me start up the server again.

43
00:03:56,010 --> 00:03:57,150
So we go Head Start.

44
00:03:57,420 --> 00:04:04,470
And the last thing that I would want to mention as far as the react router general info is the version

45
00:04:04,480 --> 00:04:04,780
number.

46
00:04:05,160 --> 00:04:09,780
It is safe to say that you'll be watching this in the future.

47
00:04:10,200 --> 00:04:15,620
And just like any other software, of course, there's going to be some updates.

48
00:04:16,110 --> 00:04:22,890
So if you're watching this and if you install it and you can see that the version number is already,

49
00:04:22,890 --> 00:04:30,120
for example, six, then of course you'll have to go to docs and see what are the changes, if there

50
00:04:30,150 --> 00:04:30,720
are any.

51
00:04:30,840 --> 00:04:34,710
And most likely there will be as far as the syntax.

52
00:04:35,010 --> 00:04:39,870
So the syntax that we're about to cover is for version five.

53
00:04:40,450 --> 00:04:41,430
Keep that in mind.

54
00:04:41,640 --> 00:04:46,100
Once they switch to a different version, it's a good chance of that.

55
00:04:46,110 --> 00:04:49,760
Also, some syntax will change as well.

56
00:04:50,190 --> 00:04:57,570
Now, you'll still be able to use this syntax if you go with this specific version, but if you want

57
00:04:57,570 --> 00:04:59,040
to use a newer version.

58
00:04:59,390 --> 00:05:06,410
If it is available already at the time, then, of course, you have to go to a doctor and make sure

59
00:05:06,410 --> 00:05:11,330
that you follow the proper syntax that relates to that specific version.