Now we're making good progress here.
We got our own custom, reusable component
with our CSS modules based styles applied to it.
Before we dive into more important React features,
let's practice what we learned.
And for that, I want you to build
another new component,
a posts list component,
which in the end should render a list,
an unordered list, to be precise,
that includes these two posts.
And you should also edit the post component
to use a li instead of a div.
That however, is a very simple change applied like this.
The more important part,
is that you build that custom posts list component,
which uses the unordered list to output these two posts.
And you should then use the posts list component
and the app component,
instead of these two posts here.
So try doing this on your own first.
Here's a short post for you to post the video,
thereafter, we'll implement it together.
So did you succeed?
Let's implement it together.
For that here, in my components folder,
I'll add another new file,
because whilst not technically required,
it is considered a good practice
to put different components into different files.
And I'll name this file posts list .jsx,
since I wanna have a component named posts list in there.
Again, the file names just like the component names,
are up to you,
but you should try to choose names
that describe the purpose of the component,
and you should use this notation,
where also in the file name,
you start with an upper case character.
And if you have a name that consists of multiple words,
as it's the case here,
you should actually have a single word,
where every sub word, so to say,
starts with another capital character,
like the L in list here.
So that's the posts list component.
And here, I'll then add a function called posts list,
because you learned that,
components are in the end functions,
and I'll export it as a default here.
And then there, we wanna return some JSX code.
And the JSX code I do wanna return here,
is an unordered list.
Now, in that list, I wanna output my posts here,
which I already converted to list items,
so that we have semantically correct code.
So therefore, we should grab these two posts from app JSX
and cut them there,
and get rid of that import,
since we don't need the post component
and the app component anymore.
And instead, go to posts list
and paste the two post components in there.
Now in order to use the post component in this file though,
we have to import it.
So we have to import post from ./post,
the relative path to this post component file
seen from the post list component file.
With that, we have this separate list component here,
but now we have to output this list component
and the app component.
And doing that is rather simple as well.
First we have to import it,
so import posts list from ./components post list.
Here we need the components part
as part of the overall path,
because app is not in the components folder yet.
So we have to first go into that folder,
before we can then target the posts list component file.
And here we must start with an uppercase character,
as you learned.
But then we can use posts list like this in our JSX code.
With that saved, we have a list,
as you can tell by these bullet points here.
But of course, it's not really the look I'd like to have.
However, this is the solution to the exercise I gave you.
I wanna polish this solution though,
by also adding a postlist.module.cssfile,
and attached to find some styles,
which should be pasted into that postslist.module.cssfile.
And with those styles added here,
and this posts class being defined here,
we can and should, then also import classes
from ./postslist.module.css,
and apply that class here as a class name,
that posts class, as a class name, to the unordered list.
And with that, this starts to look nicer here.
Still not the final look I'd like to have,
but we're taking some steps in the right direction.
I now also wanna go to index CSS
and get rid of this text aligned center style
here in the body selector.
With that, I make sure that the text is left aligned,
which I think looks a bit nicer.
And with that, we now don't just have a nicer look,
but even more importantly,
we now have a never custom component,
and we can see how these different components work together.
We're using the post component multiple times,
so with multiple instances, as it's called,
with different configurations,
with help of our props here,
inside the posts list component.
And we're then using the posts list component
and the app component,
which in turn is used in main JSX to be output there.
And that's how you build React applications,
and how you build user interfaces
by composing them from different components.
So by combining these different building blocks,
these different components,
to come up with the final intended user interface.
Though this, of course, here is not
the final intended user interface,
instead we're just getting started,
and we're now ready to dive into another super important,
and for us, brand new React feature.