All language subtitles for 015 Outputting a List of Meetups_en

So for filling those pages with life,

I will start with that starting page.

So with index.js in the pages folder

with this index.js file.

In there, we can add our component

for example, the homepage component.

And of course also exports that,

that's always important.

And then we wanna return the JSX code

that defines this component,

and that therefore defines what should show up on the page.

And here, what should show up in the end

is our meetup list component.

And that's a component that wants a meetups prop here

which holds a list of meetups,

which we then map into a list of JSX elements.

Where every meetup needs to have an ID,

an image, a title, and an address.

And hence, when we use meetup lists in our page component

we need to make sure that we do provide

that meetups prop to it.

It's also worth noting that meetup list

like meetup item and so on,

is a regular React component.

It is however stored in a components' folder,

not in a pages folder.

Now that folder name is up to you.

The only reserved name in the end

is the page's folder name.

You can name your other folders however you want.

I named it components though,

because I do store React components in there.

But the important difference to the page components is

that those components stored in there

will not be loaded as pages automatically.

Instead, we can simply use them

in the JSX code of other components,

including page components.

So we can include the meetup list component

on our main page here, on the homepage.

Simply by going to that homepage component

and importing meetup lists there

from going up one level components,

meetups, meetup list.

So I import this component from this file

and then we can use it here.

And hence here we can, for example,

output meetup lists like this

and then set this meetups prop

which this component expects.

And for the moment we can then construct

some dummy meetups here,

later we'll be able to create

and store our own meetups in a database.

For the moment let's use some dummy meetups.

And that actually should be an array,

an array of meetup items where every item has an ID,

for example M1 for the first meetup,

where every meetup then has a title like a first meetup,

where every meetup then has an image.

And for this here, I'm using an image from Wikipedia

which is not taken by me

but which instead was taken by Tomas Wolf

to whom I therefore wanna give due credits.

So this image is taken by him.

And I'll just grab that image here,

grab the URL to that image

because we're not going to implement file upload here

and use that here as an image URL.

Now, every meetup should then also have an address

because that's another piece of data

which we extract in the meetup list component here.

So we wanna have that address field here as well.

And I'll set this to some address 5,

12345, Some City.

And we can also add a description

even though we don't need that yet, but I will add it here.

A description with, "this is our first meetup."

And now we can of course replicate this.

So duplicate this meetup

and give the second one an idea of M2

and then name it as second meetup,

and this is a second meetup.

And maybe change the address

and use a different image as well if you want to.

I'll stick to the same one.

And then we can pass this dummy meetups array

into this meetups prop of the meetup list component.

And that's all standard React.

There's nothing NextJS specific about that.

The only NextJS specific part here

is that we're in a special component

which is special because it's in such a page file.

Other than that, it's a regular React component.

And if we now save that,

if we save this and restart our development server here

because it crashed, because I had no page content initially.

If we visit local host 3000

we should see this on the screen.

This is not the finished look, but this shows that it works

and that our first page has loaded successfully.

And we're using another React component in that page,

a component which is not a page component,

that is also worth pointing out.

And with that, we got this page in place.

Let's now also work on that new meetup page

and let's make sure we render some content here as well.