1
00:00:02,000 --> 00:00:05,000
Now let's start with creating the code for the overlay.

2
00:00:05,000 --> 00:00:08,000
For this, I'll add a new component.

3
00:00:08,000 --> 00:00:11,000
We could add the code in the existing component

4
00:00:11,000 --> 00:00:13,000
but it is considered a good practice

5
00:00:13,000 --> 00:00:17,000
to put every building block into its own file,

6
00:00:17,000 --> 00:00:19,000
every component into its file,

7
00:00:19,000 --> 00:00:22,000
and to avoid very long JSX blocks

8
00:00:22,000 --> 00:00:26,000
by instead splitting it up into separate components.

9
00:00:26,000 --> 00:00:28,000
Now, when you should make a split,

10
00:00:28,000 --> 00:00:30,000
that's something which will come with experience.

11
00:00:30,000 --> 00:00:32,000
And you'll see a couple of examples

12
00:00:32,000 --> 00:00:34,000
throughout this course here.

13
00:00:34,000 --> 00:00:37,000
But in general, you wanna keep your component functions

14
00:00:37,000 --> 00:00:39,000
small and maintainable.

15
00:00:39,000 --> 00:00:42,000
The JSX code that belongs to a component

16
00:00:42,000 --> 00:00:45,000
shouldn't become too complex.

17
00:00:45,000 --> 00:00:48,000
And therefore I'll add a new file in the components folder

18
00:00:48,000 --> 00:00:50,000
and I'll name it modal JS

19
00:00:50,000 --> 00:00:53,000
because that's the component that should be responsible

20
00:00:53,000 --> 00:00:56,000
for rendering a modal, this overlay.

21
00:00:56,000 --> 00:00:59,000
That's typically called a modal.

22
00:00:59,000 --> 00:01:01,000
And then here we therefore create another function,

23
00:01:01,000 --> 00:01:03,000
the modal function,

24
00:01:03,000 --> 00:01:07,000
and we export this function, like this.

25
00:01:07,000 --> 00:01:11,000
And here we can also accept this props parameter.

26
00:01:11,000 --> 00:01:12,000
As I mentioned,

27
00:01:12,000 --> 00:01:15,000
every component function gets this parameter.

28
00:01:15,000 --> 00:01:18,000
It's passed in automatically by React.

29
00:01:18,000 --> 00:01:20,000
But of course, if you don't use this parameter

30
00:01:20,000 --> 00:01:21,000
in the function,

31
00:01:21,000 --> 00:01:23,000
if you don't use it in a given component,

32
00:01:23,000 --> 00:01:25,000
you can also omit it.

33
00:01:25,000 --> 00:01:27,000
And here for the moment, I will omit it.

34
00:01:28,000 --> 00:01:30,000
Then we need to return something here,

35
00:01:30,000 --> 00:01:31,000
something which can be rendered

36
00:01:31,000 --> 00:01:33,000
by the browser as we learned.

37
00:01:33,000 --> 00:01:36,000
And for me, that will be another div.

38
00:01:36,000 --> 00:01:38,000
And in that div, we can then have a paragraph,

39
00:01:38,000 --> 00:01:42,000
let's say, with a text of, are you sure?

40
00:01:43,000 --> 00:01:44,000
Or something like this.

41
00:01:44,000 --> 00:01:48,000
And below that, let's say two buttons.

42
00:01:48,000 --> 00:01:50,000
One button where we say cancel.

43
00:01:50,000 --> 00:01:53,000
And one button where we say confirm.

44
00:01:53,000 --> 00:01:57,000
Now in this demo, the buttons won't really do anything

45
00:01:57,000 --> 00:01:59,000
except for closing the modal.

46
00:01:59,000 --> 00:02:01,000
But of course, in a bigger application,

47
00:02:01,000 --> 00:02:04,000
you could then trigger different actions

48
00:02:04,000 --> 00:02:06,000
based on which button was clicked.

49
00:02:06,000 --> 00:02:08,000
But again, that's just a first demo.

50
00:02:08,000 --> 00:02:11,000
We're going to see a slightly bigger app

51
00:02:11,000 --> 00:02:13,000
thereafter in this course.

52
00:02:13,000 --> 00:02:14,000
So for the moment, it's this div.

53
00:02:14,000 --> 00:02:19,000
Let me format this with a paragraph and two buttons.

54
00:02:19,000 --> 00:02:20,000
Now, we want to add some styling.

55
00:02:20,000 --> 00:02:23,000
So on that div, I'll add a class name,

56
00:02:23,000 --> 00:02:25,000
as you learned, of modal.

57
00:02:25,000 --> 00:02:28,000
And on the buttons, I'll also add some class names.

58
00:02:28,000 --> 00:02:30,000
On the cancel button, it's button.

59
00:02:30,000 --> 00:02:34,000
And then another class named button dash dash alt.

60
00:02:34,000 --> 00:02:38,000
And these are simply classes to find in the index CSS file

61
00:02:38,000 --> 00:02:41,000
I provided to you earlier.

62
00:02:41,000 --> 00:02:44,000
And then here on the second button, it's just a button.

63
00:02:45,000 --> 00:02:49,000
And that's now the markup for this overlay component.

64
00:02:51,000 --> 00:02:53,000
Now, in addition to this overlay,

65
00:02:53,000 --> 00:02:55,000
we also wanna have a backdrop.

66
00:02:55,000 --> 00:02:58,000
Some gray background behind the modal

67
00:02:58,000 --> 00:03:00,000
which blocks interaction with the page

68
00:03:00,000 --> 00:03:03,000
whilst the modal is opened.

69
00:03:03,000 --> 00:03:05,000
And for this, I'll add another component,

70
00:03:05,000 --> 00:03:09,000
the backdrop component in a backdrop JS file.

71
00:03:09,000 --> 00:03:13,000
And that will also be a straightforward component,

72
00:03:13,000 --> 00:03:16,000
simply a backdrop function here like this.

73
00:03:18,000 --> 00:03:21,000
And then we export this as a default.

74
00:03:22,000 --> 00:03:24,000
And here I just want to return a div

75
00:03:24,000 --> 00:03:27,000
with a class name of backdrop.

76
00:03:27,000 --> 00:03:29,000
This div has no content

77
00:03:29,000 --> 00:03:31,000
and therefore we can write it

78
00:03:31,000 --> 00:03:33,000
as a self-closing tag actually.

79
00:03:33,000 --> 00:03:38,000
In standard HTML, you would not write it like this.

80
00:03:38,000 --> 00:03:41,000
There divs are not void tags,

81
00:03:41,000 --> 00:03:44,000
but in JSX you are allowed to do that

82
00:03:44,000 --> 00:03:46,000
if you have no actual content

83
00:03:46,000 --> 00:03:48,000
between the opening and closing tags.

84
00:03:48,000 --> 00:03:50,000
And here I just rendered this div

85
00:03:50,000 --> 00:03:53,000
because of this styling which is added by this class.

86
00:03:53,000 --> 00:03:55,000
And hence I need no content

87
00:03:55,000 --> 00:03:58,000
and hence we can write it like a self-closing tag.

88
00:03:59,000 --> 00:04:02,000
Okay, so now we've got the backdrop and the modal.

89
00:04:02,000 --> 00:04:04,000
Now we can use both.

90
00:04:04,000 --> 00:04:07,000
And for the moment, we will always show both.

91
00:04:07,000 --> 00:04:10,000
So for the moment, we can go to app JS, for example,

92
00:04:10,000 --> 00:04:12,000
and below all these To do's,

93
00:04:12,000 --> 00:04:15,000
we can now also output the modal

94
00:04:15,000 --> 00:04:17,000
as a self-closing tag like this

95
00:04:17,000 --> 00:04:21,000
and the backdrop as a self-closing tag like this.

96
00:04:21,000 --> 00:04:24,000
And we again need to import these two component functions

97
00:04:24,000 --> 00:04:26,000
in order to use them here.

98
00:04:26,000 --> 00:04:30,000
So we import modal from dot slash components modal

99
00:04:31,000 --> 00:04:34,000
and we import backdrop

100
00:04:34,000 --> 00:04:37,000
from dot slash components backdrop, like this.

101
00:04:39,000 --> 00:04:41,000
If you now save all your files,

102
00:04:41,000 --> 00:04:44,000
you should see something like this.

103
00:04:44,000 --> 00:04:45,000
Let me zoom out a bit.

104
00:04:45,000 --> 00:04:46,000
Something like this.

105
00:04:46,000 --> 00:04:48,000
This is our modal.

106
00:04:48,000 --> 00:04:50,000
And at the moment, it's always visible

107
00:04:50,000 --> 00:04:52,000
and we can't close it

108
00:04:52,000 --> 00:04:55,000
because that's now one big missing piece.

109
00:04:55,000 --> 00:04:58,000
We know how to build components,

110
00:04:58,000 --> 00:05:00,000
how to build reusable components,

111
00:05:00,000 --> 00:05:02,000
and how to build our interface.

112
00:05:02,000 --> 00:05:07,000
But at this point, our interface is 100% static.

113
00:05:07,000 --> 00:05:08,000
It never changes.

114
00:05:08,000 --> 00:05:11,000
What we output here, that never changes.

115
00:05:11,000 --> 00:05:15,000
No matter how we interact with it as a user,

116
00:05:15,000 --> 00:05:18,000
the interface always stays the same.

117
00:05:18,000 --> 00:05:20,000
And of course, that's typically not what you want

118
00:05:20,000 --> 00:05:23,000
in a web interface.

119
00:05:23,000 --> 00:05:26,000
Things should be interactive and things should change.

120
00:05:26,000 --> 00:05:28,000
That's one of the main reasons

121
00:05:28,000 --> 00:05:31,000
for using a library like React.

122
00:05:31,000 --> 00:05:32,000
And therefore let's now explore

123
00:05:32,000 --> 00:05:35,000
how React makes sure that we can change

124
00:05:35,000 --> 00:05:38,000
what we see after the page was loaded.