Now, let's start with that card look.
In case, it's not clear what I mean,
I mean that look, which we all used earlier
for the first demo project,
where we simply have a nice white background
and a slight drop shadow.
And I'd like to have that for every meetup item.
Now, we can solve this by adding a couple of CSS classes
in the meetup item module CSS file,
and then changing the look of our list item
that would work.
But this card look is so common
that we may also want to use it
in our components of this application.
And we will actually use it in our components later.
That's why I want to create a separate reusable component,
which should act as a wrapper around our components,
and just give those components some styling,
which we then reuse.
And for this in the components folder,
I'll add a new sub folder, which I just want to name UI
for user interface. The name is up to you, of course.
In there,
I want to store some general user interface components,
which don't belong to a specific feature,
but instead are used in different places of the app.
And here, I'll add a card JS file
and attached you find a card module CSS file,
which you can simply add next to this card JS file.
And then the car JS file,
we'll now create a component as we did it before,
simple functional component and export it of course.
And we'll also import the styling,
import classes from "./card.module CSS."
And then in the component function, return a simple div,
where we set the class name to classes.card.
Now, the special thing about this component is,
that this should now be the first custom component,
which we can wrap around JSX content.
Because the goal is to use this card components
such that on a meetup item, inside of this list item,
we can use card.
And for this you need to add the import,
so import card from going up one level diving into UI card.
And we can wrap card around that JSX content
so that we can use the card component like this.
That's the goal.
But at the moment, if you save all files,
the result is that you don't see anything.
And the reason is that at the moment,
this card component simply swallows everything we wrap
and throws it away, you could say.
Because this card component just renders a div,
and it doesn't know what it should do
with any wrapped content.
Now, it's such a common case, though,
that you build components
that should wrap itself around more JSX content.
So you could say that you want to inject JSX content
into this component.
That react, of course has a solution for this case.
And this solution, again, is related to props.
We learned that we can pass props
by adding attributes to an element, and that does work.
But you can also add a special prop
by passing content between the opening and closing text.
And that content is then exposed under that special prop
inside of that wrapping component.
So here we accept the props parameter again.
And then between the div text,
I want to output props.children.
The children prop is a special prop,
which every component receives by default.
And children always holds the content,
which is passed between the opening
and closing component text.
So this JSX content,
that is the value stored in that children prop in this case,
when we use card in this component like this.
And now I'm just outputting the value stored in children
between these div text.
And with that if we reload,
we now have this slight card look
and we see a drop shadow here.
Since we take up too much width,
we don't see it perfectly, but we can see it a bit.
And if we inspect this in the div tools,
we see that every meetup item here
has this div with the card class.
The name was transformed because of that CSS modules feature
but it has that div with a card class
wrapped around these other divs image content
and actions inside of the list item.
So that wrapping works,
and that is another very important technique
when it comes to composing user interfaces
with react components
and that's why we also cover it here.
And we can now use this technique as well
for setting up a general layout for this application
because I'd like to have more white space
around the content here.
And for this, I'll go to the layout folder
and add a layout component in there.
Attached you also find a layout module CSS file,
which you can add next to this JavaScript file.
And then here in layout JS,
we can create a layout component function
and export it as a default.
And import classes here from "./layout.module.css,"
and then in here, return our layout.
And that could be a div with our main navigation, let's say.
So from app JS, I'll cut main navigation
and remove the imports there.
And instead, in the layout component, I'll add that here.
And therefore, of course,
also add an import of main navigation
from that main navigation JavaScript file,
which is next to the layout file.
And below that, we could use the regular main HTML element,
and then use the layout component such that we wrap it
around the actual JSX code that should be rendered.
So we could say that in app JS,
we want to wrap the content selected and rendered
by the router with our layout.
So here in app JS,
we can import layout from going up
diving into the components folder layout, layout.
And instead of having this useless wrapping div,
we could use our own layout component for wrapping here.
And now this content here, the actual route contents,
the page component that is being loaded,
should be rendered inside of this main block.
And we can again achieve this with props children.
We can again accept props here,
and then output props.children
here inside of the main element.
And that will then just forward that content,
which is between our layout text.
So this content here into that main element.
Now here, we should also add
a class name of classes.main for styling,
and with that, if we save this,
now we're utilizing this nice layout component
for wrapping all our content.
It's technically not required.
We could have added the styling in another way too
but it is another nice practice of this children concept,
and it removes some extra code from our app component
and make sure that this component can focus
on one main thing, rendering the routing configuration.
Because your components typically
should be focused on one thing.
And now we got a leaner app component,
and we're again using props children
to create this layout components here.