All language subtitles for 014 Adding More Components_en

Now let's start with creating the code for the overlay.

For this, I'll add a new component.

We could add the code in the existing component

but it is considered a good practice

to put every building block into its own file,

every component into its file,

and to avoid very long JSX blocks

by instead splitting it up into separate components.

Now, when you should make a split,

that's something which will come with experience.

And you'll see a couple of examples

throughout this course here.

But in general, you wanna keep your component functions

small and maintainable.

The JSX code that belongs to a component

shouldn't become too complex.

And therefore I'll add a new file in the components folder

and I'll name it modal JS

because that's the component that should be responsible

for rendering a modal, this overlay.

That's typically called a modal.

And then here we therefore create another function,

the modal function,

and we export this function, like this.

And here we can also accept this props parameter.

As I mentioned,

every component function gets this parameter.

It's passed in automatically by React.

But of course, if you don't use this parameter

in the function,

if you don't use it in a given component,

you can also omit it.

And here for the moment, I will omit it.

Then we need to return something here,

something which can be rendered

by the browser as we learned.

And for me, that will be another div.

And in that div, we can then have a paragraph,

let's say, with a text of, are you sure?

Or something like this.

And below that, let's say two buttons.

One button where we say cancel.

And one button where we say confirm.

Now in this demo, the buttons won't really do anything

except for closing the modal.

But of course, in a bigger application,

you could then trigger different actions

based on which button was clicked.

But again, that's just a first demo.

We're going to see a slightly bigger app

thereafter in this course.

So for the moment, it's this div.

Let me format this with a paragraph and two buttons.

Now, we want to add some styling.

So on that div, I'll add a class name,

as you learned, of modal.

And on the buttons, I'll also add some class names.

On the cancel button, it's button.

And then another class named button dash dash alt.

And these are simply classes to find in the index CSS file

I provided to you earlier.

And then here on the second button, it's just a button.

And that's now the markup for this overlay component.

Now, in addition to this overlay,

we also wanna have a backdrop.

Some gray background behind the modal

which blocks interaction with the page

whilst the modal is opened.

And for this, I'll add another component,

the backdrop component in a backdrop JS file.

And that will also be a straightforward component,

simply a backdrop function here like this.

And then we export this as a default.

And here I just want to return a div

with a class name of backdrop.

This div has no content

and therefore we can write it

as a self-closing tag actually.

In standard HTML, you would not write it like this.

There divs are not void tags,

but in JSX you are allowed to do that

if you have no actual content

between the opening and closing tags.

And here I just rendered this div

because of this styling which is added by this class.

And hence I need no content

and hence we can write it like a self-closing tag.

Okay, so now we've got the backdrop and the modal.

Now we can use both.

And for the moment, we will always show both.

So for the moment, we can go to app JS, for example,

and below all these To do's,

we can now also output the modal

as a self-closing tag like this

and the backdrop as a self-closing tag like this.

And we again need to import these two component functions

in order to use them here.

So we import modal from dot slash components modal

and we import backdrop

from dot slash components backdrop, like this.

If you now save all your files,

you should see something like this.

Let me zoom out a bit.

Something like this.

This is our modal.

And at the moment, it's always visible

and we can't close it

because that's now one big missing piece.

We know how to build components,

how to build reusable components,

and how to build our interface.

But at this point, our interface is 100% static.

It never changes.

What we output here, that never changes.

No matter how we interact with it as a user,

the interface always stays the same.

And of course, that's typically not what you want

in a web interface.

Things should be interactive and things should change.

That's one of the main reasons

for using a library like React.

And therefore let's now explore

how React makes sure that we can change

what we see after the page was loaded.