All language subtitles for 007 Exercise Add More Pages_en

We now have three pages in our

web application: the HomePage,

the ReviewsPage, that's visible

at the "/reviews" path,

and the review for Stardew Valley,

that has the game name in the path,

making it a clean URL,

which should also help search engines index

this page for the right keywords.

Now, as an exercise, I would like you

to create a couple more pages.

Let's say we want an "/about" page,

where the user can find more information

about our website.

And then we want to review another game,

in this case "Hollow Knight".

To follow the same pattern as our other review,

the path for this other game should

be "/reviews/hollow-knight".

As the contents for these new pages,

you can keep the same structure

as our existing pages;

just change the heading to say "About"

and "Hollow Knight" respectively,

and write whatever you like in the paragraph.

So, if you feel like doing this exercise,

please pause this video now,

and go and create two new pages,

accessible at the "/about" and "/reviews/hollow-knight"

paths.

I'll show you the solution in a few seconds.

Ok, let's take a look at the new pages.

If you did the exercise,

under "app" you should now have

a folder called "about",

containing a "page.jsx" file,

that exports a React component like this one.

And that page should be visible

under the "/about" path.

Of course, you might have written something

different in the paragraph,

and that's absolutely fine.

You should also have created another page,

under the "hollow-knight" folder,

nested inside "reviews".

Again, this file defines another React component,

and we can open it in the browser

as "/reviews/hollow-knight".

This is what that page looks like.

Ok. This was a fairly simple exercise

to reinforce how files in our project are

exposed as URL paths in our website.

Now, some people find it a bit strange at first,

to have all these files called "page.jsx".

For example, in Visual Studio Code you can use the

"Command + P" shortcut to quickly

find a file in your project.

(That will be "Control + P" if

you're on Windows or Linux.)

Now, if we search for "page", we'll see

many files all with the same name.

But we can also see the path next to each one,

so if we're looking for the "hollow-knight"

page for instance,

we can easily find the right one anyway.

In fact, we can also search by the path,

so if we start typing "hollow",

we'll find the right page straight away.

In my experience so far, having lots

of files all named "page." something

is not really a problem at all.

In fact, sometimes it can also be useful,

like, if you need to find all the pages

to modify an import or similar.