Our application is coming along pretty darn well.
We've got our index page put together.
We've got the ability to create streams edit streams and now we're going to start to move onto one the
last big pages of our application the delete stream page when a user comes to this page.
We're going to show what is called a modal to them.
This is a modal window a modal window essentially prompts the user to take some action.
I can very quickly show you a example modal.
If I open up the diagram program that I'm using right now at draw IO I'll see a big window appear here
right on the center of the screen.
So this is a modal window in-action it's prompting need to take some immediate action and there's really
nothing else I can do on the screen until I resolve this.
I can still see some of the content of the page kind of faded out behind it but I can't directly interact
with it until I do something with them with the modal window.
So that's what we're going to show for our delete stream page.
I want to show a modal window to the user that's going to essentially force them to either delete a
stream or not delete the stream.
So in this video we're going to start talking about how we can create modal windows with react.
You might be surprised to hear that creating models with re-act is surprisingly challenging.
So I'm going to walk you through an example of exactly why modals are challenging and why they're challenging
specifically with react.
So let's get to it.
OK.
This first diagram right here is a diagram of a typical re-act application.
The component hierarchy at the very top of any HMO document we have the body tag inside the body.
We usually have a div with an ID of root and we'd render our entire re-act application into that div
with idea of root.
So inside that div we've got a provider we've got the app any routes routes maybe our stream delete
component that we're going to create in just a little bit maybe a modal component and then maybe some
button inside of that that a user can click to either delete or not delete the stream.
What I'm trying to communicate here at this diagram is that any re-act application all of our elements
are nested inside of that div with the ID of root and that is the normal operation of react.
However there is a feature inside of re-act called portal's.
And we're going to ultimately use a portal to kind of get around this requirement of having to nest
all of our different components elements whatever you want to call it inside of this Dave with the idea
of root.
But before I just tell you hey here's how a portal works.
You need to really understand why would we why we would even want to use a portal in the first place.
So understanding this right here understanding how all of our elements get ultimately rendered into
a single Div..
I now want to show you how we usually create a modal window without react at all without re-act without
javascript without anything like that and you're going to very quickly realize that if we use traditional
re-act layouts like what you see right you're putting together that model will be rather challenging.
OK so here's a little exercise that you and I are going to go through.
We're going to forget re-act we're going to forget javascript.
We're going to make a normal aged mail document and we're going to try to get a little modal window
to show up inside of it.
And as we go to that process like I said you're going to realize that using typical react to do this
might be a little bit challenging.
So for this little side application we're going to put together with plain e-mail.
I want to have a window that shows I'm a sidebar and I am a person that has some content in the center
of the screen as well.
And then we can optionally put a model on the screen and when the Spittal appears it's not kind of obscure
or not replacing that content the other content is still visible behind it.
But the model is meant to kind of sit on top of that stuff and demand some attention from the user.
So again I want to put this example together with normal H.M. normal success and are going to very quickly
realize that putting these portals together not the easiest thing.
All right.
Let's get to it.
I'm to flip back over to my code editor Sunstone side of my project directory here to get a normal HTML
document put together.
I'm going to open up my public directory and create a new file called modal HMO.
So we're going to write up our entire league's entire modal example inside this document with normal
CSSA and normal HMO inside if you're going to put down a head tag and a body tag and inside of the body
tag.
I'm just going to put some plain text for right now that says I am a motile example and then I'm going
to try to access this you know document inside my browser.
So in order to access any file inside of our public directory we're just going to go to local host 3000
slash than the file name.
So in this case middle aged.
So I'm going to open up a new browser tab and navigate to localhost Kulin three 3000 slash modal dot
HD mail Lexow and I should see the text from that H.M. document appear on the screen.
All right.
Now that we've got that showing up let's try putting together the route of this example so that sidebar
element and some content on the very center of the screen.
So inside my body I'm going to place a div with a class.
Don't forget we are now writing female not writing GSX right now.
So in order to specify a CSSA class we just write out class not class name.
So it's a class sidebar
and I'll give it some content.
I am a sidebar.
After that I'll place another div with a class of content and inside of that one I'll put a H-1 that
says I am some content.
And now if I say this again I should be able to flip back over to my browser refreshed the page because
we don't get automatic reload with just plain ational documents and then we'll see.
I'm a sidebar and I am some content now.
Very quickly add in some CSSA just to get these elements into the correct position.
Inside my head tag I'm going to add on a style tag and we'll just write some CSSA directly into here.
So first off I'm going to attempt to position that side bar on the left hand side of my screen so I'm
going to put in a side bar CSSA select a regular I'm going to give it a position of fixed a top of zero
a left of 0 a height of 100 VH which is just going to make it spanned the entire height of the screen
a width of 300 pixels and then I'll give it a background.
Color of green.
Just to make sure that we can really tell where the sidebar starts and ends.
After that rule then add in a CSSA selector for content as well.
So say duck content and I will give this a with or me a margin dash left of 300 pixels the margin left
right here is just to make sure that the sidebar does not overwrite or obscure any of our content.
So now I'll save this very quickly put back over and I see my sidebar with I am some content and just
recall I always run with my browser very far zoomed in.
So you probably see something like this right here.
OK.
So this looks good.
It's a good place to get started.
So let's take a quick pause right here.
When we come back in the next section we're going to start putting this motile together.
And again that's when you're going to start to learn why we want to use this portal's thing with react
at all.