All language subtitles for 007 Starting Work On The _Featured Posts_ Part_Downloadly.ir_en

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.