Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:05,319
We now have three pages in our
2
00:00:05,319 --> 00:00:07,638
web application: the HomePage,
3
00:00:07,715 --> 00:00:10,387
the ReviewsPage, that's visible
4
00:00:10,387 --> 00:00:12,369
at the "/reviews" path,
5
00:00:12,555 --> 00:00:15,065
and the review for Stardew Valley,
6
00:00:15,065 --> 00:00:18,119
that has the game name in the path,
7
00:00:18,119 --> 00:00:20,039
making it a clean URL,
8
00:00:20,126 --> 00:00:23,343
which should also help search engines index
9
00:00:23,343 --> 00:00:25,811
this page for the right keywords.
10
00:00:25,886 --> 00:00:28,662
Now, as an exercise, I would like you
11
00:00:28,662 --> 00:00:30,913
to create a couple more pages.
12
00:00:30,988 --> 00:00:33,962
Let's say we want an "/about" page,
13
00:00:33,962 --> 00:00:36,939
where the user can find more information
14
00:00:36,939 --> 00:00:38,279
about our website.
15
00:00:38,354 --> 00:00:41,094
And then we want to review another game,
16
00:00:41,094 --> 00:00:43,307
in this case "Hollow Knight".
17
00:00:43,307 --> 00:00:46,745
To follow the same pattern as our other review,
18
00:00:46,745 --> 00:00:49,724
the path for this other game should
19
00:00:49,724 --> 00:00:52,107
be "/reviews/hollow-knight".
20
00:00:52,193 --> 00:00:55,183
As the contents for these new pages,
21
00:00:55,183 --> 00:00:57,446
you can keep the same structure
22
00:00:57,446 --> 00:00:59,051
as our existing pages;
23
00:00:59,124 --> 00:01:02,008
just change the heading to say "About"
24
00:01:02,008 --> 00:01:04,512
and "Hollow Knight" respectively,
25
00:01:04,587 --> 00:01:07,513
and write whatever you like in the paragraph.
26
00:01:07,513 --> 00:01:10,622
So, if you feel like doing this exercise,
27
00:01:10,622 --> 00:01:12,745
please pause this video now,
28
00:01:12,821 --> 00:01:15,355
and go and create two new pages,
29
00:01:15,355 --> 00:01:21,577
accessible at the "/about" and "/reviews/hollow-knight"
30
00:01:21,577 --> 00:01:22,256
paths.
31
00:01:22,369 --> 00:01:28,046
I'll show you the solution in a few seconds.
32
00:01:28,046 --> 00:01:30,856
Ok, let's take a look at the new pages.
33
00:01:30,856 --> 00:01:32,612
If you did the exercise,
34
00:01:32,612 --> 00:01:34,934
under "app" you should now have
35
00:01:34,934 --> 00:01:36,732
a folder called "about",
36
00:01:36,806 --> 00:01:39,744
containing a "page.jsx" file,
37
00:01:39,744 --> 00:01:43,467
that exports a React component like this one.
38
00:01:43,467 --> 00:01:46,249
And that page should be visible
39
00:01:46,249 --> 00:01:48,403
under the "/about" path.
40
00:01:48,492 --> 00:01:50,713
Of course, you might have written something
41
00:01:50,713 --> 00:01:52,108
different in the paragraph,
42
00:01:52,160 --> 00:01:53,895
and that's absolutely fine.
43
00:01:53,895 --> 00:01:56,758
You should also have created another page,
44
00:01:56,758 --> 00:01:59,497
under the "hollow-knight" folder,
45
00:01:59,497 --> 00:02:01,489
nested inside "reviews".
46
00:02:01,572 --> 00:02:05,143
Again, this file defines another React component,
47
00:02:05,143 --> 00:02:08,140
and we can open it in the browser
48
00:02:08,140 --> 00:02:10,684
as "/reviews/hollow-knight".
49
00:02:10,775 --> 00:02:13,579
This is what that page looks like.
50
00:02:13,579 --> 00:02:16,998
Ok. This was a fairly simple exercise
51
00:02:16,998 --> 00:02:20,956
to reinforce how files in our project are
52
00:02:20,956 --> 00:02:24,431
exposed as URL paths in our website.
53
00:02:24,528 --> 00:02:27,922
Now, some people find it a bit strange at first,
54
00:02:27,922 --> 00:02:32,153
to have all these files called "page.jsx".
55
00:02:32,153 --> 00:02:35,704
For example, in Visual Studio Code you can use the
56
00:02:35,704 --> 00:02:38,047
"Command + P" shortcut to quickly
57
00:02:38,047 --> 00:02:40,036
find a file in your project.
58
00:02:40,178 --> 00:02:42,216
(That will be "Control + P" if
59
00:02:42,216 --> 00:02:44,118
you're on Windows or Linux.)
60
00:02:44,186 --> 00:02:47,082
Now, if we search for "page", we'll see
61
00:02:47,082 --> 00:02:49,606
many files all with the same name.
62
00:02:49,680 --> 00:02:53,131
But we can also see the path next to each one,
63
00:02:53,131 --> 00:02:56,098
so if we're looking for the "hollow-knight"
64
00:02:56,098 --> 00:02:57,340
page for instance,
65
00:02:57,409 --> 00:03:00,040
we can easily find the right one anyway.
66
00:03:00,040 --> 00:03:02,790
In fact, we can also search by the path,
67
00:03:02,790 --> 00:03:05,421
so if we start typing "hollow",
68
00:03:05,421 --> 00:03:08,074
we'll find the right page straight away.
69
00:03:08,074 --> 00:03:11,125
In my experience so far, having lots
70
00:03:11,125 --> 00:03:14,177
of files all named "page." something
71
00:03:14,261 --> 00:03:16,431
is not really a problem at all.
72
00:03:16,431 --> 00:03:19,355
In fact, sometimes it can also be useful,
73
00:03:19,355 --> 00:03:22,400
like, if you need to find all the pages
74
00:03:22,400 --> 00:03:24,820
to modify an import or similar.
5413
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.