1
00:00:01,260 --> 00:00:04,500
‫So this section is all about React Router

2
00:00:04,500 --> 00:00:06,660
‫and single-page applications.

3
00:00:06,660 --> 00:00:10,683
‫And so let's start by understanding what these actually are.

4
00:00:12,480 --> 00:00:15,930
‫So when we use routing in a web application,

5
00:00:15,930 --> 00:00:18,360
‫we basically match different URLs

6
00:00:18,360 --> 00:00:21,780
‫to different views in the user interface.

7
00:00:21,780 --> 00:00:24,270
‫In the specific case of React,

8
00:00:24,270 --> 00:00:29,010
‫we match each URL to a specific React component,

9
00:00:29,010 --> 00:00:30,990
‫and we call each of these matches

10
00:00:30,990 --> 00:00:35,160
‫between a URL and a component a route.

11
00:00:35,160 --> 00:00:39,360
‫Then when one of those specific URLs gets visited,

12
00:00:39,360 --> 00:00:43,200
‫the corresponding React component will be rendered.

13
00:00:43,200 --> 00:00:46,200
‫For example, we could show this homepage,

14
00:00:46,200 --> 00:00:48,210
‫so this home component,

15
00:00:48,210 --> 00:00:52,920
‫whenever a user visits the route URL of example.com.

16
00:00:52,920 --> 00:00:57,330
‫But when they go to /login on the same URL,

17
00:00:57,330 --> 00:01:00,090
‫we then show the login component.

18
00:01:00,090 --> 00:01:02,190
‫And if they log in successfully,

19
00:01:02,190 --> 00:01:06,240
‫we can then redirect them to the /app path,

20
00:01:06,240 --> 00:01:09,878
‫so to show them the app screen like this.

21
00:01:09,878 --> 00:01:12,990
‫So in this example, we have three routes

22
00:01:12,990 --> 00:01:14,970
‫that the user can visit,

23
00:01:14,970 --> 00:01:19,170
‫the route URL, /login and /app,

24
00:01:19,170 --> 00:01:22,203
‫which will all render different React components.

25
00:01:23,130 --> 00:01:26,730
‫So basically, this enables users to navigate

26
00:01:26,730 --> 00:01:29,610
‫between different screens of the application

27
00:01:29,610 --> 00:01:33,660
‫by simply using links and the URL in the browser.

28
00:01:33,660 --> 00:01:36,300
‫At the same time, routing like this

29
00:01:36,300 --> 00:01:39,240
‫keeps the user interface nicely in sync

30
00:01:39,240 --> 00:01:41,490
‫with the current browser URL,

31
00:01:41,490 --> 00:01:43,890
‫which has a couple of nice advantages

32
00:01:43,890 --> 00:01:45,633
‫that we're gonna discuss later.

33
00:01:46,470 --> 00:01:49,800
‫Now, this type of routing that I just described here

34
00:01:49,800 --> 00:01:53,070
‫only works this way on the client side,

35
00:01:53,070 --> 00:01:55,350
‫so in the user's browser.

36
00:01:55,350 --> 00:01:58,710
‫There is, of course, also routing on the server side,

37
00:01:58,710 --> 00:02:01,560
‫but not in client side React applications

38
00:02:01,560 --> 00:02:03,690
‫like the ones that we have been building

39
00:02:03,690 --> 00:02:06,840
‫and that we will build in this section.

40
00:02:06,840 --> 00:02:09,540
‫But anyway, most front-end frameworks

41
00:02:09,540 --> 00:02:12,570
‫have these client side routing capabilities

42
00:02:12,570 --> 00:02:15,270
‫baked right into the framework.

43
00:02:15,270 --> 00:02:17,160
‫But React is different,

44
00:02:17,160 --> 00:02:20,040
‫because it relies on third party packages

45
00:02:20,040 --> 00:02:22,470
‫for many different functionalities,

46
00:02:22,470 --> 00:02:24,813
‫and routing is one of them.

47
00:02:25,650 --> 00:02:28,950
‫So in React, routing is usually handled

48
00:02:28,950 --> 00:02:33,210
‫by this third party package called React Router.

49
00:02:33,210 --> 00:02:36,150
‫And this is probably the most important

50
00:02:36,150 --> 00:02:40,140
‫and most used React third party library out there.

51
00:02:40,140 --> 00:02:42,480
‫So if you want to learn React development,

52
00:02:42,480 --> 00:02:45,060
‫you need to learn React Router.

53
00:02:45,060 --> 00:02:48,540
‫The reason for that is that routing is fundamental

54
00:02:48,540 --> 00:02:49,800
‫for building something

55
00:02:49,800 --> 00:02:52,923
‫that we call single-page applications.

56
00:02:54,930 --> 00:02:59,370
‫So single-page applications, or SPAs for short,

57
00:02:59,370 --> 00:03:02,880
‫are web applications that are executed entirely

58
00:03:02,880 --> 00:03:04,200
‫on the client,

59
00:03:04,200 --> 00:03:07,140
‫so only in the user's web browser.

60
00:03:07,140 --> 00:03:09,210
‫And just like we discussed before,

61
00:03:09,210 --> 00:03:12,060
‫single-page applications rely heavily

62
00:03:12,060 --> 00:03:14,190
‫on the concept of routes

63
00:03:14,190 --> 00:03:17,940
‫where different URLs correspond to different views.

64
00:03:17,940 --> 00:03:21,510
‫And here is how single-page applications work.

65
00:03:21,510 --> 00:03:25,080
‫Whenever a user clicks on a special link provided

66
00:03:25,080 --> 00:03:29,550
‫by the Router, the URL in the browser simply changes.

67
00:03:29,550 --> 00:03:31,140
‫In the case of React,

68
00:03:31,140 --> 00:03:34,473
‫this job is usually done by React Router.

69
00:03:35,430 --> 00:03:38,280
‫Now, changing the URL will then trigger

70
00:03:38,280 --> 00:03:41,580
‫the DOM to be updated as a result.

71
00:03:41,580 --> 00:03:43,620
‫And in single-page applications,

72
00:03:43,620 --> 00:03:46,740
‫it's always JavaScript that will update the DOM

73
00:03:46,740 --> 00:03:49,050
‫and therefore the page.

74
00:03:49,050 --> 00:03:52,170
‫So usually on a normal webpage,

75
00:03:52,170 --> 00:03:53,910
‫when we click on a link,

76
00:03:53,910 --> 00:03:57,240
‫the browser will load a completely new page

77
00:03:57,240 --> 00:04:01,050
‫and then show us that new page, right?

78
00:04:01,050 --> 00:04:05,340
‫But single-page applications are completely different.

79
00:04:05,340 --> 00:04:08,370
‫The page is simply updated by JavaScript,

80
00:04:08,370 --> 00:04:12,900
‫which means that there will never be a complete page reload.

81
00:04:12,900 --> 00:04:16,950
‫And that's the whole point of the single-page application.

82
00:04:16,950 --> 00:04:20,520
‫It's the entire app in just one page.

83
00:04:20,520 --> 00:04:23,160
‫So without any hard reloads.

84
00:04:23,160 --> 00:04:25,290
‫This makes the web application feel

85
00:04:25,290 --> 00:04:29,490
‫just like a native desktop or a mobile application,

86
00:04:29,490 --> 00:04:33,003
‫which is really a fantastic user experience.

87
00:04:34,110 --> 00:04:38,190
‫Now, going back to React, whenever the URL is changed,

88
00:04:38,190 --> 00:04:42,090
‫React Router and React itself will update the DOM

89
00:04:42,090 --> 00:04:44,370
‫by simply rendering the component

90
00:04:44,370 --> 00:04:47,220
‫that corresponds to the new URL.

91
00:04:47,220 --> 00:04:49,860
‫And then, of course, the whole cycle

92
00:04:49,860 --> 00:04:53,635
‫can be repeated as many times as necessary.

93
00:04:53,635 --> 00:04:57,870
‫So each time the user keeps clicking on a Router link,

94
00:04:57,870 --> 00:05:01,020
‫that will change the URL and the component

95
00:05:01,020 --> 00:05:03,270
‫that's being displayed on the screen,

96
00:05:03,270 --> 00:05:06,030
‫all without reloading the page.

97
00:05:06,030 --> 00:05:09,180
‫Now, it's quite common that some pages need

98
00:05:09,180 --> 00:05:11,490
‫to display some external data,

99
00:05:11,490 --> 00:05:13,800
‫but that's not a problem at all.

100
00:05:13,800 --> 00:05:17,370
‫Whenever that happens, a component can just load

101
00:05:17,370 --> 00:05:19,860
‫some additional data from a server,

102
00:05:19,860 --> 00:05:23,700
‫usually from some kind of web API.

103
00:05:23,700 --> 00:05:27,540
‫So while the single-page app itself runs entirely

104
00:05:27,540 --> 00:05:30,060
‫on the client, it can always communicate

105
00:05:30,060 --> 00:05:34,110
‫with a server in order to fetch some data that it needs,

106
00:05:34,110 --> 00:05:38,340
‫just like we have been doing before in other applications.

107
00:05:38,340 --> 00:05:42,450
‫What we cannot do is to load a completely new page,

108
00:05:42,450 --> 00:05:46,396
‫because then it would no longer be a single-page app.

109
00:05:46,396 --> 00:05:50,550
‫Now, we could actually say that all React apps

110
00:05:50,550 --> 00:05:53,430
‫are in fact single-page applications,

111
00:05:53,430 --> 00:05:57,750
‫because all of them are never reloaded, right?

112
00:05:57,750 --> 00:06:00,570
‫So think of all the apps that we have built

113
00:06:00,570 --> 00:06:02,070
‫up until this point.

114
00:06:02,070 --> 00:06:05,730
‫They were all apps where React updated the Dom,

115
00:06:05,730 --> 00:06:09,240
‫and so they didn't have to reload ever.

116
00:06:09,240 --> 00:06:11,820
‫However, in a professional application,

117
00:06:11,820 --> 00:06:14,010
‫that's just not enough.

118
00:06:14,010 --> 00:06:18,570
‫So big and complex applications rely on your URLs

119
00:06:18,570 --> 00:06:20,640
‫and need the routing capabilities

120
00:06:20,640 --> 00:06:22,680
‫that I described in this lecture,

121
00:06:22,680 --> 00:06:24,120
‫because only then,

122
00:06:24,120 --> 00:06:27,870
‫they can become real single-page applications.

123
00:06:27,870 --> 00:06:29,820
‫And so with that being said,

124
00:06:29,820 --> 00:06:32,370
‫let's now finally go back to code

125
00:06:32,370 --> 00:06:34,830
‫and start implementing our own

126
00:06:34,830 --> 00:06:37,293
‫real single-page applications.