1
00:00:02,000 --> 00:00:04,000
This is a very simple demo here.

2
00:00:04,000 --> 00:00:07,000
I have some content on the page and when I click delete,

3
00:00:07,000 --> 00:00:10,000
I get this overlay where I can confirm or cancel.

4
00:00:10,000 --> 00:00:12,000
Now both buttons don't do anything

5
00:00:12,000 --> 00:00:16,000
but close that overlay as (indistinct)

6
00:00:16,000 --> 00:00:17,000
clicking that backdrop.

7
00:00:17,000 --> 00:00:19,000
But what you see on this page here

8
00:00:19,000 --> 00:00:21,000
or what happens when we click delete?

9
00:00:21,000 --> 00:00:25,000
All of that is controlled with JavaScript.

10
00:00:25,000 --> 00:00:30,000
I got a HTML file with some very basic HTML content,

11
00:00:30,000 --> 00:00:32,000
some styling which we can ignore.

12
00:00:32,000 --> 00:00:36,000
And then the magic happens in this app JS file.

13
00:00:36,000 --> 00:00:40,000
In there I got some code that in the end adds a listener,

14
00:00:40,000 --> 00:00:43,000
to this main button which we got on the screen.

15
00:00:43,000 --> 00:00:45,000
So to this delete button here,

16
00:00:45,000 --> 00:00:47,000
and when that button is clicked

17
00:00:47,000 --> 00:00:50,000
I fired this showModalHandler function.

18
00:00:50,000 --> 00:00:52,000
And in there we run a bunch

19
00:00:52,000 --> 00:00:55,000
of JavaScript code to create various elements

20
00:00:55,000 --> 00:00:58,000
divs, paragraphs and then the cancel

21
00:00:58,000 --> 00:01:02,000
and confirm buttons to configure those elements,

22
00:01:02,000 --> 00:01:04,000
and add text or CSS classes

23
00:01:04,000 --> 00:01:08,000
and to add event listeners to those elements as well

24
00:01:08,000 --> 00:01:11,000
to then fire that closeModalHandler function

25
00:01:11,000 --> 00:01:14,000
which in the end removes the overlay

26
00:01:14,000 --> 00:01:16,000
this modal as we call it.

27
00:01:16,000 --> 00:01:19,000
And then still in the showModalHandler function,

28
00:01:19,000 --> 00:01:23,000
I got some code that combines all those created elements

29
00:01:23,000 --> 00:01:26,000
and brings them onto the screen.

30
00:01:26,000 --> 00:01:29,000
This is the JavaScript code responsible

31
00:01:29,000 --> 00:01:31,000
for opening this overlay here.

32
00:01:31,000 --> 00:01:35,000
Now it works and it's not too bad

33
00:01:35,000 --> 00:01:38,000
but it's quite some code for this simple action.

34
00:01:38,000 --> 00:01:43,000
And here we only got one Todo in this demo application.

35
00:01:43,000 --> 00:01:46,000
If we would add multiple Todos,

36
00:01:46,000 --> 00:01:49,000
if we would repeat this HTML code

37
00:01:49,000 --> 00:01:53,000
multiple times to render more Todos on the page

38
00:01:53,000 --> 00:01:56,000
or to even render those Todos dynamically

39
00:01:56,000 --> 00:01:59,000
after fetching them from a database, for example,

40
00:01:59,000 --> 00:02:03,000
this code would become far more difficult, far more complex.

41
00:02:03,000 --> 00:02:06,000
And for example I couldn't just select

42
00:02:06,000 --> 00:02:09,000
a button on the page with that query selector,

43
00:02:09,000 --> 00:02:11,000
because we would have multiple delete buttons

44
00:02:11,000 --> 00:02:13,000
for multiple Todos.

45
00:02:13,000 --> 00:02:14,000
And we would have to make sure

46
00:02:14,000 --> 00:02:18,000
that for different Todos different overlays are opened.

47
00:02:18,000 --> 00:02:20,000
And when we confirmed the deletion

48
00:02:20,000 --> 00:02:23,000
the correct Todo is deleted.

49
00:02:23,000 --> 00:02:25,000
We're not even doing that here in this demo

50
00:02:25,000 --> 00:02:27,000
but that would be more complexity

51
00:02:27,000 --> 00:02:30,000
which we have to add and handle

52
00:02:30,000 --> 00:02:33,000
if we build a more realistic app here,

53
00:02:33,000 --> 00:02:35,000
a more realistic website.

54
00:02:35,000 --> 00:02:38,000
And therefore just the JavaScript works,

55
00:02:38,000 --> 00:02:41,000
and can sometimes be a good choice

56
00:02:41,000 --> 00:02:43,000
but it can also reach its limits.

57
00:02:43,000 --> 00:02:47,000
And one of the reasons is that with just a JavaScript,

58
00:02:47,000 --> 00:02:52,000
you have to write every single step that should be taken.

59
00:02:52,000 --> 00:02:54,000
We want to create a element.

60
00:02:54,000 --> 00:02:55,000
We want to set its content.

61
00:02:55,000 --> 00:02:57,000
We want to add classes.

62
00:02:57,000 --> 00:02:59,000
We want to add a click listener.

63
00:02:59,000 --> 00:03:01,000
Then what should happen on that click listener?

64
00:03:01,000 --> 00:03:04,000
Every single step needs to be described.

65
00:03:04,000 --> 00:03:07,000
This way of programming and bringing something

66
00:03:07,000 --> 00:03:11,000
onto the screen is called an imperative approach.

67
00:03:11,000 --> 00:03:16,000
We simply describe action after action, step after step,

68
00:03:16,000 --> 00:03:18,000
and that can reach its limits.

69
00:03:18,000 --> 00:03:21,000
And in addition even if we don't reach any limits,

70
00:03:21,000 --> 00:03:23,000
we as a developer have to take care

71
00:03:23,000 --> 00:03:26,000
about all the nitty-gritty details.

72
00:03:26,000 --> 00:03:28,000
We have to run the low level code

73
00:03:28,000 --> 00:03:31,000
for creating a button, for setting its text content.

74
00:03:31,000 --> 00:03:34,000
And therefore in the end we reinvent the wheel

75
00:03:34,000 --> 00:03:39,000
over and over again doing repetitive tasks.

76
00:03:39,000 --> 00:03:42,000
Now here is the same example with React.

77
00:03:42,000 --> 00:03:44,000
This works in exactly the same way

78
00:03:44,000 --> 00:03:47,000
but the code looks very different.

79
00:03:47,000 --> 00:03:49,000
I got a React project here.

80
00:03:49,000 --> 00:03:52,000
And as a side note you find both code repositories,

81
00:03:52,000 --> 00:03:55,000
both code snapshots attached.

82
00:03:55,000 --> 00:03:59,000
And here in React JS, this might look a bit more complex.

83
00:03:59,000 --> 00:04:01,000
We got more files involved here

84
00:04:01,000 --> 00:04:02,000
but that's something we're going to learn,

85
00:04:02,000 --> 00:04:03,000
throughout the course.

86
00:04:03,000 --> 00:04:06,000
Why we have multiple files.

87
00:04:06,000 --> 00:04:11,000
But in the end this is the main code that's responsible

88
00:04:11,000 --> 00:04:13,000
for bringing this Todo onto the screen.

89
00:04:13,000 --> 00:04:15,000
And what's very interesting here

90
00:04:15,000 --> 00:04:18,000
is that we have like a custom HTML component here.

91
00:04:18,000 --> 00:04:21,000
A custom HTML element,

92
00:04:21,000 --> 00:04:25,000
and indeed React is all about those components.

93
00:04:25,000 --> 00:04:29,000
React is all about splitting your application

94
00:04:29,000 --> 00:04:32,000
into small building blocks, small components

95
00:04:32,000 --> 00:04:34,000
where every building block, every component

96
00:04:34,000 --> 00:04:38,000
has a clear task and therefore your code stays maintainable

97
00:04:38,000 --> 00:04:42,000
and manageable and React, the library

98
00:04:42,000 --> 00:04:45,000
will do the heavy lifting of rendering something

99
00:04:45,000 --> 00:04:49,000
on the screen and of combining all your code.

100
00:04:49,000 --> 00:04:51,000
So for example if we look into the code

101
00:04:51,000 --> 00:04:53,000
for this custom element which we built here,

102
00:04:53,000 --> 00:04:55,000
which lives in this Todo.js file,

103
00:04:55,000 --> 00:04:59,000
then we here again see that I have some HTML code

104
00:04:59,000 --> 00:05:00,000
for rendering a Todo.

105
00:05:00,000 --> 00:05:03,000
But that we have some kind of placeholder in here

106
00:05:03,000 --> 00:05:05,000
and then some kind of AVRA code,

107
00:05:05,000 --> 00:05:07,000
which we don't fully understand yet

108
00:05:07,000 --> 00:05:09,000
but which we will understand

109
00:05:09,000 --> 00:05:11,000
and learn about fraud discourse.

110
00:05:11,000 --> 00:05:13,000
And in the end that's the code responsible

111
00:05:13,000 --> 00:05:15,000
for rendering such a Todo

112
00:05:15,000 --> 00:05:20,000
and for rendering the modal this overlay here as well

113
00:05:20,000 --> 00:05:22,000
and for rendering it conditionally.

114
00:05:22,000 --> 00:05:25,000
And what's interesting here is that even though

115
00:05:25,000 --> 00:05:28,000
we don't understand this code yet,

116
00:05:28,000 --> 00:05:30,000
and even though it's certainly strange

117
00:05:30,000 --> 00:05:34,000
that we have HTML code in JavaScript files,

118
00:05:34,000 --> 00:05:36,000
even though that's all weird,

119
00:05:36,000 --> 00:05:39,000
we can definitely see that we don't have

120
00:05:39,000 --> 00:05:42,000
a bunch of step by step instructions here.

121
00:05:42,000 --> 00:05:45,000
Instead we kind of define what we wanna have

122
00:05:45,000 --> 00:05:47,000
as an end result.

123
00:05:47,000 --> 00:05:49,000
And then we have some placeholders,

124
00:05:49,000 --> 00:05:51,000
some flexible elements there.

125
00:05:51,000 --> 00:05:54,000
And then we have very simple instructions here

126
00:05:54,000 --> 00:05:59,000
which in the end then will be processed by React to change

127
00:05:59,000 --> 00:06:01,000
what's visible on the screen.

128
00:06:01,000 --> 00:06:04,000
And all these low level instructions

129
00:06:04,000 --> 00:06:07,000
for creating elements and setting text continents on,

130
00:06:07,000 --> 00:06:09,000
those instructions are not written

131
00:06:09,000 --> 00:06:13,000
by us when using React instead they will be written

132
00:06:13,000 --> 00:06:15,000
or defined if you wanna call it like this

133
00:06:15,000 --> 00:06:17,000
by the React library.

134
00:06:17,000 --> 00:06:21,000
We as a React developer work on a higher level

135
00:06:21,000 --> 00:06:23,000
which makes working with React

136
00:06:23,000 --> 00:06:28,000
and which makes building complex user interfaces way easier.

137
00:06:28,000 --> 00:06:31,000
And that is why we wanna use React.js.

138
00:06:31,000 --> 00:06:33,000
It makes building modern,

139
00:06:33,000 --> 00:06:36,000
rich complex user interfaces easier.

140
00:06:36,000 --> 00:06:41,000
And it does so by giving us a higher level syntax

141
00:06:42,000 --> 00:06:45,000
where we write code in a declarative way,

142
00:06:45,000 --> 00:06:49,000
in a declarative component focused way.

143
00:06:49,000 --> 00:06:51,000
We define what we wanna have on the screen,

144
00:06:51,000 --> 00:06:53,000
what the end goal is.

145
00:06:53,000 --> 00:06:57,000
We create these custom HTML elements

146
00:06:57,000 --> 00:06:59,000
and React will do the rest.

147
00:06:59,000 --> 00:07:01,000
And one side effect for example is

148
00:07:01,000 --> 00:07:04,000
that if we wanted more than one Todo

149
00:07:04,000 --> 00:07:06,000
we could just copy that custom element.

150
00:07:07,000 --> 00:07:10,000
Change maybe that text, that configuration

151
00:07:11,000 --> 00:07:14,000
and boom, we got a second Todo here.

152
00:07:14,000 --> 00:07:17,000
And we got up button on that Todo which works as well.

153
00:07:18,000 --> 00:07:21,000
And that is why we use technologies

154
00:07:21,000 --> 00:07:23,000
or frameworks like React.