Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,220 --> 00:00:05,160
So React is all about components
2
00:00:05,160 --> 00:00:07,210
and I hope I could make it clear
3
00:00:07,210 --> 00:00:09,430
why it's all about components
4
00:00:09,430 --> 00:00:11,960
and what exactly a component is.
5
00:00:11,960 --> 00:00:14,240
So therefore the next question is,
6
00:00:14,240 --> 00:00:17,330
how exactly is a component built?
7
00:00:17,330 --> 00:00:21,030
Now we'll dive into the concrete code in just a second.
8
00:00:21,030 --> 00:00:24,180
In general, it's just important to keep in mind
9
00:00:24,180 --> 00:00:25,800
what I mentioned earlier.
10
00:00:25,800 --> 00:00:29,070
In the end user interfaces are about HTML,
11
00:00:29,070 --> 00:00:31,700
CSS and JavaScript.
12
00:00:31,700 --> 00:00:36,080
And therefor all these components are about combining HTML,
13
00:00:36,080 --> 00:00:38,700
CSS and JavaScript.
14
00:00:38,700 --> 00:00:42,420
When we work with React and we build components,
15
00:00:42,420 --> 00:00:44,750
we in the end do just that.
16
00:00:44,750 --> 00:00:49,650
We combine HTML, CSS and JavaScript in all these components
17
00:00:49,650 --> 00:00:52,850
and then we combine all of these components together
18
00:00:52,850 --> 00:00:55,940
to build the entire user interface.
19
00:00:55,940 --> 00:00:59,840
Though, I will say while CSS of course matters
20
00:00:59,840 --> 00:01:02,930
and we're going to add CSS in this course,
21
00:01:02,930 --> 00:01:05,950
it's the least important part here.
22
00:01:05,950 --> 00:01:08,230
Mostly React components
23
00:01:08,230 --> 00:01:12,910
are about combining HTML and JavaScript and then of course,
24
00:01:12,910 --> 00:01:17,250
you also can add CSS but that's not the focus of React.
25
00:01:17,250 --> 00:01:19,430
Nonetheless, I will teach you of course
26
00:01:19,430 --> 00:01:23,790
how you can make sure that your components look beautiful.
27
00:01:23,790 --> 00:01:25,900
So long story short,
28
00:01:25,900 --> 00:01:29,040
React is all about components and about building
29
00:01:29,040 --> 00:01:31,710
these components which we combined together.
30
00:01:31,710 --> 00:01:34,370
React allows you to create these re-usable
31
00:01:34,370 --> 00:01:36,170
and reactive components,
32
00:01:36,170 --> 00:01:37,270
and you are going to see
33
00:01:37,270 --> 00:01:39,950
what reactive means in detail later,
34
00:01:39,950 --> 00:01:42,210
React allows you to build these re-usable
35
00:01:42,210 --> 00:01:45,610
and reactive components consisting of HTML and JavaScript
36
00:01:45,610 --> 00:01:48,710
and as I mentioned also a bit of CSS.
37
00:01:48,710 --> 00:01:50,950
Now here's the important part though.
38
00:01:50,950 --> 00:01:53,000
As you will learn throughout this course,
39
00:01:53,000 --> 00:01:57,850
React uses something which is called a declarative approach
40
00:01:57,850 --> 00:02:00,380
for building these components.
41
00:02:00,380 --> 00:02:02,420
And you will see what exactly that is,
42
00:02:02,420 --> 00:02:06,010
but it basically means that with React,
43
00:02:06,010 --> 00:02:11,009
you will not tell React that a certain HTML element
44
00:02:11,510 --> 00:02:16,370
should be created and inserted in a specific place
45
00:02:16,370 --> 00:02:19,570
on the user interface as you would be doing it
46
00:02:19,570 --> 00:02:21,750
with Vanilla JavaScript,
47
00:02:21,750 --> 00:02:25,570
so with just JavaScript, for example.
48
00:02:25,570 --> 00:02:29,060
Instead with React and that's really important,
49
00:02:29,060 --> 00:02:33,850
you will always define the desired end state,
50
00:02:33,850 --> 00:02:38,080
the target state or possibly also different target states
51
00:02:38,080 --> 00:02:40,010
depending on different conditions
52
00:02:40,010 --> 00:02:43,610
and it's then React's job to figure out
53
00:02:43,610 --> 00:02:48,610
which elements on the actual webpage might need to be added
54
00:02:49,840 --> 00:02:52,400
or removed or updated.
55
00:02:52,400 --> 00:02:55,290
And you don't write these concrete DOM
56
00:02:55,290 --> 00:02:57,880
updating instructions on your own
57
00:02:57,880 --> 00:03:01,580
as you would be doing it with just JavaScript,
58
00:03:01,580 --> 00:03:04,140
instead with React and React components,
59
00:03:04,140 --> 00:03:07,220
you just define these end states
60
00:03:07,220 --> 00:03:11,150
and under which conditions which state should be used
61
00:03:11,150 --> 00:03:15,090
and then React will do all of the rest under the hood.
62
00:03:15,090 --> 00:03:16,640
It's a bit like magic,
63
00:03:16,640 --> 00:03:18,340
it's of course not actual magic
64
00:03:18,340 --> 00:03:22,900
but it will make your life as a developer much easier.
65
00:03:22,900 --> 00:03:24,810
So you could say that in the end
66
00:03:24,810 --> 00:03:28,600
we just built our own custom HTML Elements
67
00:03:28,600 --> 00:03:33,040
and we combined them together for building a user interface.
68
00:03:33,040 --> 00:03:35,600
But that's enough of the theory for now.
69
00:03:35,600 --> 00:03:37,890
Let's now finally dive into some code
70
00:03:37,890 --> 00:03:40,053
and start building these components.
5534
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Arabic
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