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.