All language subtitles for 003 React Code Is Written In A Declarative Way!_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.