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.