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.