Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,200 --> 00:00:05,466
Instructor: So React is all about components
2
00:00:05,466 --> 00:00:07,533
and I hope I could make it clear
3
00:00:07,533 --> 00:00:09,733
why it's all about components
4
00:00:09,733 --> 00:00:12,266
and what exactly a component is.
5
00:00:12,266 --> 00:00:14,566
So therefore the next question is,
6
00:00:14,566 --> 00:00:17,633
how exactly is a component built?
7
00:00:17,633 --> 00:00:21,333
Now we'll dive into the concrete code in just a second.
8
00:00:21,333 --> 00:00:24,500
In general, it's just important to keep in mind
9
00:00:24,500 --> 00:00:26,133
what I mentioned earlier.
10
00:00:26,133 --> 00:00:29,400
In the end user interfaces are about HTML,
11
00:00:29,400 --> 00:00:32,566
CSS and JavaScript.
12
00:00:32,566 --> 00:00:36,933
And therefor all these components are about combining HTML,
13
00:00:36,933 --> 00:00:39,566
CSS and JavaScript.
14
00:00:39,566 --> 00:00:43,266
When we work with React and we build components,
15
00:00:43,266 --> 00:00:45,600
we in the end do just that.
16
00:00:45,600 --> 00:00:45,766
we in the end do just that.
17
00:00:45,766 --> 00:00:50,633
We combine HTML, CSS and JavaScript in all these components
18
00:00:50,633 --> 00:00:50,700
We combine HTML, CSS and JavaScript in all these components
19
00:00:50,700 --> 00:00:53,900
and then we combine all of these components together
20
00:00:53,900 --> 00:00:57,000
to build the entire user interface.
21
00:00:57,000 --> 00:01:00,900
Though, I will say while CSS of course matters
22
00:01:00,900 --> 00:01:03,966
and we're going to add CSS in this course,
23
00:01:03,966 --> 00:01:07,000
it's the least important part here.
24
00:01:07,000 --> 00:01:09,266
Mostly React components
25
00:01:09,266 --> 00:01:13,966
are about combining HTML and JavaScript and then of course,
26
00:01:13,966 --> 00:01:18,300
you also can add CSS but that's not the focus of React.
27
00:01:18,300 --> 00:01:18,466
you also can add CSS but that's not the focus of React.
28
00:01:18,466 --> 00:01:20,633
Nonetheless, I will teach you of course
29
00:01:20,633 --> 00:01:25,000
how you can make sure that your components look beautiful.
30
00:01:25,000 --> 00:01:27,133
So long story short,
31
00:01:27,133 --> 00:01:30,266
React is all about components and about building
32
00:01:30,266 --> 00:01:32,933
these components which we combined together.
33
00:01:32,933 --> 00:01:35,600
React allows you to create these re-usable
34
00:01:35,600 --> 00:01:37,400
and reactive components,
35
00:01:37,400 --> 00:01:38,500
and you are going to see
36
00:01:38,500 --> 00:01:41,166
what reactive means in detail later,
37
00:01:41,166 --> 00:01:43,433
React allows you to build these re-usable
38
00:01:43,433 --> 00:01:46,833
and reactive components consisting of HTML and JavaScript
39
00:01:46,833 --> 00:01:50,466
and as I mentioned also a bit of CSS.
40
00:01:50,466 --> 00:01:52,700
Now here's the important part though.
41
00:01:52,700 --> 00:01:54,766
As you will learn throughout this course,
42
00:01:54,766 --> 00:01:59,600
React uses something which is called a declarative approach
43
00:01:59,600 --> 00:02:02,666
for building these components.
44
00:02:02,666 --> 00:02:04,700
And you will see what exactly that is,
45
00:02:04,700 --> 00:02:06,366
but it basically means that with React,
46
00:02:06,366 --> 00:02:08,366
but it basically means that with React,
47
00:02:08,366 --> 00:02:13,866
you will not tell React that a certain HTML element
48
00:02:13,866 --> 00:02:18,733
should be created and inserted in a specific place
49
00:02:18,733 --> 00:02:20,466
on the user interface as you would be doing it
50
00:02:20,466 --> 00:02:22,066
on the user interface as you would be doing it
51
00:02:22,066 --> 00:02:24,233
with Vanilla JavaScript,
52
00:02:24,233 --> 00:02:28,066
so with just JavaScript, for example.
53
00:02:28,066 --> 00:02:31,533
Instead with React and that's really important,
54
00:02:31,533 --> 00:02:36,766
you will always define the desired end state,
55
00:02:36,766 --> 00:02:41,000
the target state or possibly also different target states
56
00:02:41,000 --> 00:02:42,900
depending on different conditions
57
00:02:42,900 --> 00:02:43,033
depending on different conditions
58
00:02:43,033 --> 00:02:46,633
and it's then React's job to figure out
59
00:02:46,633 --> 00:02:52,866
which elements on the actual webpage might need to be added
60
00:02:52,866 --> 00:02:55,500
or removed or updated.
61
00:02:55,500 --> 00:02:55,566
or removed or updated.
62
00:02:55,566 --> 00:02:58,433
And you don't write these concrete DOM
63
00:02:58,433 --> 00:03:01,033
updating instructions on your own
64
00:03:01,033 --> 00:03:04,433
as you would be doing it with just JavaScript,
65
00:03:04,433 --> 00:03:04,833
as you would be doing it with just JavaScript,
66
00:03:04,833 --> 00:03:07,400
instead with React and React components,
67
00:03:07,400 --> 00:03:10,333
you just define these end states
68
00:03:10,333 --> 00:03:10,566
you just define these end states
69
00:03:10,566 --> 00:03:14,500
and under which conditions which state should be used
70
00:03:14,500 --> 00:03:18,866
and then React will do all of the rest under the hood.
71
00:03:18,866 --> 00:03:20,433
It's a bit like magic,
72
00:03:20,433 --> 00:03:22,133
it's of course not actual magic
73
00:03:22,133 --> 00:03:26,700
but it will make your life as a developer much easier.
74
00:03:26,700 --> 00:03:28,600
So you could say that in the end
75
00:03:28,600 --> 00:03:32,400
we just built our own custom HTML Elements
76
00:03:32,400 --> 00:03:36,833
and we combined them together for building a user interface.
77
00:03:36,833 --> 00:03:39,400
But that's enough of the theory for now.
78
00:03:39,400 --> 00:03:41,666
Let's now finally dive into some code
79
00:03:41,666 --> 00:03:43,833
and start building these components.
6256
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
