Original subtitles

Now, let's start with the homepage.

The goal is to show the featured events

and therefore here we wanna get all featured events.

For this in the dummy-data.js file

I did prepare a getFeaturedEvents function

which is exported which accesses the dummy_events array

and then filters for events where there is

featured flag is set to true

and all these event objects do have is featured flag

which is either false or true.

Hence, here we can now get all our featuredEvents

by using this getFeaturedEvents function.

Now for this, you need to import it

from dummy_data of course.

You need to import getFeaturedEvents from dummy_data.

So, call get featured events it's a function

so make sure you execute it

and store the result in a featured events constant.

And now that we got the featured events

we wanna output them down there.

Now for this we can add an unordered list here

where we loop through all the featured events

but I will actually create

a brand new standard react component for that

because it is generally a good practice

to split your application and your JSX code

into multiple smaller building blocks

into multiple components therefore

and then combine those components

to compose your overall application from those components.

Hence, we wanna to add a regular react component

and the question now is where do we store such a component?

That is generally up to you

but it should not be in the pages folder.

In the pages folder, you should only have page components

because whichever files you create in here,

those files will then automatically

lead to routs being generated.

So, next JS will pick up any files stored in pages

and generate routs for them

and for the regular components we don't want that.

A list component here should not be reachable through a rout

instead I wanna use it in the JSX code of some other

component of this homepage component for example.

And therefore you don't store

regular components in the pages folder

but instead we create a brand new folder

for example, one named components

but you can use any name you want but components is a name

that of course makes sense I would argue.

Now in there, I will add any events sub-folder

where I wanna store all my events related components.

and then in this events sub-folder

I will add a file and event-list.js file

which will hold the event list component.

Regarding the file naming it's up to you

how you wanna name this.

You will also often see a file naming convention like this

for JavaScript files that hold react components

for example, I use this notation in my react course.

In next projects I often saw this notation

so all lowercase curve up case and therefore

I will stick to it but it is totally up to you

there is no best practice or a bad way of doing it

you can name those files however you want.

And now in the event-list.js file

I wanna set up my event list functional component

which will be responsible for rendering a list of events

hence it will use props

because those events should be passed in from outside

so that we can reuse the same event list component

on the homepage where we then have some featured events

and on the all events page

where we have a long list of all events.

The event list components shouldn't care about

where the events are coming from

but it should only care about outputting the events

hence it receives props so that the actual event items

are passed in from outside from the place

where the event data is fetched.

Hence, in here I just in the end wanna return

and unordered list with all those events

and then simply expect that on the props

we get our let's say items prop

and I'm using object destructuring to pull

that prop out of the props object

of course you don't need to do that

you could also just write

props.items down there I used object destructuring

so I will just write items but that's up to you.

Of course the key name you use is all up to you

it doesn't have to be items

that's just the name I will be using here

but since it's your component

you can name this however you want.

So, then we have those items

and now we wanna map through them

to output multiple list items.

So to map our item object data which has this shape here

into a list item into a JSX element.

And therefore we go through all the events in the end

we pass an anonymous function to map

and then create a list item for every event

we're getting here.

Now, before we continue working on that

I will export this EventList component

and I now want to create a brand new component

which actually defines the JSX code

for such a single event list item.

So, therefore I'll add a new file

next to the EventList JavaScript file

and that's the event-item.js file.

Now again, the file name of course is up to you.

And in here in this file I'll add a function EventItem

I also expect some props here

because to concrete data for a single rendered event item

also should be coming from outside of this component here

and of course we also wanna export this EventItem.

And now in here, I wanna return a list item

and then set up all the HTML code in the end

that defines how such an event items should be output.

We'll work on that in a second.

First of all, in event-list.js,

we can now import EventItem from ./event-item

so from that file we just added

and then map our events to EventItem objects like this

so two EventItem components in the end.

And now we need to pass some data into EventItem

the event data we're getting here

in the event-list component

and in event item we then define the JS extractor for this.

And that's what we're going to do in the next lecture.