When we build the reactor application we can use react to build just about any web experience we want 2
right. 3
We can build forms nav bars inputs buttons just about everything we want every thing you could possibly 4
imagine inside the browser. 5
We can probably use re-act for it but there are some very notable examples particularly for something 6
very simple such as a modal. 7
So today we're going to talk about modals and why they're a little bit challenging to work with inside 8
of re-act application in case you're not familiar with the term modal. 9
I guarantee you know what a modal is you may not know the term a modal is just a window that pops up 10
to the user. 11
So this is an example of the modal right here. 12
Typically we'll have a kind of black background a white big window that pops up to the user and the 13
Modals are just use in general for getting the user's attention. 14
So say a log in form or a confirmation form or a notification just anything where we need to immediately 15
get the user's attention. 16
So modals are a little bit deceptively difficult to build in re-act applications so we're going to walk 17
through the three stages of building a model. 18
So we're going to first start with kind of a naive approach for building a modal then we're going to 19
improve it a little bit kind of make it work and then we're going to improve upon that to make it work 20
fantastically for reacting redux applications so we do a three step process your go from about approach 21
to an ok approach to a great approach. 22
So let's get started. 23
Let's see that I want to build a model component. 24
I want to build a motile from scratch and I want to be 100 percent reusable. 25
So I expect to have an application where I've got many different types and models that need to show 26
up on the screen. 27
Let's see that I'll probably build a modal component and because I want it to be reusable I will give 28
the motile the ability to show some child components so I can reuse this model on the fly and just swap 29
out the content inside the Modahl at will whenever I want to show a modal. 30
I will just place the model inside of some other component and whenever that parent component renders 31
it will show the modal and boun that modal is going to pop up on the screen. 32
Now the key here is that the modal really works because of CSX. 33
So because of C Ss were going to use some styling to make sure that the modal pops up in the middle 34
of a screen no matter where the users scroll to the application it should pop up in the very middle 35
of screen and it should always have like you know some number of pixels of offset from the edges of 36
the window as well. 37
So you know we've got this kind of offset on here as well. 38
On the top left right and bottom of the motile so because we are fantastic engineers again we're going 39
to make sure that it's reusable. 40
We can place any child component inside of it and the content inside the modem will get swapped out 41
. 42
So as a practical example the modal components self will be responsible for this kind of black overlay 43
the white window and the positioning of it but then the content inside of the modal will be something 44
that we should be able to easily customize on the fly. 45
So which will it pass in some child's component and have it just show up inside the motile and they'll 46
make it truly a reusable component of sorts. 47
So let's take a look at kind of this naive approach. 48
Let's see just kind of what happens when we take this kind of approach to remake a reusable component 49
that is displayed inside of another component. 50
I've taken the liberty of setting up a small demo application here. 51
So right now we're looking at the app component and the app component has some amount of GSX inside 52
of it and I've got a component called Bad modal in here. 53
Right now it's commented out. 54
So you I just want to show you what the application looks like when the middle is not open. 55
So let's refresh. 56
And so this is the app as it stands right now we just have these really weird Hello tags on here. 57
The Helo's just to have something on the screen. 58
You know I guess I like greeting people or something. 59
But anyways the helo's are just something on the screen so I'm now going to uncomment my motile So now 60
it should show up and I can refresh the page and great. 61
So here's my modem. 62
Notice how I've got some amount of content inside of it. 63
You know this header looks like a paragraph tag and then red blue green. 64
So if I go back over to my app component you'll see here's my bad model. 65
There is the one there is the paragraph tag and there's the colors as well. 66
And so to make this a very reusable component I can reorder the tags on the fly and boom everything 67
gets reorganized as well. 68
So again the modal is just the kind of vehicle it's this outline that positions itself and most importantly 69
obstructs anything underneath it. 70
It just grabs our users attention and we can reuse it as much as we want. 71
So you have this in your thinking. 72
Well Stephen this looks fine. 73
Like what. 74
What's the issue. 75
What's wrong with this. 76
Why is this about approach. 77
And while you know it all I'll show you why it's about approach. 78
I'm going to come over my CSSA file here and you can see that I've got some amount of styling for my 79
modal. 80
So this is all it takes to get a modal show up on the screen. 81
I've got position fixed so it's going to show right up on the center no matter where the user is scrolled 82
to. 83
We've got top left right bottom a border. 84
Blah blah all this kind of good stuff on here. 85
Everything you get a motile to show up on the screen now. 86
I've also got some z index on here as well. 87
If you're not familiar with Z indexes the CSSA property Z index is used to control the rendering order 88
of elements on the screen. 89
So whether or not some elements should display on top of another one as you might imagine we always 90
want a model to show up on top of everything else like no matter what the motile needs to be on top 91
of everything else on the screen. 92
It should not be obstructed by some element. 93
So with the approach we have I'm going to just make some arbitrary little change here and it's going 94
to uncomment this one particular rule doesn't necessarily matter what the rule is. 95
You know let's just ignore that for a second and I'm going to refresh. 96
And now all of a sudden boom my model is broken. 97
So when we take this approach of displaying and model where the model itself is a child component like 98
very down far inside the hierarchy of all my components we are almost always going to run into issues 99
with z index inside of our application. 100
As soon as we start adding a lot of styling we might want to add in some Zendiks to control layering 101
. 102
And whenever we start playing with the index you're going to start running into issues like this with 103
the motile. 104
If you're at all familiar with z index context stacking that's pretty much exactly what's going on here 105
. 106
I've got a. 107
The motile is contained within the right div.. 108
And then I've also got a left there as well. 109
The right Dave has a z index of one which means the right div and everything inside of it will kind 110
of have a z index of one as a parent context left is going to be z index of three which means everything 111
inside of the left div is going to display on top of the right. 112
And so that's what we're seeing here. 113
This is the left div and it's displaying on top of the right div which is this list of Helo's over here 114
and also the middle as well. 115
So that's a little bit getting a little bit into the weeds here. 116
But the reality here is that when we take this approach of showing a modal in a reactor application 117
we are always going to run into issues with z index where the modal is not going to end up being the 118
top Complan on the screen. 119
So how do we fix this. 120
You know again this is like Stage 1. 121
It's a naive approach. 122
It can get a modal on screen but at some point in time it's going to break and things are not going 123
to work well. 124
So how do you know how might we fix this. 125
Well let's look at another approach here. 126
Now this looks a bit crazy so just bear with me for a little bit. 127
This is going to step two for approaching this model is give me like are kind of a good solution. 128
We're going to have a root component but the root component remember is always displayed within document 129
bodies. 130
So inside of all very small documents we always have a body tag. 131
And that's where we usually are going to at some point in time place or root component. 132
Now the problem with our modem as it stands right now is that the motile is nested inside of our component 133
hierarchy. 134
So here's where we're going to do to fix this. 135
We're going to make a new component which we're going to kind of think of as like a fake modem of sorts 136
. 137
The fake modal whenever it gets rendered to the screen is going to reach back up to document dot body 138
and forcibly render a brand new component as a child to document our body. 139
And so this is really breaking re-asked Convention right here in a big way right in reaction applications 140
where we have a root component and everything else is a child of that root component. 141
So what I'm suggesting here is we kind of break that convention and we say that whenever we want to 142
display a model we should create a new element or a new component and append append it directly to document 143
body. 144
Now that it's a child of body we will not have any more stacking Zendiks issues. 145
So this Modal will always show up 100 percent of the time. 146
So the fake model here. 147
And this is the key the fake modal is going to create the modal undocumented body. 148
So this diagram kind of communicates what's going on but still a little bit rough. 149
So let's do a written code example to see what's going on here. 150
Back inside my code editor I'm going to make a new component and I'm going to call this one just modal 151
and then we're going to put some boiler plate inside of here. 152
We're going to take re-acting component from react and bring in react Daum from react. 153
And I think that's good for now. 154
Let's make our middle class Ilkeston components now in sight if you're 155
inside of this motile rather than returning like you know a dish that has some fancy CSSA styling on 156
it or any children or anything like that. 157
I'm just going to return a no script tags so no script basically means render nothing. 158
You know don't don't show anything. 159
So when we display the modal component it is not going to put it's not going to play anything on the 160
screen whatsoever nothing will be displayed for the modem. 161
So you might be thinking well how do we actually get this Modal on the screen right where it like where 162
does that happen. 163
So the answer is that we're going to kind of do a little bit of a work around here. 164
I'm going to add in a component 165
did. 166
So whenever this component gets mounted to the screen never gets rendered to the screen I'm going to 167
create a new div. 168
So I'm just like a floating div in memory 169
and I'm going to sign it to this dot modal targets. 170
Now here's where some of the magic doesn't come into play. 171
I going to write out some the code and we'll talk about what's going on. 172
I'm going to add on a class name to the modal target of modal and then this is where the magic is going 173
to take this div that we just created 174
and append it to the body tag and my document 175
and then going to Colinet they called this dot underscore render. 176
So let's see what. 177
Underscore rendered does. 178
So inside of underscore render I'm going to take my react on library and inside here. 179
We're going to render 180
a div that contains this prop's start children and we're going to render it into get a new line here 181
. 182
This dot modal target. 183
OK so this is kind of the magic here. 184
This is this is how we're going to make this work. 185
Whenever my modal component gets rendered to the screen I'm going to create a new device so just like 186
a floating div out of thin air I'm going to append it to document body so it gets appended to the body 187
tag inside of my application and then I'm going to use react Dom to render this dot start children to 188
that new div that just got into the body. 189
So this got props such children in case you've never used props children before is a reference to any 190
components to get past into my component. 191
So in this case bad modal would have gotten the H-1 the tag and colors as props start children. 192
Now step two is whenever 193
the components about to update we'll do another render as well. 194
And so this renders and make sure that if we get a new set of components or a new set of children inside 195
the model we're going to render those to the parent did as well. 196
And finally 197
we'll do a little bit of cleanup whenever the component is about to unmount from the screen we'll call 198
re-act arm. 199
Unmount component at node. 200
This dot motile target. 201
So this will unmount the stop process of children that we already rendered and we will also document 202
dog body dog remove child stop motile target as well. 203
And so this component will amount it's just a little bit of cleanup in here to make sure that we clean 204
up the dorm whenever the motile is about to be removed from the component hierarchy. 205
OK so let's now import this motile into apps and now we're going to import motile. 206
And then instead of displaying bad motile will display motile. 207
Let's give us a shot. 208
So now when we refresh the page it looks like everything shows up well kind of. 209
Right. 210
Kind of. 211
I've got an error message here and it says could not find store in either context. 212
But the wall is kind of good stuff in here and so this is where right now we're kind of at step two 213
where we've got a model that shows up on top of everything but it still doesn't quite work all the way 214
. 215
You can make just one quick change. 216
And OK we're good to go now. 217
So we're definitely at step two here where we're getting a motile to show up on the screen. 218
But we still got an error message on there. 219
So I've got this colour's component right here. 220
The color component. 221
Let's open that up. 222
You'll see that colors is a redux connected component. 223
So it is a container. 224
It makes access to the redux store. 225
I'm going to I've got it uncommented now back inside of app. 226
Let's do a refresh again and check out that error message again. 227
So the error message says cannot find store on either contacts or props of connect colors. 228
We need to wrap the root component in a provider or explicitly Pastore as a prop to connect colors. 229
So what this is essentially saying right here is that we are trying to render a. 230
Let's pull it up here. 231
We are trained to render a connected component or a container like over here. 232
Apart from everything else inside of a reata application. 233
If you've ever worked with the connect help or from re-act redux at all you may know that the connect 234
helper works in tandem with the provider tag that we place inside of our root component. 235
So back inside of my top level index dot JS number I got this provider tag right here. 236
Whenever we place a connected component that connected component is making direct communication with 237
this provider tag. 238
So essentially you know can I get in the weeds here again essentially what's going on here is we've 239
got this disconnected hierarchy where my Chao's component is trying to get access to that provider tag 240
but the provider tag is not in the same hierarchy. 241
The provider tag is like you know over here. 242
And so the child component is trying to get access to the provider but because their income different 243
hierarchies the child component can't get access to the provider it can't get access to the store. 244
And so it throws the error that we see. 245
So let's move on to Step Three Step three here. 246
This is specifically to make a model work with a redux application in our D-flat application. 247
Again we've got this kind of provider over here on the left hand side. 248
It's always there it's part of the boilerplate. 249
So to fix our set up here we're going to add a nother provider tag inside of the motile. 250
So there is going to import the provider helper will provide our store to that provider. 251
And then any child component that needs access to the retail store will have access to the provider 252
as well. 253
So let's give that a shot as well. 254
The first thing I'm going to do is over in motile at the very top We're going to import store. 255
So this is the instance of my redux store from index and then I'll also import provider from re-act 256
redux as well. 257
Now inside of my re-act render call I can add my provider 258
like so. 259
And as a prop I'll pass in the store that I am in port as well. 260
So let's do a refresh now and we can see everything successfully shows up on the screen. 261
So if you've ever worked with. 262
Just a quick side note if you ever worked with the NPM library react redux or has me react to motile 263
. 264
This is very similar to how re-act library works. 265
But note that that library is going to break if you're using redux because if you try to use connected 266
component inside the motile it does not provide this provider tag there and so you're going to have 267
a little bit of issue in there. 268
So to something to be aware of. 269
So at this point in time we are now on to Step Three of our application. 270
We have successfully decoupled our model from the rest of our rendered tree. 271
So the motile shows up as a child to document dump body and that means everything is always going to 272
render on the screen appropriately because we don't have to worry about z index when the modem is a 273
direct descendant or direct child of document body. 274
We also fix up our child's component to work with redox by also inserting another copy of our provider 275
inside of the modem as well. 276
So I know it's been a lot of work a lot of very technical terms in this in this video but again displaying 277
modals is something that is not inherently super easy and or react and especially redux applications 278
so I hope this is help to shed a little bit of light on what goes on behind the scenes. 279
If you've enjoyed this video I publish weekly videos on re-act redux like everything javascript topics 280
you can check out more videos at reli coating dot com and you can also check out the code for this example 281
there as well. 282
So I hope to see you next week where we're going to cover another exciting topic. 283
I'll catch you later.