All language subtitles for 004 Adding a re-usable _Button_ Component_en

So, time for a button.

Just like a card, a button is a default UI element

which we're going to use

in different parts of the application.

Therefore, here I'll add a Button.js file,

and I already mentioned it,

attached, you find a Button.Module.css file

which I'll again download and drag and drop

into that UI folder next to the Button.js file.

Now inside of the Button.js file,

we can import React from React

because we're going to write some JSX code.

We can import classes

from dot slash Button.Module.css already.

And we can then define our button constant,

which is our functional component, and export,

whoops, export this as a default.

And now in here, I simply want to return

the built-in button component,

but of course, with my default styling applied

and with some configuration options.

To start with the styling,

I'll add class name and point at classes.button

because in the Button.Module.css file,

you'll find that button class

so we can use it thanks to CSS Modules

to apply a little styling here.

I also want to make sure

that the type of the button can be set,

and I want to make sure it can be set from outside,

so from the place

where we use our accustomed button component.

They offer the value assigned to the type prop

on the built in button component will be dynamic,

and I will simply access props.type here,

but also provide a fallback

in case that should not be set with the or operator.

The alternative is button.

So if props.type is undefined,

this button value will be used as a fallback type

for the built in button.

Now, in addition, I'll add onClick,

and here, I expect to get a handler function

via props on my own button component,

so I'll simply forward this to props onClick.

Now that name here is totally up to you.

You don't have to name it onClick, but again,

I want to make my own button basically usable

like the built in button,

and therefore I use the same naming.

So I will have a onClick prop on my button component,

and any function received there

is just passed onto the built in button component

through its onClick prop.

And last but not least here,

I also want to be able to output

some content between the button tags,

and I expect to get that content

between the tags of my own button,

and therefore we use the special children prop here.

That should be all.

Now we can go to add user where we have a button,

and use our own custom button.

And hopefully I can now just replace built in button,

which is lowercase, with my custom button,

which starts with a capital B

per the convention that your components

should always start with capital characters.

And we now just need to import it because as I mentioned,

you need to import all things

you want to use from other files.

So here, I'll import button from,

going up one level, UI Button like this.

And if we now save that,

we get this nice looking button

which should work just like the built in button

because in the end,

it just wraps the built in button, of course.

But that's the idea behind all React components.

In the end, you always compose them all

from the building and HTML components,

but you structure them in a certain way

and maybe attach certain logic

so that you have your own components.

And with that, that looks quite well.

Now let's make sure we actually fetch user input,

and we then kind of start rendering a list of users

below that input form here.