Original subtitles

So, let's build this card component

which I wanna have around my form together.

So here in add user, I want to be able to wrap this

in a card component, which doesn't exist yet, like this,

and that should apply a nice styling here to this form.

For data I would go to the UI folder,

and in there at a card dot JS file.

Now in there,

I'll create a pretty much standard React component,

so we import React from React.

We then have card here, which gets props

and we export this as our component.

Now the card component can be fairly trivial.

I want to return a div let's say,

and inside of the div I wanna output to content

which discards component is wrapped around.

So when I wrap card around my form here,

this form should of course be output inside of the card.

So the card component here should output

what's passed between the opening and closing tags off card.

And you'll learn that you can access this content

on the special children prop, like this.

You put that between curly braces,

because it's not JSX coded, it's a JavaScript expression

that should be evaluated inside of JSX code.

And props children will give us that content

which has passed between the opening and closing tag

of the card component.

Now, I will also assign a class here

so that we can style it,

and now I want to use CSS modules here.

You don't need to use that, you could use styled components,

you could use regular CSS classes and make sure

that you don't repeat class names,

but I will use CSS modules.

And therefore I'll add a card dot module dot CSS file here

where I can specify my card style.

I will add a card class in there, just like this,

and normal CSS class, and give it a background of white.

Whoops, that should be background.

Give it a box shadow of zero two pixels, eight pixels,

rgba zero, zero, zero, 0.26,

which will add a little bit of a drop shadow to the card,

and the border radius of 10 pixels here for rounded corners.

Now in card JS, we can import this.

Here we can import dot slash card dot module dot CSS.

And you'll learn that for a CSS modules,

you now have to alter this import a little bit.

This import would be right if you have a non module file,

if you use the regular CSS,

but if you wanna use that CSS modules feature,

you have to import something, for example,

classes from that file.

And now you're on class name, we can assign

one of the classes we have inside of the CSS file.

In this case, we of course have only one class

that's card class, so we can access classes dot card here.

And this will assign this generated unique class name

to that div.

With that, the only step that is left

to have that finished card and to use it,

is to go to the add user component,

where I wanna use that card, and import it here.

Because you always need to import what you wanna use.

If you have a component in a different file

and you wanna use it in this file, you have to import it

from that other file, otherwise JavaScript

and this React build process here,

can't make a connection between this file and the file

in which your component is to find.

So here we can therefore import card from dot, dot

to go up one level, so to go out of the user's folder

into the components folder, and then into UI

and then to card and you omit the file extension here

for JavaScript files.

With that we're importing card, and if we now save that,

it should compile fine, and this looks a little bit nicer,

but of course it's still not the final look I want.

Now, to get that nicer look, attached you find a CSS file

to be precise, you find the add user dot module dot CSS file

and you can simply drag and drop that.

So download it and then drag and drop it

into your user's folder next to the add user component.

This file includes a couple of styles

which will help us make this look nicer.

Now to use this file, we have to go to add users,

to the add user component,

and besides importing the card here,

we can now also import classes

from that newly added CSS file.

So from the add user dot module dot CSS file,

for non JavaScript files, you need to add

that file extension here.

And now to apply that, I wanna go to my card

and actually add the class name property here

and add classes dot input.

The input class is defined here in the CSS file,

and with that, we can add it.

But now there's one important thing to note.

Of course here card is our custom component,

it's not one of those built in HTML components.

And therefore, since it's our own component,

it only has to props, or it only is able to work

with the props we use inside of that component.

Now, these default HTML components like form, label, input,

divs, and so on, they are all pre-configured

by React to for example work with the class named prop

and to then apply a fitting CSS class

to the underlying rendered HTML note.

Now for our own component, it of course does not know

what to do with the class name prop

because it's just our own component,

not a built in HTML component.

So, we have to go to our own component and make sure

that we accept incoming class named prop

and that we do something with it.

Now, what do we want to do?

In the end, I want to make sure that the CSS class

we're applying to the div, with the help of class name

on that div, that the class is applied to the div

reflect both the card class, which we already are applying,

as well as any potentially incoming classes

on the class named prop of this card component.

So that any class I add here on the card component

when I use it, isn't the end applied together

with the card class to the div,

which is rendered by the card.

So I wanna apply two CSS classes.

One coming from the card module CSS file,

and one coming from outside, from the props,

potentially coming via props.

And we can easily make this work.

We can add a template literal here,

as a value for class name on the div,

and then inject something dynamically

with this dollar sign, curly brace syntax,

and add classes dot card.

That is what we added before as well.

But now I'll inject the second value

and that's props dot class name.

Now it's your component, so you could use

any property name here,

it doesn't have to be class name here

on your own props object.

I'm just using class name here as well,

so did we're able to use our own component

just as we work with the regular HTML components.

I can now set class name on my own component as well

because I'm accepting and using the class name prop

here inside of the component.

If we would have chosen a different name here,

like CSS class for example,

we would need to use that CSS class name here as well

when we use the card component.

But again, I want to have one API,

one way of assigning CSS classes

and therefore, I will use class name

because that's all the what React uses

for its built in HTML components.

And with that reemerging and external class

with our internally defined class here,

and if I now save this, this now looks much nicer,

thanks to the styles set up in the add user component.

And with that, this looks not too bad.

Now, let's make sure we all have a nice looking button.

And for that, you actually find a file attached

to the next lecture, the button dot module dot CSS file,

and you can use this to try and build your own button,

otherwise we'll build and use that button together

in the next lecture.