All language subtitles for 002 What is React.js__en

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
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
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian Download
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:02,485 --> 00:00:04,810 [Maximilian Schwarzm�ller] So what is React 2 00:00:04,810 --> 00:00:08,230 or React.js as it's actually called? 3 00:00:08,230 --> 00:00:10,620 And why would we use it? 4 00:00:10,620 --> 00:00:14,740 Well, to answer that first question, what it is, 5 00:00:14,740 --> 00:00:18,520 we can of course visit reactjs.org, 6 00:00:18,520 --> 00:00:21,260 the official React.js webpage. 7 00:00:21,260 --> 00:00:25,880 And there we learn that React is a JavaScript library 8 00:00:25,880 --> 00:00:28,560 for building user interfaces. 9 00:00:28,560 --> 00:00:30,560 That's a nice sentence. 10 00:00:30,560 --> 00:00:33,490 But what exactly does that mean? 11 00:00:33,490 --> 00:00:36,810 Consider an example like Netflix Service, 12 00:00:36,810 --> 00:00:39,950 Netflix website and application. 13 00:00:39,950 --> 00:00:42,850 This application is highly interactive 14 00:00:42,850 --> 00:00:47,070 and runs pretty smoothly when we work with it. 15 00:00:47,070 --> 00:00:49,100 It's easy to use 16 00:00:49,100 --> 00:00:52,330 and we don't have to wait for anything to load, 17 00:00:52,330 --> 00:00:54,410 we have nice transitions. 18 00:00:54,410 --> 00:00:57,190 If we go to the My List page 19 00:00:57,190 --> 00:01:00,670 that transition happens pretty much instantly. 20 00:01:00,670 --> 00:01:04,019 We don't seem to wait for a new page to load here, 21 00:01:04,019 --> 00:01:05,980 and that's all pretty nice. 22 00:01:05,980 --> 00:01:08,530 And here I'm using Netflix in my browser. 23 00:01:08,530 --> 00:01:11,200 So this is a website here. 24 00:01:11,200 --> 00:01:14,240 Now, when we use a service like Netflix, 25 00:01:14,240 --> 00:01:17,430 it might almost feel a bit like a mobile app, 26 00:01:17,430 --> 00:01:20,120 even though I am using the website here. 27 00:01:20,120 --> 00:01:23,190 Because mobile apps give us this 28 00:01:23,190 --> 00:01:27,280 great highly reactive user experience. 29 00:01:27,280 --> 00:01:32,140 From mobile apps where use that we have smooth transition 30 00:01:32,140 --> 00:01:34,030 that it's fun to use that app 31 00:01:34,030 --> 00:01:36,380 and that things happen instantly. 32 00:01:36,380 --> 00:01:38,810 And at least traditionally, 33 00:01:38,810 --> 00:01:42,370 websites didn't always feel like this. 34 00:01:42,370 --> 00:01:45,770 Traditionally in websites, when we, for example, 35 00:01:45,770 --> 00:01:47,830 clicked a link or a button, 36 00:01:47,830 --> 00:01:50,910 our request was sent to a server 37 00:01:50,910 --> 00:01:55,670 and a new HTML page was sent back to the browser 38 00:01:55,670 --> 00:01:58,150 where it then could be displayed. 39 00:01:58,150 --> 00:02:01,790 And therefore, traditionally, websites could feel 40 00:02:01,790 --> 00:02:03,010 a bit clunky, 41 00:02:03,010 --> 00:02:06,410 we might have that latency where we wait 42 00:02:06,410 --> 00:02:10,393 for this new HTML page to load and so on. 43 00:02:11,850 --> 00:02:15,670 And it's this request and response cycle, 44 00:02:15,670 --> 00:02:19,240 which we can break up with JavaScript. 45 00:02:19,240 --> 00:02:22,010 So at this point we don't even need React, 46 00:02:22,010 --> 00:02:25,460 it's just a JavaScript which can help us here. 47 00:02:25,460 --> 00:02:28,560 Because JavaScript is a programming language 48 00:02:28,560 --> 00:02:33,420 that allows us as a developer to run logic in the browser. 49 00:02:33,420 --> 00:02:36,290 And the great thing about that logic in the browser 50 00:02:36,290 --> 00:02:41,290 is that it can do things that manipulate what the user sees. 51 00:02:41,460 --> 00:02:44,930 JavaScript in the browser is able to manipulate 52 00:02:44,930 --> 00:02:48,830 to so-called Dom, the HTML elements 53 00:02:48,830 --> 00:02:51,360 that are rendered onto the screen. 54 00:02:51,360 --> 00:02:54,600 We can manipulate this with JavaScript. 55 00:02:54,600 --> 00:02:58,440 And that allows us to change what the users sees 56 00:02:58,440 --> 00:03:01,730 without fetching a new HTML page. 57 00:03:01,730 --> 00:03:05,870 We don't need to request a new HTML page 58 00:03:05,870 --> 00:03:09,960 just to present something different to the user. 59 00:03:09,960 --> 00:03:12,510 So that's why JavaScript can help us. 60 00:03:12,510 --> 00:03:15,120 And since React is a JavaScript library, 61 00:03:15,120 --> 00:03:17,650 it looks like it can also help us with that. 62 00:03:17,650 --> 00:03:20,360 It might be an extra building block, 63 00:03:20,360 --> 00:03:24,980 and indeed, React.js is a client-side JavaScript library. 64 00:03:24,980 --> 00:03:29,160 It helps us with writing that client-side JavaScript code 65 00:03:29,160 --> 00:03:34,160 and it's all about building modern reactive user interfaces 66 00:03:34,270 --> 00:03:36,120 for websites. 67 00:03:36,120 --> 00:03:38,450 And in this course, you're going to learn 68 00:03:38,450 --> 00:03:42,370 about all the different features and tools React.js has 69 00:03:42,370 --> 00:03:45,400 and gives you that make building complex 70 00:03:45,400 --> 00:03:47,283 user interfaces easy. 71 00:03:48,150 --> 00:03:52,310 But one question remains, why do we need React? 72 00:03:52,310 --> 00:03:56,870 Because at this point we know that JavaScript is helpful, 73 00:03:56,870 --> 00:03:59,460 and I hope I could explain why it is. 74 00:03:59,460 --> 00:04:02,250 But how can React specifically help us, 75 00:04:02,250 --> 00:04:07,060 why might we want React in addition to JavaScript? 76 00:04:07,060 --> 00:04:08,880 For this, I built a simple, 77 00:04:08,880 --> 00:04:11,100 a very simple demo here. 78 00:04:11,100 --> 00:04:14,790 A simple website which has some interactivity, 79 00:04:14,790 --> 00:04:16,769 as you will see in the next lecture. 80 00:04:16,769 --> 00:04:18,959 And in the next lecture, I will show you 81 00:04:18,959 --> 00:04:21,180 how we can build this website 82 00:04:21,180 --> 00:04:25,210 and the interactivity it has with just JavaScript, 83 00:04:25,210 --> 00:04:28,500 and how to code what's then look like with React 84 00:04:28,500 --> 00:04:30,160 in addition to JavaScript. 85 00:04:30,160 --> 00:04:32,530 And that will then make it clear 86 00:04:32,530 --> 00:04:35,513 why using React could be a good idea. 6702

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