Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:05,580
Remember, this section was about components.
2
00:00:05,580 --> 00:00:09,340
It was about understanding the most important concept
3
00:00:09,340 --> 00:00:12,920
of React that you build user interfaces
4
00:00:12,920 --> 00:00:15,623
by building and combining components.
5
00:00:17,130 --> 00:00:18,450
And for that, we had a look
6
00:00:18,450 --> 00:00:22,160
at the React Core Syntax and JSX.
7
00:00:22,160 --> 00:00:24,340
We, of course, had a very detailed look
8
00:00:24,340 --> 00:00:28,300
at building and using and working with components and props.
9
00:00:28,300 --> 00:00:31,640
And that already leads to the last part, data.
10
00:00:31,640 --> 00:00:34,840
We learned how to share data across components
11
00:00:34,840 --> 00:00:37,870
through that props concept.
12
00:00:37,870 --> 00:00:41,960
Now, maybe you already noticed one important thing,
13
00:00:41,960 --> 00:00:45,280
with all these components, which we are building,
14
00:00:45,280 --> 00:00:48,110
in the end we're just splitting up our code
15
00:00:48,110 --> 00:00:51,420
across multiple files and building blocks
16
00:00:51,420 --> 00:00:54,820
so that if we want to have more than one expense item,
17
00:00:54,820 --> 00:00:58,250
we can just use our custom ExpenseItem component
18
00:00:58,250 --> 00:01:00,848
multiple times instead of repeating all
19
00:01:00,848 --> 00:01:05,848
that code multiple times, that's the idea behind components.
20
00:01:05,860 --> 00:01:09,400
In the end, what ends up on the screen
21
00:01:09,400 --> 00:01:13,010
are just default HTML elements, though.
22
00:01:13,010 --> 00:01:17,360
If you inspect your page with the developer tools, here,
23
00:01:17,360 --> 00:01:20,850
in the Chrome developer tools with the Elements tab,
24
00:01:20,850 --> 00:01:22,690
you will notice that you don't see
25
00:01:22,690 --> 00:01:26,510
your custom components here, there is no card
26
00:01:26,510 --> 00:01:29,920
or ExpenseItem component, you just see divs
27
00:01:29,920 --> 00:01:33,090
and H2 elements, and so on.
28
00:01:33,090 --> 00:01:38,090
And that is how the web works and how React works.
29
00:01:38,530 --> 00:01:43,530
These custom components are not really HTML elements,
30
00:01:43,600 --> 00:01:47,390
which end up on the screen, you just use them in your code
31
00:01:47,390 --> 00:01:50,950
in your React code, in your JSX code.
32
00:01:50,950 --> 00:01:55,190
What ends up on the screen are just the HTML elements
33
00:01:55,190 --> 00:01:58,850
because, ultimately, every custom component you build
34
00:01:58,850 --> 00:02:02,780
either uses these built in HTML elements
35
00:02:02,780 --> 00:02:05,960
or it uses another of component which, at some point,
36
00:02:05,960 --> 00:02:09,289
if you drill into your components deeply enough
37
00:02:09,289 --> 00:02:13,000
will end up using these built in elements.
38
00:02:13,000 --> 00:02:14,860
And that's an important takeaway,
39
00:02:14,860 --> 00:02:17,223
and something important to keep in mind.
40
00:02:18,180 --> 00:02:21,340
Now, the application we built thus far is great
41
00:02:21,340 --> 00:02:23,300
because we had the chance of learning
42
00:02:23,300 --> 00:02:25,270
about components and props with it.
43
00:02:25,270 --> 00:02:28,450
And these are two of the most important concepts
44
00:02:28,450 --> 00:02:30,610
you got to know when working with React.
45
00:02:30,610 --> 00:02:33,360
I'm not sure if I mentioned it already.
46
00:02:33,360 --> 00:02:35,780
But, of course, this application as we built
47
00:02:35,780 --> 00:02:38,880
it thus far also has a downside.
48
00:02:38,880 --> 00:02:41,380
In the end, it's still static.
49
00:02:41,380 --> 00:02:44,910
Yes, we have reusable components, which can be configured
50
00:02:44,910 --> 00:02:48,930
with props but, ultimately, we have this expenses array
51
00:02:48,930 --> 00:02:53,260
in the App.js file and the this array never changes.
52
00:02:53,260 --> 00:02:55,823
The data here is set in stone.
53
00:02:55,823 --> 00:02:59,300
It's still a static application in the end.
54
00:02:59,300 --> 00:03:02,260
Nothing is changing here, as a user,
55
00:03:02,260 --> 00:03:06,520
we have no chance of interacting with this application.
56
00:03:06,520 --> 00:03:08,790
And that's therefore what we're going
57
00:03:08,790 --> 00:03:11,810
to change in the next course section
58
00:03:11,810 --> 00:03:13,970
when we're going to bring this to life.
59
00:03:13,970 --> 00:03:15,350
And when we're going to learn
60
00:03:15,350 --> 00:03:17,833
about another concept called state.
61
00:03:18,740 --> 00:03:22,750
Now, before we go there though, I just got three
62
00:03:22,750 --> 00:03:25,140
other things, which I want to cover here.
63
00:03:25,140 --> 00:03:29,510
The first thing, the first concept is JSX.
64
00:03:29,510 --> 00:03:32,240
I mentioned that we'll take a closer look at that
65
00:03:32,240 --> 00:03:34,540
and we're going to do that in the next lecture.
66
00:03:34,540 --> 00:03:37,160
You could skip that lecture but, at some point,
67
00:03:37,160 --> 00:03:40,030
you should have a look at it so that you understand
68
00:03:40,030 --> 00:03:43,830
what JSX really is under the hood and how it works.
69
00:03:43,830 --> 00:03:45,780
So I recommend that you don't skip it,
70
00:03:45,780 --> 00:03:48,380
even though you could do that, if you're in a hurry.
71
00:03:49,320 --> 00:03:51,550
Now, the other two things I want to have a look at
72
00:03:51,550 --> 00:03:54,260
is how we organize our files,
73
00:03:54,260 --> 00:03:57,500
and how we write our functions here.
74
00:03:57,500 --> 00:03:59,940
And, therefore, let's dive into these concepts
75
00:03:59,940 --> 00:04:01,600
before we finish this module,
76
00:04:01,600 --> 00:04:04,393
and move on to the next course section.
6235
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.