Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,066 --> 00:00:05,566
Instructor: Let's have a closer look at the JSX.
2
00:00:05,566 --> 00:00:08,900
Now I mentioned before, earlier in this module,
3
00:00:08,900 --> 00:00:11,033
you can open up your developer tools
4
00:00:11,033 --> 00:00:13,600
and there you'll find the JavaScript code
5
00:00:13,600 --> 00:00:17,333
which is responsible for what you're seeing on the page.
6
00:00:17,333 --> 00:00:17,866
which is responsible for what you're seeing on the page.
7
00:00:17,866 --> 00:00:20,133
And in there, you will also find
8
00:00:20,133 --> 00:00:22,500
all your component functions,
9
00:00:22,500 --> 00:00:24,766
like this app function here.
10
00:00:24,766 --> 00:00:25,033
like this app function here.
11
00:00:25,033 --> 00:00:27,200
Now it will look totally different in the end,
12
00:00:27,200 --> 00:00:29,733
because there you have no JSX code,
13
00:00:29,733 --> 00:00:33,266
because JSX code isn't supported by the browser.
14
00:00:33,266 --> 00:00:37,133
This, in the end, is just syntactic sugar, which works here
15
00:00:37,133 --> 00:00:40,566
thanks to the behind-the-scenes transformations.
16
00:00:40,566 --> 00:00:40,933
thanks to the behind-the-scenes transformations.
17
00:00:40,933 --> 00:00:42,433
Now we can see that the code
18
00:00:42,433 --> 00:00:44,633
to which it is transformed in the end
19
00:00:44,633 --> 00:00:47,433
looks like this here, right?
20
00:00:47,433 --> 00:00:50,033
This here is the code to which it is transformed.
21
00:00:51,100 --> 00:00:55,233
Now this is a code which still is fairly cryptic,
22
00:00:55,233 --> 00:00:57,766
because this actually is the final step
23
00:00:57,766 --> 00:00:59,600
of the transformation.
24
00:00:59,600 --> 00:01:05,300
We could also write code instead of this JSX code
25
00:01:05,300 --> 00:01:05,733
We could also write code instead of this JSX code
26
00:01:05,733 --> 00:01:10,066
which is a bit more readable to us humans than this,
27
00:01:10,066 --> 00:01:13,333
but not as readable as the JSX code.
28
00:01:13,333 --> 00:01:13,466
but not as readable as the JSX code.
29
00:01:13,466 --> 00:01:15,466
I still want to show it to you
30
00:01:15,466 --> 00:01:19,500
because this shows you what this JSX code
31
00:01:19,500 --> 00:01:23,233
actually represents behind-the-scenes.
32
00:01:23,233 --> 00:01:24,766
So here we go.
33
00:01:24,766 --> 00:01:25,133
So here we go.
34
00:01:25,133 --> 00:01:26,333
Maybe
35
00:01:26,333 --> 00:01:29,100
you already wondered about one other thing.
36
00:01:29,100 --> 00:01:31,766
In package.json, we've got a bunch of dependencies,
37
00:01:31,766 --> 00:01:33,766
and most of them are just dealing with
38
00:01:33,766 --> 00:01:36,533
the behind-the-scenes transformations.
39
00:01:36,533 --> 00:01:37,166
the behind-the-scenes transformations.
40
00:01:37,166 --> 00:01:42,600
But we've got two dependencies which are related to React.
41
00:01:42,600 --> 00:01:45,933
React and React-dom.
42
00:01:45,933 --> 00:01:49,966
Now we are using React-dom in the index.js file,
43
00:01:49,966 --> 00:01:50,333
Now we are using React-dom in the index.js file,
44
00:01:50,333 --> 00:01:53,066
but we are never using React anywhere.
45
00:01:53,066 --> 00:01:56,600
We're never importing React anywhere.
46
00:01:56,600 --> 00:02:02,200
And this actually just works in this kind of project setup
47
00:02:02,200 --> 00:02:05,266
and in all modern React project setups
48
00:02:05,266 --> 00:02:09,133
which are created by create-react-app.
49
00:02:09,133 --> 00:02:09,733
which are created by create-react-app.
50
00:02:09,733 --> 00:02:12,500
In a lot of other React projects,
51
00:02:12,500 --> 00:02:14,733
which you'll find out there in the wild,
52
00:02:14,733 --> 00:02:17,866
you will actually see React imports,
53
00:02:17,866 --> 00:02:20,400
even though we don't have them here.
54
00:02:20,400 --> 00:02:24,400
Because in the past, in older React projects,
55
00:02:24,400 --> 00:02:27,066
you actually needed to
56
00:02:27,066 --> 00:02:33,633
import React from React in all your React component files.
57
00:02:33,633 --> 00:02:40,200
To be precise, in all files where you used JSX.
58
00:02:40,200 --> 00:02:40,633
To be precise, in all files where you used JSX.
59
00:02:40,633 --> 00:02:45,033
You needed to always import React from React in the past.
60
00:02:45,033 --> 00:02:47,633
And you'll still see a lot of React projects out there
61
00:02:47,633 --> 00:02:50,166
which have these imports therefore.
62
00:02:50,166 --> 00:02:50,866
which have these imports therefore.
63
00:02:50,866 --> 00:02:53,000
That we can emit this import now,
64
00:02:53,000 --> 00:02:55,233
is really just some magic being done
65
00:02:55,233 --> 00:02:58,466
by modern React project setups.
66
00:02:58,466 --> 00:02:58,833
by modern React project setups.
67
00:02:58,833 --> 00:03:01,266
We needed this import in the past
68
00:03:01,266 --> 00:03:03,466
because this JSX code, as I mentioned,
69
00:03:03,466 --> 00:03:05,500
is just syntactic sugar.
70
00:03:05,500 --> 00:03:08,500
And under the hood, it has actually transformed
71
00:03:08,500 --> 00:03:13,166
two methods called on this React object,
72
00:03:13,166 --> 00:03:13,300
two methods called on this React object,
73
00:03:13,300 --> 00:03:17,533
which is why we needed to import React in the past.
74
00:03:17,533 --> 00:03:20,600
Now, let me show you what this code would look like
75
00:03:20,600 --> 00:03:24,466
if we wouldn't use this JSX syntax.
76
00:03:24,466 --> 00:03:24,700
if we wouldn't use this JSX syntax.
77
00:03:24,700 --> 00:03:26,866
And therefore I'll comment this out
78
00:03:26,866 --> 00:03:30,133
and return it as alternative.
79
00:03:30,133 --> 00:03:33,033
Because on this imported React object,
80
00:03:33,033 --> 00:03:37,466
there is a createElement method, which we can call.
81
00:03:37,466 --> 00:03:42,033
And when you use JSX, it's near this method which is called.
82
00:03:42,033 --> 00:03:42,833
And when you use JSX, it's near this method which is called.
83
00:03:42,833 --> 00:03:46,000
CreateElement takes three arguments.
84
00:03:46,000 --> 00:03:46,433
CreateElement takes three arguments.
85
00:03:46,433 --> 00:03:49,800
The first argument is the element which should be created.
86
00:03:49,800 --> 00:03:51,900
For example, a div.
87
00:03:51,900 --> 00:03:54,400
And if it's a built-in HTML element,
88
00:03:54,400 --> 00:03:56,700
you just pass in a string
89
00:03:56,700 --> 00:04:00,500
with the name of that element, like div.
90
00:04:00,500 --> 00:04:03,633
The second argument is an object
91
00:04:03,633 --> 00:04:05,866
that configures this element.
92
00:04:05,866 --> 00:04:06,066
that configures this element.
93
00:04:06,066 --> 00:04:10,466
Specifically, an object which sets all the attributes
94
00:04:10,466 --> 00:04:11,900
of this element.
95
00:04:11,900 --> 00:04:13,766
This div has no attributes,
96
00:04:13,766 --> 00:04:17,300
so here we can pass in an empty object.
97
00:04:17,300 --> 00:04:19,533
The third argument now is the content
98
00:04:19,533 --> 00:04:22,833
between the opening and closing div tags.
99
00:04:22,833 --> 00:04:22,966
between the opening and closing div tags.
100
00:04:22,966 --> 00:04:25,366
And actually it's not just a third argument.
101
00:04:25,366 --> 00:04:28,833
You can now have an infinitely long list of arguments,
102
00:04:28,833 --> 00:04:31,233
which are the different content pieces
103
00:04:31,233 --> 00:04:34,466
between the opening and closing tags.
104
00:04:34,466 --> 00:04:36,666
So here we have two elements, so we would have
105
00:04:36,666 --> 00:04:38,800
two extra arguments.
106
00:04:38,800 --> 00:04:41,466
The third argument would be our H2 element.
107
00:04:41,466 --> 00:04:44,233
So the first child in that div.
108
00:04:44,233 --> 00:04:44,566
So the first child in that div.
109
00:04:44,566 --> 00:04:48,233
And therefore here, again, we would call React
110
00:04:48,233 --> 00:04:49,766
createElement
111
00:04:49,766 --> 00:04:52,533
and create an H2 element here.
112
00:04:52,533 --> 00:04:55,233
And that H2 element, again, has no attributes,
113
00:04:55,233 --> 00:04:58,366
so the second argument of this second createElement call
114
00:04:58,366 --> 00:05:00,400
would be an empty object.
115
00:05:00,400 --> 00:05:00,966
would be an empty object.
116
00:05:00,966 --> 00:05:03,466
And the third argument of this createElement call
117
00:05:03,466 --> 00:05:06,000
would be the content in this H2 tag,
118
00:05:06,000 --> 00:05:06,133
would be the content in this H2 tag,
119
00:05:06,133 --> 00:05:08,433
so this string, in this case.
120
00:05:08,433 --> 00:05:11,200
So we would pass this string here,
121
00:05:11,200 --> 00:05:14,000
and escape this single quote.
122
00:05:14,000 --> 00:05:14,500
and escape this single quote.
123
00:05:14,500 --> 00:05:19,300
And if we now format it, it would look like this.
124
00:05:19,300 --> 00:05:24,966
Now next to this second createElement call,
125
00:05:24,966 --> 00:05:27,333
We could have a third createElement call,
126
00:05:27,333 --> 00:05:30,400
which is the neighbor element to this H2 element,
127
00:05:30,400 --> 00:05:33,266
so this expenses component.
128
00:05:33,266 --> 00:05:34,900
Again, we create an element here,
129
00:05:34,900 --> 00:05:37,866
but now we're working with a custom component
130
00:05:37,866 --> 00:05:39,766
instead of a built-in one.
131
00:05:39,766 --> 00:05:42,600
In such cases, you don't use a string here,
132
00:05:42,600 --> 00:05:42,833
In such cases, you don't use a string here,
133
00:05:42,833 --> 00:05:46,433
but you just point at your imported function,
134
00:05:46,433 --> 00:05:47,766
which it in the end is,
135
00:05:47,766 --> 00:05:51,633
because your components are just functions, right?
136
00:05:51,633 --> 00:05:54,066
So here we set Expenses.
137
00:05:54,066 --> 00:05:58,066
We point at Expenses as an element here.
138
00:05:58,066 --> 00:06:01,366
The second argument is an object of properties
139
00:06:01,366 --> 00:06:04,366
that should be set, of attributes that should be set,
140
00:06:04,366 --> 00:06:04,500
that should be set, of attributes that should be set,
141
00:06:04,500 --> 00:06:08,400
and here we have the items prop, the items attribute,
142
00:06:08,400 --> 00:06:11,133
so we would add an items key here.
143
00:06:11,133 --> 00:06:11,366
so we would add an items key here.
144
00:06:11,366 --> 00:06:13,566
Keep in mind, this is just a JavaScript object,
145
00:06:13,566 --> 00:06:16,600
so we have the property name, and then a colon,
146
00:06:16,600 --> 00:06:21,800
and then the value, which here would be expenses.
147
00:06:21,800 --> 00:06:24,300
And then as a third argument,
148
00:06:24,300 --> 00:06:27,033
we have to content between the opening and closing tags.
149
00:06:27,033 --> 00:06:28,933
And in this case, there is no such contents,
150
00:06:28,933 --> 00:06:31,066
so we omit it.
151
00:06:31,066 --> 00:06:33,300
And this here
152
00:06:33,300 --> 00:06:36,700
would be the alternative to this JSX code
153
00:06:36,700 --> 00:06:39,633
using this React object.
154
00:06:39,633 --> 00:06:40,000
using this React object.
155
00:06:40,000 --> 00:06:42,000
And therefore, if I saved that,
156
00:06:42,000 --> 00:06:43,366
we go back to the screen,
157
00:06:43,366 --> 00:06:46,933
we see exactly the same as before.
158
00:06:46,933 --> 00:06:50,166
Now, you could write your entire React app like this.
159
00:06:50,166 --> 00:06:50,466
Now, you could write your entire React app like this.
160
00:06:50,466 --> 00:06:53,300
It just turns out that this is a bit harder to read
161
00:06:53,300 --> 00:06:57,666
and a bit more cumbersome than using this JSX code.
162
00:06:57,666 --> 00:07:00,833
But that's why you needed to import React from React
163
00:07:00,833 --> 00:07:03,233
in all your component files in the past,
164
00:07:03,233 --> 00:07:03,666
in all your component files in the past,
165
00:07:03,666 --> 00:07:06,600
because this is the under-the-hood code
166
00:07:06,600 --> 00:07:11,366
which kind of gets created automatically when you use JSX.
167
00:07:11,366 --> 00:07:13,500
Now in more modern project setups,
168
00:07:13,500 --> 00:07:16,500
you can omit this React import because
169
00:07:16,500 --> 00:07:19,366
the project setup is able to make that transformation
170
00:07:19,366 --> 00:07:21,300
without the import being added.
171
00:07:21,300 --> 00:07:23,166
But if you see component functions
172
00:07:23,166 --> 00:07:25,133
where this import is there,
173
00:07:25,133 --> 00:07:26,833
it is there because, in the past,
174
00:07:26,833 --> 00:07:29,933
you always did need to add it.
175
00:07:29,933 --> 00:07:32,900
And therefore, because of that reason,
176
00:07:32,900 --> 00:07:35,633
I will now also import it and add it
177
00:07:35,633 --> 00:07:39,733
to all components where I use some JSX code.
178
00:07:39,733 --> 00:07:39,933
to all components where I use some JSX code.
179
00:07:39,933 --> 00:07:42,033
Like here, index.js,
180
00:07:42,033 --> 00:07:44,300
Expenses.js,
181
00:07:44,300 --> 00:07:46,933
ExpenseItem.js,
182
00:07:46,933 --> 00:07:47,400
ExpenseItem.js,
183
00:07:47,400 --> 00:07:49,733
ExpenseDate.js,
184
00:07:49,733 --> 00:07:51,333
and Card.js.
185
00:07:51,333 --> 00:07:53,966
Again, you technically don't need to do that,
186
00:07:53,966 --> 00:07:56,533
but I'm doing it to really emphasize
187
00:07:56,533 --> 00:08:00,333
that React is still being used under the hood here
188
00:08:00,333 --> 00:08:00,500
that React is still being used under the hood here
189
00:08:00,500 --> 00:08:04,366
when you use JSX code, because that code
190
00:08:04,366 --> 00:08:07,433
under the hood is transformed to something like this
191
00:08:07,433 --> 00:08:09,433
before it's then transformed even more
192
00:08:09,433 --> 00:08:12,400
to what we saw in the browser earlier.
193
00:08:12,400 --> 00:08:14,000
That's important.
194
00:08:14,000 --> 00:08:15,600
And if you have a look at this code,
195
00:08:15,600 --> 00:08:20,466
it should also be clear why you need some wrapping element
196
00:08:20,466 --> 00:08:22,633
as a root JSX element.
197
00:08:22,633 --> 00:08:26,666
Why you can't have just these two side-by-side elements
198
00:08:26,666 --> 00:08:28,266
being returned.
199
00:08:28,266 --> 00:08:31,366
Because how will you write this in the React
200
00:08:31,366 --> 00:08:32,866
createElement world?
201
00:08:32,866 --> 00:08:36,832
You, in the end, would be trying to return this,
202
00:08:36,832 --> 00:08:38,232
and that doesn't work.
203
00:08:38,232 --> 00:08:41,433
You can't return more than one thing.
204
00:08:41,433 --> 00:08:41,732
You can't return more than one thing.
205
00:08:41,732 --> 00:08:44,366
You could return an array, sure,
206
00:08:44,366 --> 00:08:46,266
but this is not an array of elements.
207
00:08:46,266 --> 00:08:49,400
This is two separate elements side by side.
208
00:08:49,400 --> 00:08:51,933
That's why you always need such a wrapper,
209
00:08:51,933 --> 00:08:54,033
because in createElement world,
210
00:08:54,033 --> 00:08:55,866
you always create one element
211
00:08:55,866 --> 00:08:59,733
which then may have more child elements.
212
00:08:59,733 --> 00:09:04,266
So that's why we have this one wrapper root JSX element
213
00:09:04,266 --> 00:09:06,066
which we always need.
214
00:09:06,066 --> 00:09:07,433
This is why we need that.
215
00:09:07,433 --> 00:09:10,600
That's the under-the-hood, behind-the-scenes stuff
216
00:09:10,600 --> 00:09:12,666
that is going on.
217
00:09:12,666 --> 00:09:13,800
Now, I will comment this out
218
00:09:13,800 --> 00:09:16,033
and go back to the JSX solution,
219
00:09:16,033 --> 00:09:18,166
because, of course, we're going to write JSX code
220
00:09:18,166 --> 00:09:19,033
in the course.
221
00:09:19,033 --> 00:09:21,433
After all, this is way more convenient.
222
00:09:21,433 --> 00:09:24,000
But it is important to understand what is happening
223
00:09:24,000 --> 00:09:26,700
under the hood and how React works.
17236
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.