So let's continue working on
the featured posts now,
now that we added the navigation and so on.
The goal of the featured posts component
is to output some posts which we,
as the owner of the block, marked as featured.
Now, we will add posts
and mark them as featured in a later step
but we can already start
with outputting some dummy posts here for the moment.
Therefore, in featured posts
I'll again create a basic component, featured posts
and, you've guessed it, we will export it,
like we always did.
Now we have a featured posts module CSS file
and we will need it so we will import classes
from that featured posts module CSS file already.
And then here, in that featured posts component
I again want to create another section
which will receive a class of latest,
because that's one of the classes that I pre-defined
in the CSS file.
Then a heading for this section where I say featured posts
and then below that a list of posts, or a grid of posts.
And for this I'll actually create a separate component.
Why?
Because we will then use that same list, or grid,
as it will actually be on the all posts page.
On both the starting page in the featured posts component,
as well as on the all posts page,
I want to output posts in the same way.
I want to render a grid of post cards, so of post items.
I want to render those as a grid
and these items then should be clickable
and take us to the individual post.
The only difference is the number of posts
and the actual posts that are being rendered,
but the way that they are presented will always be the same.
Hence we can create a reusable component for that
and that is what I will do.
In the components folder I'll create a new sub-folder
which I'll name posts,
which should hold all the posts specific components.
And we could argue that featured posts
is also a posts specific component
but it's even more specific to the home page
because we only use it there,
which is why I keep it in the home page folder.
Now, in that posts folder
I'll add a posts dash grid component file though
which will then render this grid of posts.
And now for that posts grid,
you already find a posts grid module CSS file attached
which we will need in a second,
so you can download that
and add it in the posts grid JavaScript file.
Now you'll also find attached a post item module CSS file
and you can download and add that as well,
also in the posts folder
because we will also create a post item JS file next to that
which will hold a single post item.
The post grid will render a couple of post items
and I'll split the grid and the actual items
into separate components
to keep every component lean and maintainable.
Let's start working on the posts grid component though.
In that posts grid file I'll add a function,
posts grid, which is my default component function
which, as always, is then just exported.
Of course, by the way,
you could create a snippet for this in Visual Studio Code
to save some time,
but here I'll just write it manually all the time
and then in the posts grid component
we want to return to JSX code.
That should be output here.
Now, the JSX code is, again, very simple here.
It will be an unordered list of posts items.
Now the data for those posts
should be received from outside, though.
I do expect that I get props here
and in my props I want to get a special posts prop.
Now, the props name is up to you as its your component
you just need to make sure that you then use that prop name
for passing data into this component.
So then I what to output my posts dynamically here
by mapping every post into a post item
and we have yet to add this component,
but that's my goal here.
I want to output a list of posts
where I map my posts data into post item components.
That's the goal here.
Now, we will need to import post item for that
from the post item file we just added
and this file is empty right now,
but we will work on that soon,
and we'll also need some styling
so I'll import some classes from
dot slash posts grid dot module dot CSS.
And that is that posts grid CSS file for this component
which has a class
which should be added to the unordered list.
There I want to add the grid class,
which is defined in posts grid,
and there we use the CSS grid feature
to render some grid columns.
Okay, so that's that.
Now let's work on the post item, on the post item component
which outputs an individual item in that grid of posts.