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.