Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:04,110
Whenever you learn something new,
2
00:00:04,110 --> 00:00:06,130
it is important to practice it.
3
00:00:06,130 --> 00:00:08,320
And therefore, that's what we're going to do now
4
00:00:08,320 --> 00:00:10,060
over the next lectures.
5
00:00:10,060 --> 00:00:14,820
We're also going to dive into more React Router features.
6
00:00:14,820 --> 00:00:18,510
So the rest of this module is not just practicing
7
00:00:18,510 --> 00:00:21,690
but we're going to start with practicing what we learned
8
00:00:21,690 --> 00:00:23,880
because it is super important
9
00:00:23,880 --> 00:00:28,480
that you do understand React Router and how you can use it.
10
00:00:28,480 --> 00:00:31,780
Now attached you find a brand, "you starting project,"
11
00:00:31,780 --> 00:00:33,130
this project here.
12
00:00:33,130 --> 00:00:35,440
You can simply download it, extract it,
13
00:00:35,440 --> 00:00:38,720
run NPM install, and NPM start.
14
00:00:38,720 --> 00:00:41,330
There, you got some starting components
15
00:00:41,330 --> 00:00:44,210
which we'll use over the next lectures.
16
00:00:44,210 --> 00:00:47,680
And you've got an empty App.js file.
17
00:00:47,680 --> 00:00:50,410
I did already add React Router
18
00:00:50,410 --> 00:00:53,590
to the starting project package.js file.
19
00:00:53,590 --> 00:00:55,650
So when you ran and PIM install,
20
00:00:55,650 --> 00:00:58,900
you did already install React Router DOM.
21
00:00:58,900 --> 00:01:00,913
You don't need to install it separately.
22
00:01:01,800 --> 00:01:03,980
You would of course, need to install it
23
00:01:03,980 --> 00:01:08,023
if you work on a project that doesn't use React Router yet.
24
00:01:09,030 --> 00:01:11,320
Now with that, we're ready to dive in.
25
00:01:11,320 --> 00:01:15,290
And we're going to build this demo application here.
26
00:01:15,290 --> 00:01:18,690
An application where we can view some quotes,
27
00:01:18,690 --> 00:01:23,500
dive into specific quotes and add new quotes.
28
00:01:23,500 --> 00:01:26,730
For the moment all without a backend server,
29
00:01:26,730 --> 00:01:30,313
just locally in our client-side application.
30
00:01:31,260 --> 00:01:35,070
The quotes which we add also, won't actually be added
31
00:01:35,070 --> 00:01:38,980
to our list of quotes because we will not use Context
32
00:01:38,980 --> 00:01:41,500
or Redux or a backend for the moment,
33
00:01:41,500 --> 00:01:44,230
that is something which we'll add in a second step
34
00:01:44,230 --> 00:01:45,590
there after.
35
00:01:45,590 --> 00:01:47,120
So let's get started.
36
00:01:47,120 --> 00:01:51,310
And let's get started by defining the main routes we need
37
00:01:51,310 --> 00:01:53,690
in this application here.
38
00:01:53,690 --> 00:01:56,150
Now in the last lecture I showed you the kind
39
00:01:56,150 --> 00:01:59,910
of pages I wanna have in this example application.
40
00:01:59,910 --> 00:02:04,310
And there, we had a page which shows All Quotes.
41
00:02:04,310 --> 00:02:07,440
Then we had a Quote Detailed Page,
42
00:02:07,440 --> 00:02:11,420
When we click on a SingleQuote, we would go to that page.
43
00:02:11,420 --> 00:02:15,920
And we had that page for adding a brand new quote.
44
00:02:15,920 --> 00:02:19,870
So we got three different pages, three different routes
45
00:02:19,870 --> 00:02:21,660
which you want to register.
46
00:02:21,660 --> 00:02:24,470
Now you will get more out of this course
47
00:02:24,470 --> 00:02:27,090
and out of this section specifically,
48
00:02:27,090 --> 00:02:29,710
if you also tried these things on your own,
49
00:02:29,710 --> 00:02:31,170
if you practice on your own.
50
00:02:31,170 --> 00:02:34,440
And therefore before we add those pages together,
51
00:02:34,440 --> 00:02:36,420
and before we then add all the code
52
00:02:36,420 --> 00:02:39,870
for registering those pages as routes,
53
00:02:39,870 --> 00:02:41,760
try this on your own.
54
00:02:41,760 --> 00:02:45,420
Add a couple of page components, and then write all the
55
00:02:45,420 --> 00:02:49,660
routing code to register these page components
56
00:02:49,660 --> 00:02:53,320
as a different routes for different paths.
57
00:02:53,320 --> 00:02:56,070
The paths are up to you and make sure
58
00:02:56,070 --> 00:02:59,270
that you can navigate between those pages
59
00:02:59,270 --> 00:03:03,710
by entering these paths manually in the URL.
60
00:03:03,710 --> 00:03:07,030
So you can add links right now, but you don't have to
61
00:03:07,030 --> 00:03:08,610
but definitely make sure
62
00:03:08,610 --> 00:03:11,150
that you add all those page components
63
00:03:11,150 --> 00:03:13,000
and you registered them.
64
00:03:13,000 --> 00:03:15,060
And then offer a short pause
65
00:03:15,060 --> 00:03:18,630
which I give you to pause the video and try it on your own,
66
00:03:18,630 --> 00:03:20,513
we're going to do that together.
67
00:03:23,340 --> 00:03:25,160
So, where are you successful?
68
00:03:25,160 --> 00:03:27,250
Let's try this together.
69
00:03:27,250 --> 00:03:30,670
And therefore here in this app component function,
70
00:03:30,670 --> 00:03:34,950
we can import route this special route component
71
00:03:34,950 --> 00:03:38,290
from React Router DOM, because you'll learned
72
00:03:38,290 --> 00:03:42,930
that this is the component we use for defining routes.
73
00:03:42,930 --> 00:03:45,820
Now, I also want to import Switch right away,
74
00:03:45,820 --> 00:03:47,270
the Switch component,
75
00:03:47,270 --> 00:03:50,860
because I know that I want to have only one act of route
76
00:03:50,860 --> 00:03:52,490
at the same time.
77
00:03:52,490 --> 00:03:56,860
And then here in this app component, instead of this div,
78
00:03:56,860 --> 00:03:58,670
we can return Switch,
79
00:03:58,670 --> 00:04:02,310
and inside of Switch to find our different routes.
80
00:04:02,310 --> 00:04:04,540
Now every route then needs a path
81
00:04:04,540 --> 00:04:06,400
for which it becomes active.
82
00:04:06,400 --> 00:04:08,240
That's what you'll learned.
83
00:04:08,240 --> 00:04:11,800
And if we have a route that should render a list of quotes,
84
00:04:11,800 --> 00:04:15,680
that path could be /quotes.
85
00:04:15,680 --> 00:04:19,410
And then here, we wanna output the quotes component
86
00:04:19,410 --> 00:04:20,973
which we have yet to add.
87
00:04:22,300 --> 00:04:24,620
Then I'll add another route here
88
00:04:25,520 --> 00:04:27,216
with a path of, let's say,
89
00:04:27,216 --> 00:04:32,216
/quotes/quoteId to render the detailed page for a quote.
90
00:04:35,300 --> 00:04:40,010
Here we have a dynamic route, a dynamic path segment.
91
00:04:40,010 --> 00:04:42,500
That's another key feature we learned about
92
00:04:42,500 --> 00:04:47,210
so that we can load the same component for different quotes.
93
00:04:47,210 --> 00:04:51,663
And we encode the quote identifier in the URL
94
00:04:51,663 --> 00:04:55,513
so that we can get it inside of the loaded component.
95
00:04:56,590 --> 00:05:00,300
Now, we also have to add a component here, which we render.
96
00:05:00,300 --> 00:05:03,420
We don't have one yet, but before I added
97
00:05:03,420 --> 00:05:06,023
I will add my last and third route here.
98
00:05:07,800 --> 00:05:12,800
And that is a route that allows us to add a new quote.
99
00:05:12,870 --> 00:05:16,140
So the path here could be new-quote
100
00:05:16,140 --> 00:05:19,430
Now of course, all these paths are up to you.
101
00:05:19,430 --> 00:05:20,660
It's your page.
102
00:05:20,660 --> 00:05:24,071
And it simply depends on how you want your URLs
103
00:05:24,071 --> 00:05:24,933
to look like.
104
00:05:26,780 --> 00:05:28,500
Now, we have these free routes.
105
00:05:28,500 --> 00:05:31,620
Now we need free page components.
106
00:05:31,620 --> 00:05:35,720
And I do have this empty pages folder here already,
107
00:05:35,720 --> 00:05:39,110
you can add such a folder as well, if you don't have it.
108
00:05:39,110 --> 00:05:40,440
And in that folder,
109
00:05:40,440 --> 00:05:43,520
I wanna create these special react components
110
00:05:43,520 --> 00:05:45,010
which are responsible
111
00:05:45,010 --> 00:05:48,173
for rendering the different pieces of data.
112
00:05:49,130 --> 00:05:52,410
So in this pages folder, I'll add a new file
113
00:05:52,410 --> 00:05:56,280
and that could be named AllQuotes.js
114
00:05:56,280 --> 00:05:58,330
The file name is of course, up to you.
115
00:05:58,330 --> 00:06:00,370
This will then hold my component
116
00:06:00,370 --> 00:06:02,563
which displays all the quotes.
117
00:06:03,720 --> 00:06:08,720
We can also add a SingleQuote or QuoteDetail.js file,
118
00:06:09,630 --> 00:06:12,340
which will be used for that detail page
119
00:06:12,340 --> 00:06:14,980
and a NewQuote.js file
120
00:06:14,980 --> 00:06:17,883
which will hold dev for him for adding a new quote.
121
00:06:19,140 --> 00:06:20,830
Now, for the moment I'll just add
122
00:06:20,830 --> 00:06:23,720
basic component functions in there.
123
00:06:23,720 --> 00:06:26,110
So in the AllQuotes.js file,
124
00:06:26,110 --> 00:06:30,550
I'll add this component function here,
125
00:06:30,550 --> 00:06:34,963
copy that and add it to NewQuote as well,
126
00:06:35,970 --> 00:06:38,510
and then also added here to QuoteDetail
127
00:06:38,510 --> 00:06:40,033
and just change the name.
128
00:06:42,100 --> 00:06:44,800
Now we got these free component functions
129
00:06:44,800 --> 00:06:46,820
and then the AllQuotes page,
130
00:06:46,820 --> 00:06:51,470
we could return h1 tag, where we say, All Quotes Page
131
00:06:51,470 --> 00:06:54,010
and then copy this into NewQuote
132
00:06:54,860 --> 00:06:57,770
and say New Quote Page here
133
00:06:58,860 --> 00:07:02,100
and copy it one more time into QuoteDetail
134
00:07:02,100 --> 00:07:06,723
and hence say Quote Detailed Page here.
135
00:07:08,930 --> 00:07:12,350
And now in App.js, we can use these free components
136
00:07:12,350 --> 00:07:15,090
just as we learned that a couple of minutes ago.
137
00:07:15,090 --> 00:07:16,823
We can import AllQuotes
138
00:07:17,850 --> 00:07:21,271
from ./pages/AllQuotes.
139
00:07:21,271 --> 00:07:23,170
We can import QuoteDetail
140
00:07:23,170 --> 00:07:27,250
from ./pages/QuoteDetail
141
00:07:27,250 --> 00:07:30,049
And we can import NewQuote
142
00:07:30,049 --> 00:07:31,460
from ./pages/NewQuote
143
00:07:33,740 --> 00:07:37,570
and then use these free components down here.
144
00:07:37,570 --> 00:07:42,570
Here, we have the AllQuotes component,
145
00:07:43,150 --> 00:07:47,480
here we have the QuoteDetail component
146
00:07:47,480 --> 00:07:50,443
and here we have the NewQuote component.
147
00:07:51,300 --> 00:07:55,900
And with that, we've finished the definition of our routes.
148
00:07:55,900 --> 00:07:57,730
Now there's one thing missing though.
149
00:07:57,730 --> 00:08:00,013
And do you remember what it is?
150
00:08:00,880 --> 00:08:02,790
Well to use React Router,
151
00:08:02,790 --> 00:08:05,880
it's not enough to just define those routes.
152
00:08:05,880 --> 00:08:09,370
You also need to activate the router.
153
00:08:09,370 --> 00:08:13,050
And you do that by wrapping your route component,
154
00:08:13,050 --> 00:08:16,030
the app component in the index.js file
155
00:08:16,030 --> 00:08:19,810
with this special BrowserRouter component.
156
00:08:19,810 --> 00:08:22,910
So for this, we can import BrowserRouter
157
00:08:22,910 --> 00:08:26,640
from React Router DOM,
158
00:08:26,640 --> 00:08:28,460
and then wrap the app component
159
00:08:28,460 --> 00:08:33,460
with this special BrowserRouter component, just like this.
160
00:08:35,830 --> 00:08:38,370
Now we act away to the BrowserRouter.
161
00:08:38,370 --> 00:08:40,860
And now if we save this,
162
00:08:40,860 --> 00:08:44,400
if I reload my page on local host free thousand,
163
00:08:44,400 --> 00:08:45,600
I see nothing.
164
00:08:45,600 --> 00:08:48,100
But if I enter /quotes here
165
00:08:48,100 --> 00:08:50,540
I see my All Quotes Page.
166
00:08:50,540 --> 00:08:54,090
If I enter /quotes/q1
167
00:08:54,090 --> 00:08:56,170
I also see the All Quotes Page.
168
00:08:56,170 --> 00:08:58,240
And what could be causing this?
169
00:08:58,240 --> 00:09:01,433
Why am I not seeing the Quote Detailed Page here?
170
00:09:02,910 --> 00:09:05,400
Well, because you have to remember
171
00:09:05,400 --> 00:09:09,150
how React Router matches your routes.
172
00:09:09,150 --> 00:09:10,670
I mentioned that it goes
173
00:09:10,670 --> 00:09:14,180
for your routes top to bottom and thanks to Switch,
174
00:09:14,180 --> 00:09:17,720
it will then stop as soon as it has a match.
175
00:09:17,720 --> 00:09:19,770
Now, when it comes to matching,
176
00:09:19,770 --> 00:09:22,970
React Router by default looks at the beginning,
177
00:09:22,970 --> 00:09:26,890
at the start of the path and then matches this here,
178
00:09:26,890 --> 00:09:30,670
with the start of the actual URL path.
179
00:09:30,670 --> 00:09:34,420
So if you are on /quotes/q1,
180
00:09:34,420 --> 00:09:38,430
/quotes is definitely part of that path.
181
00:09:38,430 --> 00:09:41,603
This path starts with /quotes.
182
00:09:42,630 --> 00:09:45,520
So they offer here to avoid this
183
00:09:45,520 --> 00:09:48,900
and to make sure that this route actually becomes active.
184
00:09:48,900 --> 00:09:53,430
This second route, we can add this exact prop here
185
00:09:53,430 --> 00:09:55,220
or we change the order.
186
00:09:55,220 --> 00:09:57,480
That would be an alternative.
187
00:09:57,480 --> 00:10:00,130
Here I'll work with the exact prop.
188
00:10:00,130 --> 00:10:02,220
And if we add to this prop here
189
00:10:02,220 --> 00:10:04,440
now I'm on the Quote Detail Page.
190
00:10:04,440 --> 00:10:09,440
If I enter Q1 or Q2 or anything else after /quotes.
191
00:10:10,260 --> 00:10:12,717
And if we visit /new quote
192
00:10:12,717 --> 00:10:15,270
then I'm on the New Quote Page.
193
00:10:15,270 --> 00:10:16,990
So that's now all working,
194
00:10:16,990 --> 00:10:19,790
and with that, we already applied a lot
195
00:10:19,790 --> 00:10:23,900
of the things we learned over the last lectures.
196
00:10:23,900 --> 00:10:26,410
Now, as a next step, make sure
197
00:10:26,410 --> 00:10:30,910
that you redirect from /nothing to /quotes
198
00:10:30,910 --> 00:10:34,440
so that if we enter just my domain /nothing
199
00:10:34,440 --> 00:10:37,090
we still get to the Quotes Page
200
00:10:37,090 --> 00:10:42,090
and also make sure that in the QuoteDetail component.
201
00:10:42,420 --> 00:10:46,880
So this component, you extract the actual quote ID
202
00:10:46,880 --> 00:10:48,130
which is part of the URL,
203
00:10:49,150 --> 00:10:51,590
and then simply log it to the console
204
00:10:51,590 --> 00:10:54,200
or output that value on the screen.
205
00:10:54,200 --> 00:10:56,150
We'll do it together in the next lecture
206
00:10:56,150 --> 00:10:58,653
but definitely try it on your own first.
16054
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.