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:03,233
Instructor: So let's now dive
2
00:00:03,233 --> 00:00:06,300
into all these important basics and fundamentals.
3
00:00:06,300 --> 00:00:09,033
And for that keep in mind what you learned
4
00:00:09,033 --> 00:00:11,500
in the first course section.
5
00:00:11,500 --> 00:00:17,033
React is a JavaScript library for building user interfaces.
6
00:00:17,033 --> 00:00:20,500
And we also learned that of course in general,
7
00:00:20,500 --> 00:00:22,933
HTML, CSS and JavaScript
8
00:00:22,933 --> 00:00:26,200
are about building user interfaces as well.
9
00:00:26,200 --> 00:00:29,800
But I also mentioned in the first course section
10
00:00:29,800 --> 00:00:32,333
that we use libraries like React
11
00:00:32,333 --> 00:00:32,400
that we use libraries like React
12
00:00:32,400 --> 00:00:37,700
because that simplifies building those user interfaces.
13
00:00:37,700 --> 00:00:39,566
We don't need it,
14
00:00:39,566 --> 00:00:43,000
you can build any website without React
15
00:00:43,000 --> 00:00:46,333
but if you are having more complex user interfaces
16
00:00:46,333 --> 00:00:48,766
like the one we have in his expense tracker.
17
00:00:48,766 --> 00:00:49,033
like the one we have in his expense tracker.
18
00:00:49,033 --> 00:00:51,133
If you use something like React
19
00:00:51,133 --> 00:00:53,766
it all of a sudden becomes much easier
20
00:00:53,766 --> 00:00:55,866
to build something like this.
21
00:00:55,866 --> 00:00:59,400
You won't have to focus on all the nitty-gritty details
22
00:00:59,400 --> 00:01:01,933
and it will be less error prone
23
00:01:01,933 --> 00:01:03,533
if you use something like React
24
00:01:03,533 --> 00:01:03,800
if you use something like React
25
00:01:03,800 --> 00:01:05,866
because you will be able to focus
26
00:01:05,866 --> 00:01:08,366
on your core business logic
27
00:01:08,366 --> 00:01:10,300
that makes up your application
28
00:01:10,300 --> 00:01:10,400
that makes up your application
29
00:01:10,400 --> 00:01:13,500
instead of having to focus on the actual steps
30
00:01:13,500 --> 00:01:17,700
of updating the page when something happens somewhere.
31
00:01:17,700 --> 00:01:20,733
That's why we use libraries like React.
32
00:01:20,733 --> 00:01:23,866
And to make that job simpler for us,
33
00:01:23,866 --> 00:01:26,766
to make that work simpler for us,
34
00:01:26,766 --> 00:01:30,666
React embraces a concept called components.
35
00:01:30,666 --> 00:01:31,133
React embraces a concept called components.
36
00:01:31,133 --> 00:01:32,333
React is
37
00:01:32,333 --> 00:01:35,300
all about components.
38
00:01:35,300 --> 00:01:40,033
But of course that brings up one important question.
39
00:01:40,033 --> 00:01:43,733
What exactly is a component?
40
00:01:43,733 --> 00:01:47,066
Well, let me come back to this question in a second.
41
00:01:47,066 --> 00:01:50,533
Instead let me come back to this first sentence here
42
00:01:50,533 --> 00:01:50,733
Instead let me come back to this first sentence here
43
00:01:50,733 --> 00:01:52,666
even though we don't fully know yet
44
00:01:52,666 --> 00:01:54,766
what components are.
45
00:01:54,766 --> 00:01:57,600
Why could React be about one
46
00:01:57,600 --> 00:02:00,666
concept in its core?
47
00:02:00,666 --> 00:02:04,066
Because all user interfaces in the end
48
00:02:04,066 --> 00:02:07,333
are made up of components.
49
00:02:07,333 --> 00:02:09,600
So what could be a component then
50
00:02:09,600 --> 00:02:11,800
if it is something which is crucial
51
00:02:11,800 --> 00:02:15,666
in all user interfaces you see?
52
00:02:15,666 --> 00:02:19,666
Well, let's have a look at this finished application
53
00:02:19,666 --> 00:02:21,466
which we're going to build through out this
54
00:02:21,466 --> 00:02:24,766
and the next course sections.
55
00:02:24,766 --> 00:02:27,700
If you have a look at this user interface
56
00:02:27,700 --> 00:02:30,200
at this web application,
57
00:02:30,200 --> 00:02:34,166
you might be able to identify a couple of building blocks
58
00:02:34,166 --> 00:02:37,133
that make up this interface.
59
00:02:37,133 --> 00:02:42,933
For example, have a look as the expense items down there.
60
00:02:42,933 --> 00:02:47,066
This in the end is the same item being repeated twice here.
61
00:02:47,066 --> 00:02:47,366
This in the end is the same item being repeated twice here.
62
00:02:47,366 --> 00:02:51,466
It's the same item, just with different data.
63
00:02:51,466 --> 00:02:56,166
The same would be true by the way here for this chart,
64
00:02:56,166 --> 00:02:59,333
the individual bars and that chart.
65
00:02:59,333 --> 00:03:00,766
That's the same item,
66
00:03:00,766 --> 00:03:04,233
just repeated with a different label
67
00:03:04,233 --> 00:03:07,833
and a different amount of filling.
68
00:03:07,833 --> 00:03:11,533
And that is exactly what components are,
69
00:03:11,533 --> 00:03:11,900
And that is exactly what components are,
70
00:03:11,900 --> 00:03:16,866
reusable building blocks in your user interface.
71
00:03:16,866 --> 00:03:22,100
Components are in the end just a combination of HTML code,
72
00:03:22,100 --> 00:03:24,400
CSS code for styling
73
00:03:24,400 --> 00:03:24,566
CSS code for styling
74
00:03:24,566 --> 00:03:28,366
and possibly JavaScript code for some logic.
75
00:03:28,366 --> 00:03:31,900
And you don't have to reuse a component
76
00:03:31,900 --> 00:03:33,166
to make it a component.
77
00:03:33,166 --> 00:03:33,366
to make it a component.
78
00:03:33,366 --> 00:03:37,166
It's just one of its traits that it is reusable.
79
00:03:37,166 --> 00:03:38,966
But on this user interface
80
00:03:38,966 --> 00:03:42,166
which you see here there would be more components
81
00:03:42,166 --> 00:03:46,366
than just these expense items and these chart bars.
82
00:03:46,366 --> 00:03:46,700
than just these expense items and these chart bars.
83
00:03:46,700 --> 00:03:50,033
The item here at the top would be a component,
84
00:03:50,033 --> 00:03:53,133
if we expanded this would then be
85
00:03:53,133 --> 00:03:56,200
more elements inside of that component.
86
00:03:56,200 --> 00:03:58,700
That filter here would be a component,
87
00:03:58,700 --> 00:03:58,733
That filter here would be a component,
88
00:03:58,733 --> 00:04:01,633
the overall chart would be a component,
89
00:04:01,633 --> 00:04:05,033
the overall list of items would be a component.
90
00:04:05,033 --> 00:04:06,400
But inside of the items
91
00:04:06,400 --> 00:04:08,066
we could say this
92
00:04:08,066 --> 00:04:09,100
date
93
00:04:09,100 --> 00:04:11,666
item here would be a separate component,
94
00:04:11,666 --> 00:04:11,866
item here would be a separate component,
95
00:04:11,866 --> 00:04:14,400
the amount here would be a component.
96
00:04:14,400 --> 00:04:15,866
We can really split it up
97
00:04:15,866 --> 00:04:19,533
in a very granular way if we want to.
98
00:04:19,533 --> 00:04:22,200
We got all these individual building blocks
99
00:04:22,200 --> 00:04:27,600
which we combine together to build a user interface.
100
00:04:27,600 --> 00:04:29,033
And in the end of course
101
00:04:29,033 --> 00:04:31,966
all user interfaces can be split up
102
00:04:31,966 --> 00:04:33,800
into components like this.
103
00:04:33,800 --> 00:04:34,000
into components like this.
104
00:04:34,000 --> 00:04:37,800
Into containers and buttons and input elements
105
00:04:37,800 --> 00:04:41,066
and product items, which are being output.
106
00:04:41,066 --> 00:04:42,833
Something like that.
107
00:04:42,833 --> 00:04:47,000
All user interfaces on all kinds of web applications
108
00:04:47,000 --> 00:04:50,633
can be split up into components like this.
109
00:04:50,633 --> 00:04:53,133
And React is all about these components.
110
00:04:53,133 --> 00:04:53,233
And React is all about these components.
111
00:04:53,233 --> 00:04:55,833
You build these individual components
112
00:04:55,833 --> 00:05:00,333
and then you tell React how to compose them together
113
00:05:00,333 --> 00:05:03,533
into a final user interface.
114
00:05:03,533 --> 00:05:07,466
And React embraces this concept of components
115
00:05:07,466 --> 00:05:10,366
because of that reusability aspect
116
00:05:10,366 --> 00:05:10,700
because of that reusability aspect
117
00:05:10,700 --> 00:05:15,400
and because it allows us to separate our concerns.
118
00:05:15,400 --> 00:05:18,166
Both concepts are important concepts
119
00:05:18,166 --> 00:05:20,266
in programming in general.
120
00:05:20,266 --> 00:05:25,500
Having reusable building blocks helps us avoid repetition,
121
00:05:25,500 --> 00:05:28,333
and in programming in general it is good
122
00:05:28,333 --> 00:05:31,100
if we don't repeat ourselves.
123
00:05:31,100 --> 00:05:33,766
Having a separation of concerns helps us
124
00:05:33,766 --> 00:05:39,033
with keeping our code base small and manageable
125
00:05:39,033 --> 00:05:41,366
instead of having one large file
126
00:05:41,366 --> 00:05:43,700
which holds all the HTML code
127
00:05:43,700 --> 00:05:45,833
and all the JavaScript logic.
128
00:05:45,833 --> 00:05:48,200
For the entire user interface
129
00:05:48,200 --> 00:05:48,533
For the entire user interface
130
00:05:48,533 --> 00:05:51,800
we have small separated units,
131
00:05:51,800 --> 00:05:54,666
these components where every component
132
00:05:54,666 --> 00:05:56,600
has one clear
133
00:05:56,600 --> 00:05:58,933
concern, one focus,
134
00:05:58,933 --> 00:05:59,033
concern, one focus,
135
00:05:59,033 --> 00:06:01,900
one specific task it focuses us on.
136
00:06:01,900 --> 00:06:06,333
And if we split that code across multiple files then
137
00:06:06,333 --> 00:06:09,200
as we are going to do it though out this course
138
00:06:09,200 --> 00:06:11,833
then we'll have small pieces of code
139
00:06:11,833 --> 00:06:15,266
which are easy to manage and maintain.
140
00:06:15,266 --> 00:06:17,766
And these of course are not concepts
141
00:06:17,766 --> 00:06:20,533
or ideas React invented.
142
00:06:20,533 --> 00:06:24,033
Instead if we take a step back from React
143
00:06:24,033 --> 00:06:27,366
and we think about programming in general,
144
00:06:27,366 --> 00:06:30,800
then of course in any programming language
145
00:06:30,800 --> 00:06:33,366
and no matter what you are building
146
00:06:33,366 --> 00:06:36,633
you tend to work with functions
147
00:06:36,633 --> 00:06:40,966
and you split your code into multiple small functions
148
00:06:40,966 --> 00:06:43,600
which then may call each other
149
00:06:43,600 --> 00:06:46,966
to outsource logic into a function,
150
00:06:46,966 --> 00:06:48,733
to separate concerns
151
00:06:48,733 --> 00:06:50,333
and to be able to execute
152
00:06:50,333 --> 00:06:54,066
the same code multiple times if you need to.
153
00:06:54,066 --> 00:06:58,400
And React just picks up that concept of functions
154
00:06:58,400 --> 00:07:01,666
and of separating code across functions
155
00:07:01,666 --> 00:07:04,200
and translates it to the
156
00:07:04,200 --> 00:07:07,000
front end web application world
157
00:07:07,000 --> 00:07:07,166
front end web application world
158
00:07:07,166 --> 00:07:10,766
where we built an entire user interface
159
00:07:10,766 --> 00:07:14,166
by splitting our code into multiple components
160
00:07:14,166 --> 00:07:17,566
which we then can mix and match as we need to.
12203
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.