All language subtitles for 019 Adding Custom Components & CSS Modules_en

So for this MeetupDetail page,

I'll add a new functional component inside

of that meetupId page,

the MeetupDetails component.

And I'll then export this as a default.

Oops, like this.

Not MeetupList.

Like this and then here we return the content

for the MeetupDetails page.

Now, here it's, of course, up to you

how you wanna display the details for a given item.

I will output a fragment,

which we need to import from react

so that we can have multiple adjacent JSX elements.

And I'll then start by outputting the image

of that meetup item

with some src and some alt text.

Now, of course, later we will actually get the concrete data

for a specific meetup item here.

At the moment, we don't really have any meetup data source.

We have this dummy array in the root index.js file

but it's only available in there

and whilst we could export this constant

and then also use it in the MeetupDetail page,

I will not do this here

because we're soon going to connect a real backend anyways.

And therefore, for the moment,

I'll just hard code some data in here

and I'll grab that data from the dummy data though,

so from this DUMMY_MEETUPS array

and I'll copy the image link here

and use that as a source.

And the alt text could be A First Meetup like this.

Then below that, I will add a h1 tag

where I say A First Meetup and then below that,

a paragraph with The meetup description.

And we can also add a address element here,

which is a default HTML element

where we have the address.

Like that.

That could be how we output the MeetupDetails,

for the moment, with some dummy data.

And if I add this here in the MeetupDetails component,

if we reload this MeetupDetails page,

this is what we see.

And that's okay but of course, not the final style

which I'd like to have.

I'd like to center all the text actually

and I would also like to shrink the image a little bit.

Now, for that, I haven't prepared any styles,

so we can just quickly add some styles together here

and for this, I'll actually add a brand new component

in the component's meetups folder,

which I'll name MeetupDetail,

like this and you don't have to create this component.

I just like to keep my page component files pretty lean

and outsource as much JSX code as possible

into standalone components.

But that is not something you have to do.

Nonetheless, I will do it here

and I'll copy that fragment

from the MeetupDetails page component here

and add it to the MeetupDetail single component.

And create that MeetupDetail component here.

And of course, also export MeetupDetail here

and return that JSX code here then like this.

And actually, accept props already

and expect that I get this data through props now

so that the data will be fetched in the page component later

and will then passed into this component,

which is then responsible

for actually presenting the content.

So here we then have props.image.

Here for alt, we could use props.title.

What we then also use here for the h1 tag, props.title.

And here for the address, that would be props.address

and here we have the description.

Props.description.

And on the MeetupDetails page component,

we can now output this MeetupDetail component

we just worked on.

And for this, of course,

import this MeetupDetail component up there.

And now we just need to pass that data,

which we expect in that component

through props into that MeetupDetail component.

So here we can then add the image property

and then use our dummy image link

or our dummy image content here for the moment.

Set the title prop.

First Meetup could be the title.

Set the address prop to Some Street 5, Some City

and last but not least, set the description prop

to this is a first meetup.

And then we can get rid of the fragment

and that JSX content in the page component

and just use the MeetupDetail component here.

Now, why am I doing that?

Again, just to keep the JSX code lean here

and now also for styling reasons.

We could have also imported a CSS file

in the page component.

This would work, it is a regular component after all.

But I like to keep my pages folder lean

and only have the page JS files in there.

Now, for the other components on the other hand,

it is quite common that we pair a JavaScript file

with a CSS file

and again, we could have done that

in the pages folder as well

but I wanna keep that folder leaner.

Here for the components folder,

it is more common to include these CSS files

and hence here I'll now also add

a MeetupDetail.module.css file.

The .module.css is important by the way.

We already used it all the time here silently so to say

because I provided all these components to you

but this actually unlocks a feature

called CSS modules.

It's a feature which you might know from standard React.

It allows you to scope CSS class styles

to a React component and it is supported out

of the box in NextJS projects.

If you name a CSS file like this,

ending with .module.css

and you then import it into your JavaScript file

in a certain way, which I'll show you in a second,

then the CSS styles defined in the CSS file

will be scoped to this component.

At least if you use CSS classes as selectors.

Now, that special way of importing

can bee seen in the other JavaScript files.

It looks like this.

We import classes or however you wanna name it

from the CSS file.

And that's a special way of importing,

which will be picked up by NextJS

and behind the scenes,

it will then transform the CSS classes

so that the class names are unique per component.

And that ensures that your styles can't spill over

to other components.

That's why I also wanted to show this approach here.

So now we can import classes from ./MeetupDetail.module.css

like this and now classes is a JavaScript object in the end

where any CSS classes you define in your CSS file

will be available as properties on this object.

And if you access them,

the values will be the transformed CSS files,

which are guaranteed to be unique.

And that allows you to use the same CSS class names

in different components without clashing with the styles.

And now we could replace Fragment here

with section and give that section a className

of classes.detail let's say like this.

And if we do that, we can now add a detail CSS class here

in the MeetupDetail.module.css file.

And the styles we define in there will then be applied

to this section

because it gets this transformed detail class

under the hood.

And that is a nice feature to have,

which is why I also wanted to show it to you.

Now, with that, we can, for example,

select the image, which is inside of that element

with the detail class, so this image.

We can select this

and then change its look, change its style.

For example, give it a width of 100%,

which ensures that it stays in the box

that is reserved for this page by the layout component.

We can also select the overall detail class again.

So the entire section with that class on it

and set text-align to center

so that all the text elements are centered.

And that could now be our MeetupDetail.

Of course, you can tweak it.

You can add more styles,

you can make sure that it looks the way you want it to look.

I don't wanna turn this into a CSS course.

I just wanted to show you this CSS modules feature

and show you this approach,

which you don't have to use but which I like to use

that I keep my page component files relatively lean,

especially regarding the JSX code

and I instead use embeddable standard React components

for the actual JSX code

and like in this case, for the styling.

And with that, we have our MeetupDetail page in place

and now we've got all these pages here which we need.

Now, with that, we can work

towards replacing that dummy data source,

our dummy array here in the root index.js file

with a real backend, with a real data source.