1
00:00:00,860 --> 00:00:02,880
Our application is coming along pretty darn well.

2
00:00:02,930 --> 00:00:04,760
We've got our index page put together.

3
00:00:04,790 --> 00:00:09,080
We've got the ability to create streams edit streams and now we're going to start to move onto one the

4
00:00:09,140 --> 00:00:14,680
last big pages of our application the delete stream page when a user comes to this page.

5
00:00:14,690 --> 00:00:17,670
We're going to show what is called a modal to them.

6
00:00:17,870 --> 00:00:23,530
This is a modal window a modal window essentially prompts the user to take some action.

7
00:00:23,660 --> 00:00:26,270
I can very quickly show you a example modal.

8
00:00:26,270 --> 00:00:31,940
If I open up the diagram program that I'm using right now at draw IO I'll see a big window appear here

9
00:00:31,940 --> 00:00:33,710
right on the center of the screen.

10
00:00:33,740 --> 00:00:39,020
So this is a modal window in-action it's prompting need to take some immediate action and there's really

11
00:00:39,080 --> 00:00:42,230
nothing else I can do on the screen until I resolve this.

12
00:00:42,380 --> 00:00:47,420
I can still see some of the content of the page kind of faded out behind it but I can't directly interact

13
00:00:47,420 --> 00:00:51,830
with it until I do something with them with the modal window.

14
00:00:52,100 --> 00:00:54,440
So that's what we're going to show for our delete stream page.

15
00:00:54,440 --> 00:00:59,390
I want to show a modal window to the user that's going to essentially force them to either delete a

16
00:00:59,390 --> 00:01:02,320
stream or not delete the stream.

17
00:01:02,330 --> 00:01:07,310
So in this video we're going to start talking about how we can create modal windows with react.

18
00:01:07,370 --> 00:01:11,840
You might be surprised to hear that creating models with re-act is surprisingly challenging.

19
00:01:11,960 --> 00:01:16,940
So I'm going to walk you through an example of exactly why modals are challenging and why they're challenging

20
00:01:16,940 --> 00:01:18,860
specifically with react.

21
00:01:18,860 --> 00:01:20,500
So let's get to it.

22
00:01:21,350 --> 00:01:21,650
OK.

23
00:01:21,680 --> 00:01:25,690
This first diagram right here is a diagram of a typical re-act application.

24
00:01:25,700 --> 00:01:32,170
The component hierarchy at the very top of any HMO document we have the body tag inside the body.

25
00:01:32,180 --> 00:01:38,180
We usually have a div with an ID of root and we'd render our entire re-act application into that div

26
00:01:38,180 --> 00:01:39,410
with idea of root.

27
00:01:39,410 --> 00:01:44,270
So inside that div we've got a provider we've got the app any routes routes maybe our stream delete

28
00:01:44,270 --> 00:01:49,010
component that we're going to create in just a little bit maybe a modal component and then maybe some

29
00:01:49,010 --> 00:01:53,560
button inside of that that a user can click to either delete or not delete the stream.

30
00:01:53,570 --> 00:01:59,150
What I'm trying to communicate here at this diagram is that any re-act application all of our elements

31
00:01:59,210 --> 00:02:07,050
are nested inside of that div with the ID of root and that is the normal operation of react.

32
00:02:07,070 --> 00:02:11,000
However there is a feature inside of re-act called portal's.

33
00:02:11,270 --> 00:02:16,460
And we're going to ultimately use a portal to kind of get around this requirement of having to nest

34
00:02:16,520 --> 00:02:20,900
all of our different components elements whatever you want to call it inside of this Dave with the idea

35
00:02:20,900 --> 00:02:21,580
of root.

36
00:02:21,860 --> 00:02:24,920
But before I just tell you hey here's how a portal works.

37
00:02:24,980 --> 00:02:30,360
You need to really understand why would we why we would even want to use a portal in the first place.

38
00:02:31,110 --> 00:02:35,860
So understanding this right here understanding how all of our elements get ultimately rendered into

39
00:02:35,860 --> 00:02:36,810
a single Div..

40
00:02:36,870 --> 00:02:42,390
I now want to show you how we usually create a modal window without react at all without re-act without

41
00:02:42,390 --> 00:02:48,300
javascript without anything like that and you're going to very quickly realize that if we use traditional

42
00:02:48,360 --> 00:02:54,220
re-act layouts like what you see right you're putting together that model will be rather challenging.

43
00:02:55,160 --> 00:02:58,090
OK so here's a little exercise that you and I are going to go through.

44
00:02:58,350 --> 00:03:01,140
We're going to forget re-act we're going to forget javascript.

45
00:03:01,170 --> 00:03:05,640
We're going to make a normal aged mail document and we're going to try to get a little modal window

46
00:03:05,640 --> 00:03:07,050
to show up inside of it.

47
00:03:07,050 --> 00:03:12,300
And as we go to that process like I said you're going to realize that using typical react to do this

48
00:03:12,300 --> 00:03:14,520
might be a little bit challenging.

49
00:03:14,520 --> 00:03:18,470
So for this little side application we're going to put together with plain e-mail.

50
00:03:18,690 --> 00:03:24,930
I want to have a window that shows I'm a sidebar and I am a person that has some content in the center

51
00:03:24,930 --> 00:03:26,440
of the screen as well.

52
00:03:26,700 --> 00:03:32,670
And then we can optionally put a model on the screen and when the Spittal appears it's not kind of obscure

53
00:03:32,670 --> 00:03:36,690
or not replacing that content the other content is still visible behind it.

54
00:03:36,690 --> 00:03:42,750
But the model is meant to kind of sit on top of that stuff and demand some attention from the user.

55
00:03:42,750 --> 00:03:48,030
So again I want to put this example together with normal H.M. normal success and are going to very quickly

56
00:03:48,030 --> 00:03:51,180
realize that putting these portals together not the easiest thing.

57
00:03:51,180 --> 00:03:51,460
All right.

58
00:03:51,480 --> 00:03:52,860
Let's get to it.

59
00:03:52,890 --> 00:03:59,160
I'm to flip back over to my code editor Sunstone side of my project directory here to get a normal HTML

60
00:03:59,160 --> 00:04:00,270
document put together.

61
00:04:00,360 --> 00:04:05,730
I'm going to open up my public directory and create a new file called modal HMO.

62
00:04:06,030 --> 00:04:11,370
So we're going to write up our entire league's entire modal example inside this document with normal

63
00:04:11,380 --> 00:04:19,940
CSSA and normal HMO inside if you're going to put down a head tag and a body tag and inside of the body

64
00:04:19,940 --> 00:04:20,330
tag.

65
00:04:20,340 --> 00:04:27,130
I'm just going to put some plain text for right now that says I am a motile example and then I'm going

66
00:04:27,130 --> 00:04:30,340
to try to access this you know document inside my browser.

67
00:04:30,400 --> 00:04:35,890
So in order to access any file inside of our public directory we're just going to go to local host 3000

68
00:04:35,980 --> 00:04:37,810
slash than the file name.

69
00:04:37,810 --> 00:04:40,240
So in this case middle aged.

70
00:04:41,040 --> 00:04:47,460
So I'm going to open up a new browser tab and navigate to localhost Kulin three 3000 slash modal dot

71
00:04:47,590 --> 00:04:53,980
HD mail Lexow and I should see the text from that H.M. document appear on the screen.

72
00:04:54,010 --> 00:04:54,360
All right.

73
00:04:54,370 --> 00:04:59,210
Now that we've got that showing up let's try putting together the route of this example so that sidebar

74
00:04:59,230 --> 00:05:02,210
element and some content on the very center of the screen.

75
00:05:02,680 --> 00:05:08,270
So inside my body I'm going to place a div with a class.

76
00:05:08,280 --> 00:05:11,850
Don't forget we are now writing female not writing GSX right now.

77
00:05:11,850 --> 00:05:16,510
So in order to specify a CSSA class we just write out class not class name.

78
00:05:16,860 --> 00:05:18,600
So it's a class sidebar

79
00:05:21,340 --> 00:05:22,520
and I'll give it some content.

80
00:05:22,530 --> 00:05:24,720
I am a sidebar.

81
00:05:24,750 --> 00:05:34,950
After that I'll place another div with a class of content and inside of that one I'll put a H-1 that

82
00:05:34,950 --> 00:05:37,340
says I am some content.

83
00:05:37,470 --> 00:05:42,420
And now if I say this again I should be able to flip back over to my browser refreshed the page because

84
00:05:42,420 --> 00:05:46,460
we don't get automatic reload with just plain ational documents and then we'll see.

85
00:05:46,470 --> 00:05:50,050
I'm a sidebar and I am some content now.

86
00:05:50,100 --> 00:05:54,170
Very quickly add in some CSSA just to get these elements into the correct position.

87
00:05:55,520 --> 00:06:01,980
Inside my head tag I'm going to add on a style tag and we'll just write some CSSA directly into here.

88
00:06:02,000 --> 00:06:06,650
So first off I'm going to attempt to position that side bar on the left hand side of my screen so I'm

89
00:06:06,650 --> 00:06:15,500
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

90
00:06:16,060 --> 00:06:23,180
a left of 0 a height of 100 VH which is just going to make it spanned the entire height of the screen

91
00:06:24,140 --> 00:06:27,980
a width of 300 pixels and then I'll give it a background.

92
00:06:29,130 --> 00:06:30,570
Color of green.

93
00:06:30,570 --> 00:06:34,370
Just to make sure that we can really tell where the sidebar starts and ends.

94
00:06:34,710 --> 00:06:39,390
After that rule then add in a CSSA selector for content as well.

95
00:06:39,390 --> 00:06:47,070
So say duck content and I will give this a with or me a margin dash left of 300 pixels the margin left

96
00:06:47,070 --> 00:06:53,340
right here is just to make sure that the sidebar does not overwrite or obscure any of our content.

97
00:06:53,400 --> 00:06:59,790
So now I'll save this very quickly put back over and I see my sidebar with I am some content and just

98
00:06:59,790 --> 00:07:02,340
recall I always run with my browser very far zoomed in.

99
00:07:02,400 --> 00:07:04,790
So you probably see something like this right here.

100
00:07:04,800 --> 00:07:05,030
OK.

101
00:07:05,040 --> 00:07:05,850
So this looks good.

102
00:07:05,850 --> 00:07:07,260
It's a good place to get started.

103
00:07:07,400 --> 00:07:08,690
So let's take a quick pause right here.

104
00:07:08,700 --> 00:07:11,760
When we come back in the next section we're going to start putting this motile together.

105
00:07:11,760 --> 00:07:16,530
And again that's when you're going to start to learn why we want to use this portal's thing with react

106
00:07:16,560 --> 00:07:16,940
at all.