1
00:00:02,000 --> 00:00:06,000
Now with the project cleaned up, let's explore React

2
00:00:06,000 --> 00:00:09,000
and let's write our own React code.

3
00:00:09,000 --> 00:00:12,000
Currently, we got two Java script files here,

4
00:00:12,000 --> 00:00:14,000
index JS and app JS.

5
00:00:14,000 --> 00:00:18,000
The index JS file will be the starting point

6
00:00:18,000 --> 00:00:20,000
of our React application.

7
00:00:20,000 --> 00:00:22,000
The code written in here

8
00:00:22,000 --> 00:00:23,000
will be the first code

9
00:00:23,000 --> 00:00:26,000
that will be executed in the browser

10
00:00:26,000 --> 00:00:30,000
when we load our project in the browser.

11
00:00:30,000 --> 00:00:34,000
So what we see here in the browser is the result

12
00:00:34,000 --> 00:00:38,000
of this code line here, executing in the end.

13
00:00:38,000 --> 00:00:41,000
Now we don't fully understand this code line yet

14
00:00:41,000 --> 00:00:43,000
but what we do in this file

15
00:00:43,000 --> 00:00:46,000
is we're importing a couple of things.

16
00:00:46,000 --> 00:00:50,000
That is how in modern JavaScript

17
00:00:50,000 --> 00:00:53,000
support that by that build setup we have here

18
00:00:53,000 --> 00:00:55,000
supported by the NPM start script

19
00:00:55,000 --> 00:00:58,000
and what it does behind the scenes

20
00:00:58,000 --> 00:01:03,000
how we combine multiple files and how we import features

21
00:01:03,000 --> 00:01:08,000
like objects or functions from file A into file B.

22
00:01:08,000 --> 00:01:09,000
And here we are, for example

23
00:01:09,000 --> 00:01:14,000
importing the React Dom object from the React Dom library.

24
00:01:15,000 --> 00:01:17,000
So that's not object we created.

25
00:01:17,000 --> 00:01:20,000
That is an object created by the React team

26
00:01:20,000 --> 00:01:23,000
exposed in that React Dom library,

27
00:01:23,000 --> 00:01:25,000
which is part of our project

28
00:01:25,000 --> 00:01:28,000
because it's part of our dependencies here.

29
00:01:28,000 --> 00:01:30,000
Now on that object

30
00:01:30,000 --> 00:01:32,000
we call a render method

31
00:01:32,000 --> 00:01:33,000
and queued at render method.

32
00:01:33,000 --> 00:01:37,000
we pass this strange HTML code.

33
00:01:37,000 --> 00:01:41,000
Now this HTML in Java script syntax here

34
00:01:41,000 --> 00:01:43,000
only works because of that build step,

35
00:01:43,000 --> 00:01:44,000
as mentioned before

36
00:01:44,000 --> 00:01:46,000
and it's actually called JSX.

37
00:01:47,000 --> 00:01:48,000
This kind of code is called a J S X code.

38
00:01:50,000 --> 00:01:54,000
This HTML in Java script code.

39
00:01:54,000 --> 00:01:57,000
JSX is a special syntax

40
00:01:57,000 --> 00:01:59,000
which is not understood by the browser

41
00:01:59,000 --> 00:02:02,000
and which the offer is converted behind the scenes.

42
00:02:02,000 --> 00:02:05,000
But which is more convenient for us as a developer to write

43
00:02:05,000 --> 00:02:07,000
because working with React

44
00:02:07,000 --> 00:02:11,000
will be about building custom HTML elements,

45
00:02:11,000 --> 00:02:12,000
these components

46
00:02:12,000 --> 00:02:14,000
and combining them together.

47
00:02:14,000 --> 00:02:15,000
And that is way easier.

48
00:02:15,000 --> 00:02:18,000
If we can just write HTML code

49
00:02:18,000 --> 00:02:21,000
kind of in our JavaScript files

50
00:02:21,000 --> 00:02:23,000
to describe the desired output.

51
00:02:23,000 --> 00:02:25,000
So here we kind of create

52
00:02:25,000 --> 00:02:30,000
or we use our own HTML element, the app element

53
00:02:30,000 --> 00:02:34,000
which is actually imported from that app file.

54
00:02:34,000 --> 00:02:35,000
The file extension is missing here

55
00:02:35,000 --> 00:02:39,000
because for JavaScript files, it can be omitted.

56
00:02:39,000 --> 00:02:41,000
And the second argument to the render method

57
00:02:41,000 --> 00:02:45,000
in the end just tells React where this element

58
00:02:45,000 --> 00:02:47,000
should be rendered into real Dom.

59
00:02:49,000 --> 00:02:51,000
Now, here we are selecting an element by ID

60
00:02:51,000 --> 00:02:53,000
with an ID route

61
00:02:53,000 --> 00:02:54,000
and we can find this

62
00:02:54,000 --> 00:02:57,000
on the single page that is part of this project.

63
00:02:57,000 --> 00:03:00,000
We find it in the public folder.

64
00:03:00,000 --> 00:03:04,000
There we got a couple of images, but also one HTML file.

65
00:03:04,000 --> 00:03:07,000
That is the single HTML file

66
00:03:07,000 --> 00:03:10,000
that makes up this React application.

67
00:03:10,000 --> 00:03:11,000
Because I mentioned before

68
00:03:11,000 --> 00:03:12,000
you typically build

69
00:03:12,000 --> 00:03:16,000
these single page applications with React

70
00:03:16,000 --> 00:03:21,000
where only one HTML file is fetched from a server

71
00:03:21,000 --> 00:03:24,000
and then React takes over and controls the Dom

72
00:03:24,000 --> 00:03:27,000
and what's visible on the screen.

73
00:03:27,000 --> 00:03:30,000
Now in this index HTML file in the body section

74
00:03:30,000 --> 00:03:32,000
we got a div with an ID route.

75
00:03:32,000 --> 00:03:35,000
And that ID route should be look familiar.

76
00:03:35,000 --> 00:03:36,000
That is the div,

77
00:03:36,000 --> 00:03:37,000
which we in the end

78
00:03:37,000 --> 00:03:39,000
select with this document,

79
00:03:39,000 --> 00:03:42,000
get element by ID code snippet here.

80
00:03:42,000 --> 00:03:43,000
And therefore, in the end

81
00:03:43,000 --> 00:03:46,000
what we tell React with that line

82
00:03:46,000 --> 00:03:51,000
is that we want to render our app HTML element

83
00:03:51,000 --> 00:03:54,000
our custom HTML element,

84
00:03:54,000 --> 00:03:55,000
which is defined

85
00:03:55,000 --> 00:03:57,000
in this app JS file into this place

86
00:03:57,000 --> 00:04:01,000
into the place of this element with this route ID.

87
00:04:01,000 --> 00:04:05,000
So into the place of that div here in the end.

88
00:04:05,000 --> 00:04:06,000
That's what we're telling React.

89
00:04:08,000 --> 00:04:12,000
That's why if we visit our page and we inspect it.

90
00:04:12,000 --> 00:04:14,000
So we don't view the page source

91
00:04:14,000 --> 00:04:17,000
but we inspected with the Dev tools here.

92
00:04:17,000 --> 00:04:19,000
When we have a look at the rendered Dom here

93
00:04:19,000 --> 00:04:21,000
we see embodied that there is this div

94
00:04:21,000 --> 00:04:23,000
with an ID of a root.

95
00:04:23,000 --> 00:04:27,000
And in there we see our div with hello

96
00:04:27,000 --> 00:04:30,000
which is the content we defined an app JS,

97
00:04:30,000 --> 00:04:31,000
and that should make sense

98
00:04:31,000 --> 00:04:34,000
because it is the app thing,

99
00:04:34,000 --> 00:04:36,000
which we import from the app JS file,

100
00:04:36,000 --> 00:04:38,000
which we rendered here.

101
00:04:38,000 --> 00:04:40,000
Now let's take a closer look at this app thing.

102
00:04:40,000 --> 00:04:43,000
Then that is a function,

103
00:04:43,000 --> 00:04:45,000
a function which we export

104
00:04:45,000 --> 00:04:48,000
to make it available outside of this file.

105
00:04:48,000 --> 00:04:51,000
But in the end, just a standard function

106
00:04:51,000 --> 00:04:53,000
a standard JavaScript function.

107
00:04:53,000 --> 00:04:54,000
The only special thing

108
00:04:54,000 --> 00:04:59,000
about that function is that it returns such JSX code.

109
00:05:00,000 --> 00:05:03,000
So there's HTML in JavaScript code.

110
00:05:03,000 --> 00:05:06,000
That's the only special thing.

111
00:05:06,000 --> 00:05:09,000
Other than that it's a regular JavaScript function.

112
00:05:09,000 --> 00:05:11,000
And that is super important.

113
00:05:11,000 --> 00:05:16,000
What we have here is a so-called React component.

114
00:05:16,000 --> 00:05:19,000
We can use it like an HTML element

115
00:05:19,000 --> 00:05:21,000
as we're doing it here in, in index JS

116
00:05:21,000 --> 00:05:24,000
but it's of course not an HTML element.

117
00:05:24,000 --> 00:05:25,000
the browser would know,

118
00:05:25,000 --> 00:05:27,000
but one defined by us

119
00:05:27,000 --> 00:05:30,000
the developers of this project.

120
00:05:30,000 --> 00:05:33,000
Now this component, as it's called in Reacts world

121
00:05:33,000 --> 00:05:35,000
this custom HTML element,

122
00:05:35,000 --> 00:05:37,000
is in the end just a function.

123
00:05:37,000 --> 00:05:38,000
A function

124
00:05:38,000 --> 00:05:39,000
which is to defined and exported

125
00:05:39,000 --> 00:05:43,000
and specifically a function that returns JSX.

126
00:05:43,000 --> 00:05:45,000
That's important.

127
00:05:45,000 --> 00:05:46,000
A component.

128
00:05:46,000 --> 00:05:47,000
so a function that should act

129
00:05:47,000 --> 00:05:51,000
as a component and be usable as a component by React

130
00:05:51,000 --> 00:05:53,000
must return something

131
00:05:53,000 --> 00:05:56,000
that can be rendered in the browser.

132
00:05:56,000 --> 00:05:58,000
That could be text.

133
00:05:58,000 --> 00:06:00,000
It could be a couple of other things,

134
00:06:00,000 --> 00:06:05,000
but it can and most typically will be HTML code as well.

135
00:06:05,000 --> 00:06:07,000
So this JSX code.

136
00:06:07,000 --> 00:06:09,000
And what's interesting

137
00:06:09,000 --> 00:06:10,000
is that in the browser,

138
00:06:10,000 --> 00:06:11,000
if we have a look at the Dom again

139
00:06:11,000 --> 00:06:15,000
we don't see our app element anywhere here.

140
00:06:15,000 --> 00:06:19,000
We don't see an HTML tag called app.

141
00:06:19,000 --> 00:06:22,000
Instead, we just see the content of our component here

142
00:06:22,000 --> 00:06:26,000
this div with hello as a text,

143
00:06:26,000 --> 00:06:28,000
because these custom elements,

144
00:06:28,000 --> 00:06:30,000
these are not known by the browser.

145
00:06:30,000 --> 00:06:34,000
We just write this code in our React application.

146
00:06:34,000 --> 00:06:37,000
And then when it runs in the browser,

147
00:06:37,000 --> 00:06:39,000
React will not render these custom elements,

148
00:06:39,000 --> 00:06:42,000
which wouldn't tell the browser anything,

149
00:06:42,000 --> 00:06:44,000
but instead it will render the content

150
00:06:44,000 --> 00:06:47,000
returned by these custom elements.

151
00:06:47,000 --> 00:06:50,000
And that's how these React components work

152
00:06:50,000 --> 00:06:51,000
in a nutshell.

153
00:06:51,000 --> 00:06:53,000
That is already one very important

154
00:06:53,000 --> 00:06:55,000
first piece of knowledge here

155
00:06:55,000 --> 00:06:57,000
that we have these React components

156
00:06:57,000 --> 00:06:59,000
which are functions returning JSX,

157
00:06:59,000 --> 00:07:03,000
which we can use to well tell, React,

158
00:07:03,000 --> 00:07:05,000
and therefore in the browser

159
00:07:05,000 --> 00:07:07,000
what should appear here on the screen.

160
00:07:07,000 --> 00:07:09,000
But of course, we typically don't do that

161
00:07:09,000 --> 00:07:12,000
with just one simple component

162
00:07:12,000 --> 00:07:15,000
that just returns a div of hello.

163
00:07:15,000 --> 00:07:16,000
Instead I mentioned before

164
00:07:16,000 --> 00:07:20,000
that I want to rebuild this basic first example

165
00:07:20,000 --> 00:07:22,000
with this delete button.

166
00:07:22,000 --> 00:07:23,000
And then there after

167
00:07:23,000 --> 00:07:26,000
dive into a little bit of a more complex project

168
00:07:26,000 --> 00:07:27,000
in a second step

169
00:07:27,000 --> 00:07:30,000
and therefore let's now work towards that first example

170
00:07:30,000 --> 00:07:31,000
with that delete button

171
00:07:31,000 --> 00:07:34,000
and that modal overlay.