All language subtitles for 001 Module Introduction_en24

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
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 Download
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,070 --> 00:00:04,400 In this course section, 2 00:00:04,400 --> 00:00:06,939 we are going to dive into animating 3 00:00:06,939 --> 00:00:09,260 react apps and components. 4 00:00:09,260 --> 00:00:13,790 We are going to learn how to move from static styles 5 00:00:13,790 --> 00:00:17,290 and components to animate it thousand components 6 00:00:17,290 --> 00:00:22,010 with smooth transitions and simply animations that look good 7 00:00:22,010 --> 00:00:24,743 and lead to a better user experience. 8 00:00:25,699 --> 00:00:28,960 For this we're going to explore CSS, transitions, 9 00:00:28,960 --> 00:00:30,030 and animations 10 00:00:30,030 --> 00:00:32,890 and we'll see when those are enough 11 00:00:32,890 --> 00:00:36,270 and why they sometimes are not enough. 12 00:00:36,270 --> 00:00:38,720 Why just CSS, animations 13 00:00:38,720 --> 00:00:41,140 sometimes don't do the trick. 14 00:00:41,140 --> 00:00:44,090 And then therefore, we're also going to dive 15 00:00:44,090 --> 00:00:46,870 into some third party libraries 16 00:00:46,870 --> 00:00:49,908 which we can use one specific third party library 17 00:00:49,908 --> 00:00:52,630 to be precise that helps us 18 00:00:52,630 --> 00:00:56,850 with providing animations to react components. 19 00:00:56,850 --> 00:01:00,070 That's what we're going to do in this course module. 20 00:01:00,070 --> 00:01:02,570 Now for this course module 21 00:01:02,570 --> 00:01:07,220 I prepared a demo project and this demo project 22 00:01:07,220 --> 00:01:10,740 actually uses class-based components instead 23 00:01:10,740 --> 00:01:13,920 of functional components and hooks simply 24 00:01:13,920 --> 00:01:17,100 because I created this project here already 25 00:01:17,100 --> 00:01:19,640 for the older version of this course 26 00:01:19,640 --> 00:01:22,600 which used class-based components only 27 00:01:22,600 --> 00:01:24,490 but it should be fairly easy to get 28 00:01:24,490 --> 00:01:26,360 into this project as well. 29 00:01:26,360 --> 00:01:29,280 And definitely check out the course section 30 00:01:29,280 --> 00:01:31,973 in this course on class-based components. 31 00:01:31,973 --> 00:01:34,630 If you're struggling to understand 32 00:01:34,630 --> 00:01:36,990 this attached to demo project. 33 00:01:36,990 --> 00:01:40,240 In the end, it is a regular react project though 34 00:01:40,240 --> 00:01:42,590 with some react components. 35 00:01:42,590 --> 00:01:44,710 And specifically in this project 36 00:01:44,710 --> 00:01:46,960 we got three react components 37 00:01:46,960 --> 00:01:49,520 a backdrop, a list and a modal component. 38 00:01:49,520 --> 00:01:53,070 And if we install all the dependencies in this project 39 00:01:53,070 --> 00:01:57,990 with NPM install and we then start the development server 40 00:01:57,990 --> 00:02:00,160 then we see a site 41 00:02:00,160 --> 00:02:04,376 a website where we always have to modal overlay. 42 00:02:04,376 --> 00:02:08,610 And if we then go back to our code and the app component 43 00:02:08,610 --> 00:02:11,810 and comment out this modal and backdrop 44 00:02:11,810 --> 00:02:14,350 and we then save this and then go back 45 00:02:14,350 --> 00:02:18,880 to our site, then we see this demo application 46 00:02:18,880 --> 00:02:23,820 where we got a list where we can add list items like this. 47 00:02:23,820 --> 00:02:27,090 And you see the code that runs behind the scenes 48 00:02:27,090 --> 00:02:30,420 for adding the list items in the list component. 49 00:02:30,420 --> 00:02:34,880 And throughout this course section, we now want to make sure 50 00:02:34,880 --> 00:02:38,490 that we animate both the modal, the appearance 51 00:02:38,490 --> 00:02:43,490 and disappearance of the modal, and also the list here. 52 00:02:43,570 --> 00:02:46,890 And for this we're actually, first of all, going to start 53 00:02:46,890 --> 00:02:50,172 with a non animation topic, we want to make sure 54 00:02:50,172 --> 00:02:54,243 that this modal is showing up conditionally. 55 00:02:55,190 --> 00:02:56,593 So let's start with that. 4361

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.