1
00:00:02,000 --> 00:00:03,000
So, let's dive right

2
00:00:03,000 --> 00:00:06,000
into this video and this topic by answering

3
00:00:06,000 --> 00:00:08,000
the most important question first.

4
00:00:08,000 --> 00:00:13,000
What exactly is React.js and why would we use it?

5
00:00:13,000 --> 00:00:15,000
Why do we need it?

6
00:00:15,000 --> 00:00:18,000
What's the problem it helps us solve?

7
00:00:18,000 --> 00:00:23,000
Regarding the what, we can, of course, visit reactjs.org,

8
00:00:23,000 --> 00:00:26,000
the official webpage of React.js.

9
00:00:26,000 --> 00:00:30,000
And there, we learn that React is a JavaScript library

10
00:00:30,000 --> 00:00:35,000
and it's a JavaScript library for building user interfaces.

11
00:00:35,000 --> 00:00:37,000
Now, that's quite straightforward.

12
00:00:37,000 --> 00:00:40,000
It's a library for the JavaScript programming language

13
00:00:40,000 --> 00:00:43,000
that helps us build user interfaces.

14
00:00:43,000 --> 00:00:46,000
But what exactly does this nice sentence mean?

15
00:00:47,000 --> 00:00:50,000
React.js is a library and, to be precise,

16
00:00:50,000 --> 00:00:52,000
it's a client-side library.

17
00:00:52,000 --> 00:00:55,000
It's about client-side JavaScript.

18
00:00:55,000 --> 00:00:57,000
So, the JavaScript code, which runs

19
00:00:57,000 --> 00:01:00,000
in the browsers of your visitors.

20
00:01:00,000 --> 00:01:04,000
And that is important because we use JavaScript

21
00:01:04,000 --> 00:01:08,000
in the browser to manipulate web pages

22
00:01:08,000 --> 00:01:11,000
after they were loaded, and that allows us

23
00:01:11,000 --> 00:01:14,000
to build rich, highly interactive,

24
00:01:14,000 --> 00:01:18,000
modern user interfaces for our websites.

25
00:01:18,000 --> 00:01:21,000
Take something like Netflix, for example,

26
00:01:21,000 --> 00:01:24,000
which is actually built with React.

27
00:01:24,000 --> 00:01:28,000
There, we can browse around, we can hover over one

28
00:01:28,000 --> 00:01:33,000
of the movies or series, and we get more details there.

29
00:01:33,000 --> 00:01:36,000
We can add it to our list, and we can go to that list page

30
00:01:36,000 --> 00:01:40,000
and everything here happens very smoothly,

31
00:01:40,000 --> 00:01:42,000
and also quickly.

32
00:01:42,000 --> 00:01:47,000
We never need to click anywhere, and load a new HTML page.

33
00:01:48,000 --> 00:01:53,000
That refresh icon, in the top left corner, never spins

34
00:01:53,000 --> 00:01:56,000
Because we never request a new HTML page,

35
00:01:56,000 --> 00:02:00,000
we never have to wait for a new HTML page

36
00:02:00,000 --> 00:02:03,000
to be generated by the server.

37
00:02:03,000 --> 00:02:07,000
And that happens because JavaScript is doing some work here

38
00:02:07,000 --> 00:02:10,000
and it's updating what we see on the screen,

39
00:02:10,000 --> 00:02:14,000
the dom, whilst we are working on that page.

40
00:02:14,000 --> 00:02:18,000
And that gives us that nice user experience,

41
00:02:18,000 --> 00:02:23,000
that nice UI, which we know from mobile apps, for example.

42
00:02:23,000 --> 00:02:25,000
When we work with a mobile app,

43
00:02:25,000 --> 00:02:29,000
we're used to things being very reactive.

44
00:02:29,000 --> 00:02:31,000
There, we can work with the app and switch

45
00:02:31,000 --> 00:02:36,000
between different screens without having that latency,

46
00:02:36,000 --> 00:02:38,000
which we know from some websites,

47
00:02:38,000 --> 00:02:42,000
without requesting new HTML pages behind the scenes.

48
00:02:42,000 --> 00:02:46,000
So, mobile apps therefore feel very reactive,

49
00:02:46,000 --> 00:02:49,000
things happen instantly, we don't need to wait

50
00:02:49,000 --> 00:02:53,000
for new pages to load, or for actions to start.

51
00:02:53,000 --> 00:02:57,000
And, traditionally, in web apps that was different.

52
00:02:57,000 --> 00:03:00,000
There, we often had to click a button

53
00:03:00,000 --> 00:03:04,000
and then wait for a new page to be loaded and to show up.

54
00:03:04,000 --> 00:03:08,000
And whilst that, of course, also does work

55
00:03:08,000 --> 00:03:12,000
it is not the same user experience our users know

56
00:03:12,000 --> 00:03:15,000
from their mobile apps, and it's often not

57
00:03:15,000 --> 00:03:18,000
the user experience we want to deliver therefore.

58
00:03:18,000 --> 00:03:21,000
Now, that's a problem we can solve with JavaScript,

59
00:03:21,000 --> 00:03:24,000
JavaScript in the browser, because that allows us

60
00:03:24,000 --> 00:03:28,000
to manipulate the dom and therefore what the user sees

61
00:03:28,000 --> 00:03:32,000
without requesting a new HTML page and waiting for it.

62
00:03:32,000 --> 00:03:36,000
And therefore, just JavaScript would be enough.

63
00:03:36,000 --> 00:03:38,000
But let me give you an example

64
00:03:38,000 --> 00:03:41,000
of just JavaScript and why we might want

65
00:03:41,000 --> 00:03:45,000
to use something like React instead of just JavaScript.