All language subtitles for 004 React Fragments_en

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,260 --> 00:00:04,810 So with that custom wrapper component, 2 00:00:04,810 --> 00:00:08,310 we could use a little trick to fulfill this requirement 3 00:00:08,310 --> 00:00:10,803 and not end up with div soup. 4 00:00:11,760 --> 00:00:13,530 Now, because it's so convenient 5 00:00:13,530 --> 00:00:17,760 and also so obvious in the end, at least once you saw it, 6 00:00:17,760 --> 00:00:19,280 this wrapper component 7 00:00:19,280 --> 00:00:22,470 is actually not a component we need to build on our own. 8 00:00:22,470 --> 00:00:24,580 Instead it comes with React. 9 00:00:24,580 --> 00:00:26,890 There, it's the fragment component 10 00:00:26,890 --> 00:00:29,400 which you can access on React.Fragment, 11 00:00:29,400 --> 00:00:32,220 or you just import Fragment from React. 12 00:00:32,220 --> 00:00:34,710 I will show you how to use it in a second. 13 00:00:34,710 --> 00:00:36,430 Or in some projects, 14 00:00:36,430 --> 00:00:38,450 you can also use the shortcut on the right, 15 00:00:38,450 --> 00:00:40,770 but this depends on your project set up 16 00:00:40,770 --> 00:00:44,040 because your build workflow needs to support this. 17 00:00:44,040 --> 00:00:46,860 The left syntax will always work. 18 00:00:46,860 --> 00:00:48,770 And that's the same as our wrapper. 19 00:00:48,770 --> 00:00:53,600 These two syntaxes here render empty wrappers, 20 00:00:53,600 --> 00:00:58,030 which don't render any actual HTML element to the DOM. 21 00:00:58,030 --> 00:00:59,750 It's just built into React, 22 00:00:59,750 --> 00:01:01,930 but I showed you our custom wrapper 23 00:01:01,930 --> 00:01:05,670 so that you understand what these built in wrappers do. 24 00:01:05,670 --> 00:01:07,520 So if you want to use to built in wrappers, 25 00:01:07,520 --> 00:01:09,220 let's say in the app component, 26 00:01:09,220 --> 00:01:11,800 where I said that we also had the problem, 27 00:01:11,800 --> 00:01:16,800 we can remove the div and just use these empty tags. 28 00:01:17,230 --> 00:01:19,270 Now that's not valid HTML, 29 00:01:19,270 --> 00:01:23,940 and it's also not necessarily valid JSX in all projects. 30 00:01:23,940 --> 00:01:26,910 Your project set up needs to support it. 31 00:01:26,910 --> 00:01:29,680 Now this project set up does support it, 32 00:01:29,680 --> 00:01:32,230 and if you downloaded this attached project 33 00:01:32,230 --> 00:01:33,870 which was attached earlier, 34 00:01:33,870 --> 00:01:35,960 you therefore shouldn't get any problems. 35 00:01:35,960 --> 00:01:39,340 And hence, now if you save, you see it also still works. 36 00:01:39,340 --> 00:01:40,620 Everything works. 37 00:01:40,620 --> 00:01:41,930 And if I get that modal again, 38 00:01:41,930 --> 00:01:44,840 you see now that one div which we had before, 39 00:01:44,840 --> 00:01:46,440 don't mistake it for the root div, 40 00:01:46,440 --> 00:01:49,430 there was another div before, is now also gone 41 00:01:49,430 --> 00:01:53,220 because I'm now also using this wrapper, this fragment 42 00:01:53,220 --> 00:01:56,560 as it's officially called in the app component. 43 00:01:56,560 --> 00:01:58,210 Now, if this syntax doesn't work 44 00:01:58,210 --> 00:01:59,520 or if you don't like it, 45 00:01:59,520 --> 00:02:03,007 you can always use React.Fragment like this, 46 00:02:05,920 --> 00:02:08,150 and this will then work. 47 00:02:08,150 --> 00:02:10,550 So React.Fragment opening and closing. 48 00:02:10,550 --> 00:02:12,140 This will always work. 49 00:02:12,140 --> 00:02:15,040 You just need to make sure you're importing React. 50 00:02:15,040 --> 00:02:19,420 Or you directly add Fragment as a named import here 51 00:02:19,420 --> 00:02:22,190 in these curly braces from React. 52 00:02:22,190 --> 00:02:25,030 Then you can also use it just by that name. 53 00:02:25,030 --> 00:02:26,433 So that's an alternative. 54 00:02:27,800 --> 00:02:30,060 So that of course is what we'll typically use, 55 00:02:30,060 --> 00:02:33,410 Fragment or React.Fragment or this shortcut. 56 00:02:33,410 --> 00:02:35,910 We're not typically writing our own wrappers, 57 00:02:35,910 --> 00:02:37,210 but of course it is important 58 00:02:37,210 --> 00:02:39,370 that you understand how it works under the hood, 59 00:02:39,370 --> 00:02:40,970 which is why I showed it to you. 4599

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