1
00:00:02,000 --> 00:00:04,000
Now to get started, let's start by diving

2
00:00:04,000 --> 00:00:07,000
into the most important question first.

3
00:00:07,000 --> 00:00:11,000
What exactly is React.js?

4
00:00:11,000 --> 00:00:13,000
Well, the official website tells us,

5
00:00:13,000 --> 00:00:18,000
React is a JavaScript library for building user interfaces.

6
00:00:19,000 --> 00:00:22,000
And that's a nice sentence, but what exactly does it mean?

7
00:00:22,000 --> 00:00:25,000
Well, obviously it's a JavaScript library

8
00:00:25,000 --> 00:00:27,000
so we will write JavaScript code.

9
00:00:27,000 --> 00:00:32,000
We use React in conjunction with our own JavaScript code,

10
00:00:32,000 --> 00:00:33,000
but it is a library that's there

11
00:00:33,000 --> 00:00:36,000
to help us build user interfaces.

12
00:00:36,000 --> 00:00:39,000
And I might add that it's there to help us build

13
00:00:39,000 --> 00:00:42,000
highly interactive user interfaces.

14
00:00:42,000 --> 00:00:44,000
You don't necessarily need React

15
00:00:44,000 --> 00:00:46,000
if you build a simple webpage

16
00:00:46,000 --> 00:00:49,000
on which not a lot of things are happening.

17
00:00:49,000 --> 00:00:52,000
But if you're building a more interactive website

18
00:00:52,000 --> 00:00:55,000
like the demo project we're about to build,

19
00:00:55,000 --> 00:00:58,000
then React.js can be a huge help

20
00:00:58,000 --> 00:01:02,000
vastly simplifying the code you have to write.

21
00:01:02,000 --> 00:01:03,000
And to show you what I mean,

22
00:01:03,000 --> 00:01:07,000
consider this very simple example here.

23
00:01:07,000 --> 00:01:10,000
I get this user card where I have this Contact button.

24
00:01:10,000 --> 00:01:14,000
And if I click this button, this modal overlay opens up

25
00:01:14,000 --> 00:01:18,000
and there I can enter some address and submit it.

26
00:01:18,000 --> 00:01:19,000
Now, this is not super fancy,

27
00:01:19,000 --> 00:01:23,000
but we have a website with some interaction on it.

28
00:01:23,000 --> 00:01:26,000
We have a website where I can open this modal

29
00:01:26,000 --> 00:01:29,000
and enter data and submit it.

30
00:01:29,000 --> 00:01:30,000
Now on this demo website,

31
00:01:30,000 --> 00:01:33,000
nothing's happening to that submitted data.

32
00:01:33,000 --> 00:01:35,000
But we do have a website that does support

33
00:01:35,000 --> 00:01:39,000
some user interaction that must be interactive

34
00:01:39,000 --> 00:01:43,000
and reactive because we must React to button clicks

35
00:01:43,000 --> 00:01:44,000
and openness overlay.

36
00:01:44,000 --> 00:01:48,000
And even though that's a pretty simple example

37
00:01:48,000 --> 00:01:50,000
and a simple website here.

38
00:01:50,000 --> 00:01:51,000
The JavaScript code,

39
00:01:51,000 --> 00:01:55,000
we could write to make this website work this way

40
00:01:55,000 --> 00:01:57,000
and to make the website behave that way

41
00:01:57,000 --> 00:02:02,000
when not using React.js could look like this.

42
00:02:03,000 --> 00:02:05,000
And whilst this is of course not too much code,

43
00:02:05,000 --> 00:02:10,000
it's quite a bit of code for this simple interaction.

44
00:02:10,000 --> 00:02:13,000
And it's probably easy to imagine

45
00:02:13,000 --> 00:02:15,000
that if we had a more complex website

46
00:02:15,000 --> 00:02:18,000
with more user interactions on it,

47
00:02:18,000 --> 00:02:21,000
we would need to write a lot more code.

48
00:02:21,000 --> 00:02:24,000
And of course, therefore we would introduce

49
00:02:24,000 --> 00:02:28,000
more potential error sources.

50
00:02:28,000 --> 00:02:33,000
Now, when building the exact same application with React.js,

51
00:02:34,000 --> 00:02:39,000
the code suddenly looks like this combined with this.

52
00:02:40,000 --> 00:02:43,000
And whilst this is still some code,

53
00:02:43,000 --> 00:02:47,000
it's a bit more readable and easier to manage.

54
00:02:47,000 --> 00:02:49,000
And as soon as you know React,

55
00:02:49,000 --> 00:02:52,000
which you will do by the end of the video,

56
00:02:52,000 --> 00:02:56,000
it's also much easier to read as you will see.

57
00:02:56,000 --> 00:02:59,000
Because even though you don't know React yet,

58
00:02:59,000 --> 00:03:01,000
you can clearly see

59
00:03:01,000 --> 00:03:04,000
that we seem to be writing some JavaScript code

60
00:03:04,000 --> 00:03:06,000
where we have some HTML code

61
00:03:06,000 --> 00:03:09,000
blended into that JavaScript code.

62
00:03:09,000 --> 00:03:13,000
And we then have clear instructions like setShowModal

63
00:03:13,000 --> 00:03:15,000
which seems to do something

64
00:03:15,000 --> 00:03:18,000
which then leads to that Modal being shown conditionally.

65
00:03:18,000 --> 00:03:21,000
And again, I will teach you all that code

66
00:03:21,000 --> 00:03:25,000
and React syntax and all these React features

67
00:03:25,000 --> 00:03:27,000
step by step throughout this video.

68
00:03:27,000 --> 00:03:29,000
You don't need to understand them yet,

69
00:03:29,000 --> 00:03:31,000
but you can probably see

70
00:03:31,000 --> 00:03:34,000
that we have some clear instructions here,

71
00:03:34,000 --> 00:03:36,000
and some clean code, and most importantly,

72
00:03:36,000 --> 00:03:40,000
some HTML code blended into the JavaScript code

73
00:03:40,000 --> 00:03:44,000
which is a feature that's supported by React

74
00:03:44,000 --> 00:03:47,000
and by the React projects we'll be working in,

75
00:03:47,000 --> 00:03:50,000
as you will also learn in this video.

76
00:03:50,000 --> 00:03:53,000
In case of the raw Vanilla JavaScript code,

77
00:03:53,000 --> 00:03:56,000
we just had step by step instructions

78
00:03:56,000 --> 00:04:00,000
where we tell the browser step by step

79
00:04:00,000 --> 00:04:01,000
what should happen on the screen,

80
00:04:01,000 --> 00:04:04,000
that we want to add an event listener,

81
00:04:04,000 --> 00:04:08,000
that we wanna create a new HTML element,

82
00:04:08,000 --> 00:04:09,000
how it should be configured,

83
00:04:09,000 --> 00:04:12,000
where it should be added, and much more.

84
00:04:12,000 --> 00:04:14,000
We have step by step instructions.

85
00:04:14,000 --> 00:04:17,000
And indeed we call this approach of writing code

86
00:04:17,000 --> 00:04:20,000
the imperative approach

87
00:04:20,000 --> 00:04:22,000
where we have step by step instructions

88
00:04:22,000 --> 00:04:27,000
simply describing step by step what the browser should do.

89
00:04:27,000 --> 00:04:30,000
On the other hand, when using React.js,

90
00:04:30,000 --> 00:04:32,000
a major benefit of doing so is

91
00:04:32,000 --> 00:04:35,000
that we're able to write declarative code

92
00:04:35,000 --> 00:04:37,000
where we write the code for the UI

93
00:04:37,000 --> 00:04:39,000
that should be output on the screen,

94
00:04:39,000 --> 00:04:42,000
and we blend some syntax like event listeners

95
00:04:42,000 --> 00:04:46,000
or dynamic values into that HTML code,

96
00:04:46,000 --> 00:04:49,000
and combine it with extra React features

97
00:04:49,000 --> 00:04:52,000
where we can, for example, define different states

98
00:04:52,000 --> 00:04:55,000
and under which circumstances these different states

99
00:04:55,000 --> 00:04:56,000
should be active.

100
00:04:56,000 --> 00:05:00,000
And React.js will then generate the appropriate instructions

101
00:05:00,000 --> 00:05:03,000
for the browser under the hood

102
00:05:03,000 --> 00:05:04,000
so that as a developer,

103
00:05:04,000 --> 00:05:08,000
we don't have to write these step by step instructions.

104
00:05:08,000 --> 00:05:11,000
And that is indeed one of the major benefits

105
00:05:11,000 --> 00:05:14,000
highlighted on the React.js website as well,

106
00:05:14,000 --> 00:05:17,000
the fact that you write the declarative code

107
00:05:17,000 --> 00:05:19,000
when working with React.

108
00:05:20,000 --> 00:05:22,000
Now again, this is just a simple example

109
00:05:22,000 --> 00:05:24,000
with a lot of code we don't know yet,

110
00:05:24,000 --> 00:05:28,000
but that's one of the major advantages of using React.

111
00:05:28,000 --> 00:05:31,000
We often can write much simpler code

112
00:05:31,000 --> 00:05:33,000
and therefore actually build

113
00:05:33,000 --> 00:05:35,000
way more powerful user interfaces.