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.
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
