1
00:00:01,000 --> 00:00:04,000
So let's get started with, React

2
00:00:04,000 --> 00:00:06,000
and let's dive into that react code,

3
00:00:06,000 --> 00:00:08,000
and learn how to work with react,

4
00:00:08,000 --> 00:00:11,000
and how to write react code.

5
00:00:11,000 --> 00:00:13,000
Now in the project I showed you before,

6
00:00:13,000 --> 00:00:15,000
you might've noticed that,

7
00:00:15,000 --> 00:00:17,000
I had a couple of files here,

8
00:00:17,000 --> 00:00:18,000
in this react project,

9
00:00:18,000 --> 00:00:22,000
and these files are actually Java script files,

10
00:00:22,000 --> 00:00:27,000
but in those files, I then use HTML code.

11
00:00:27,000 --> 00:00:31,000
And that is not something you can normally do.

12
00:00:31,000 --> 00:00:35,000
Normally, you can't add HTML in Java script.

13
00:00:35,000 --> 00:00:36,000
At least not like this.

14
00:00:36,000 --> 00:00:38,000
You can add it as part of a string,

15
00:00:38,000 --> 00:00:40,000
or have a template literal,

16
00:00:40,000 --> 00:00:42,000
but not just like that.

17
00:00:42,000 --> 00:00:45,000
That's not syntax that would work out of the box.

18
00:00:49,000 --> 00:00:52,000
And indeed it wouldn't work, just like this.

19
00:00:52,000 --> 00:00:55,000
That's why for working with react,

20
00:00:55,000 --> 00:00:57,000
we set up a project,

21
00:00:57,000 --> 00:00:59,000
that's a little bit more complex,

22
00:00:59,000 --> 00:01:02,000
than a vanilla Java script project.

23
00:01:02,000 --> 00:01:04,000
In the standard Java script project,

24
00:01:04,000 --> 00:01:08,000
I just have a HTML CSS and a JavaScript file,

25
00:01:08,000 --> 00:01:10,000
and in the HTML file,

26
00:01:10,000 --> 00:01:13,000
I simply import those external files,

27
00:01:13,000 --> 00:01:15,000
and then they do their thing.

28
00:01:15,000 --> 00:01:17,000
Because that is all just,

29
00:01:17,000 --> 00:01:20,000
standard modern Java script.

30
00:01:20,000 --> 00:01:25,000
With react, to write react code in a convenient way,

31
00:01:25,000 --> 00:01:28,000
We can't just set up a project like this,

32
00:01:28,000 --> 00:01:33,000
because we want to use this HTML in JavaScript syntax,

33
00:01:33,000 --> 00:01:36,000
and the browser would not understand,

34
00:01:36,000 --> 00:01:39,000
this syntax out of the box.

35
00:01:39,000 --> 00:01:42,000
That's why our react project is a bit more complex,

36
00:01:42,000 --> 00:01:44,000
and involve some more files,

37
00:01:44,000 --> 00:01:47,000
because it involves a so-called built step,

38
00:01:47,000 --> 00:01:49,000
which means to code we write,

39
00:01:49,000 --> 00:01:52,000
will not be the code that ends up in the browser.

40
00:01:52,000 --> 00:01:56,000
We simply write code in a very convenient way,

41
00:01:56,000 --> 00:01:58,000
for us as a developer,

42
00:01:58,000 --> 00:02:00,000
and then behind the scenes,

43
00:02:00,000 --> 00:02:02,000
that code will be transformed,

44
00:02:02,000 --> 00:02:04,000
before it reaches the browser.

45
00:02:04,000 --> 00:02:06,000
And in addition to that build step,

46
00:02:06,000 --> 00:02:09,000
with a modern react project,

47
00:02:09,000 --> 00:02:12,000
we typically also want a development server,

48
00:02:12,000 --> 00:02:17,000
which hosts our running react application locally

49
00:02:17,000 --> 00:02:18,000
on our machine.

50
00:02:18,000 --> 00:02:19,000
And which for example,

51
00:02:19,000 --> 00:02:21,000
updates the page in the browser,

52
00:02:21,000 --> 00:02:24,000
whenever we make changes to our code.

53
00:02:24,000 --> 00:02:26,000
So that we don't have to reload

54
00:02:26,000 --> 00:02:28,000
that page manually all the time.

55
00:02:28,000 --> 00:02:31,000
And because that's the kind of setup we need,

56
00:02:31,000 --> 00:02:32,000
we don't just create a couple

57
00:02:32,000 --> 00:02:35,000
of HTML and JavaScript files.

58
00:02:35,000 --> 00:02:38,000
Instead, we typically create a react project,

59
00:02:38,000 --> 00:02:41,000
with an extra tool that gives us all that,

60
00:02:41,000 --> 00:02:43,000
behind the scenes magic,

61
00:02:43,000 --> 00:02:47,000
added to the project automatically.

62
00:02:47,000 --> 00:02:50,000
And the most popular tool for that,

63
00:02:50,000 --> 00:02:52,000
would be Create React App.

64
00:02:52,000 --> 00:02:54,000
You can simply Google

65
00:02:54,000 --> 00:02:56,000
for a create dash react dash app,

66
00:02:56,000 --> 00:03:00,000
and you either find this entry on the official docs

67
00:03:00,000 --> 00:03:02,000
or disk git hub repository.

68
00:03:02,000 --> 00:03:04,000
In the end, you can use either of the two,

69
00:03:04,000 --> 00:03:06,000
there you learn a bit more about it

70
00:03:06,000 --> 00:03:08,000
and that you might not need it,

71
00:03:08,000 --> 00:03:12,000
but, in reality for, most react projects you do.

72
00:03:12,000 --> 00:03:13,000
And then you'll learn

73
00:03:13,000 --> 00:03:16,000
how you can set up a project with that tool.

74
00:03:16,000 --> 00:03:18,000
And it's in the end just one easy command.

75
00:03:19,000 --> 00:03:22,000
Now for this command to be executable

76
00:03:22,000 --> 00:03:24,000
on your system though,

77
00:03:24,000 --> 00:03:27,000
you need to install Node JS first.

78
00:03:27,000 --> 00:03:31,000
Now node JS is a JavaScript run time,

79
00:03:31,000 --> 00:03:35,000
that allows you to run jobs outside of the browser.

80
00:03:35,000 --> 00:03:39,000
We don't, write any note JS code with react.

81
00:03:39,000 --> 00:03:43,000
React is not a node JS library or framework.

82
00:03:43,000 --> 00:03:47,000
It is about browser side JavaScript instead.

83
00:03:47,000 --> 00:03:49,000
But we do need node JS,

84
00:03:49,000 --> 00:03:52,000
to install, this create react app tool,

85
00:03:52,000 --> 00:03:55,000
or to use this create react app tool,

86
00:03:55,000 --> 00:03:59,000
and the project, generated by that tool.

87
00:03:59,000 --> 00:04:02,000
will always use node JS behind the scenes,

88
00:04:02,000 --> 00:04:05,000
for this automatically reloading development server

89
00:04:05,000 --> 00:04:08,000
and for some code transformations,

90
00:04:08,000 --> 00:04:10,000
which transformed the code we write,

91
00:04:10,000 --> 00:04:12,000
into code that runs in the browser.

92
00:04:12,000 --> 00:04:15,000
That's why you should visit node.js.org.

93
00:04:15,000 --> 00:04:19,000
And there, install the latest node JS version.

94
00:04:19,000 --> 00:04:22,000
Whatever that version is when you are visiting this.

95
00:04:22,000 --> 00:04:24,000
Simply install the latest version here

96
00:04:24,000 --> 00:04:25,000
by clicking on it.

97
00:04:25,000 --> 00:04:27,000
That will then give you an installer

98
00:04:27,000 --> 00:04:29,000
for your operating system.

99
00:04:29,000 --> 00:04:32,000
It's available for MacOS, Linux, and Windows,

100
00:04:32,000 --> 00:04:34,000
and it should automatically select,

101
00:04:34,000 --> 00:04:36,000
your operating system here.

102
00:04:36,000 --> 00:04:39,000
And then you simply walk through that installer

103
00:04:39,000 --> 00:04:41,000
and install node JS.

104
00:04:41,000 --> 00:04:43,000
Here I'm on macOS,

105
00:04:43,000 --> 00:04:46,000
but the process will in the end be the same on windows.

106
00:04:46,000 --> 00:04:48,000
You can just accept all the defaults.

107
00:04:48,000 --> 00:04:50,000
Don't need to change anything there.

108
00:04:50,000 --> 00:04:55,000
And that will then install node JS on your system.

109
00:04:55,000 --> 00:04:58,000
Now, once that is done, you are ready,

110
00:04:58,000 --> 00:05:03,000
to run this NPX create react at my app, command.

111
00:05:03,000 --> 00:05:07,000
And for this, simply open up your default terminal

112
00:05:07,000 --> 00:05:09,000
or command prompt on windows.

113
00:05:09,000 --> 00:05:12,000
And in there, use the CD command,

114
00:05:12,000 --> 00:05:14,000
to navigate into a folder,

115
00:05:14,000 --> 00:05:17,000
where you wanna create your react project.

116
00:05:17,000 --> 00:05:19,000
Your development folder, your desktop,

117
00:05:19,000 --> 00:05:21,000
anything like that.

118
00:05:21,000 --> 00:05:23,000
Then, once you're in that folder,

119
00:05:23,000 --> 00:05:25,000
once you navigated that they're,

120
00:05:25,000 --> 00:05:26,000
inside of that terminal,

121
00:05:26,000 --> 00:05:29,000
or a command prompt, run NPX,

122
00:05:29,000 --> 00:05:32,000
create dash react dash app,

123
00:05:32,000 --> 00:05:34,000
and then simply, something like,

124
00:05:34,000 --> 00:05:39,000
my first app, or in my case, react dash course,

125
00:05:43,000 --> 00:05:44,000
simply we had entered (indistinct),

126
00:05:44,000 --> 00:05:48,000
and this will now create a new folder named a react course,

127
00:05:48,000 --> 00:05:51,000
in that folder, in which you ran that command.

128
00:05:51,000 --> 00:05:52,000
And here I need to confirm,

129
00:05:52,000 --> 00:05:55,000
that I wanna, temporarily install,

130
00:05:55,000 --> 00:05:57,000
this create react app tool.

131
00:05:57,000 --> 00:05:59,000
And then this folder will be created,

132
00:05:59,000 --> 00:06:01,000
off that name you chose here.

133
00:06:01,000 --> 00:06:02,000
And in that folder,

134
00:06:02,000 --> 00:06:06,000
a brand new react project will be set up for you.

135
00:06:06,000 --> 00:06:09,000
Now, react project sounds like a big thing.

136
00:06:09,000 --> 00:06:13,000
It will still be a simple webpage with Java script,

137
00:06:13,000 --> 00:06:16,000
Java script managed through react in the end.

138
00:06:16,000 --> 00:06:19,000
But because of these transformations, I discussed,

139
00:06:19,000 --> 00:06:21,000
because of data, it will be a project

140
00:06:21,000 --> 00:06:23,000
where all these transformation steps,

141
00:06:23,000 --> 00:06:26,000
are already pre-configured for you.

142
00:06:26,000 --> 00:06:28,000
So that you can focus on the code,

143
00:06:28,000 --> 00:06:31,000
and not on the setup of the project.

144
00:06:31,000 --> 00:06:33,000
Notice can take a short while,

145
00:06:33,000 --> 00:06:35,000
and if you're facing any problems here,

146
00:06:35,000 --> 00:06:38,000
make sure you got no firewall blocking,

147
00:06:38,000 --> 00:06:41,000
outgoing traffic, or anything like that.

148
00:06:41,000 --> 00:06:44,000
No antivirus tool that could be interfering here.

149
00:06:44,000 --> 00:06:48,000
And then at some point, you should be done.

150
00:06:48,000 --> 00:06:51,000
You should see output that looks something like this.

151
00:06:52,000 --> 00:06:56,000
Now with that, we can CD into that,

152
00:06:56,000 --> 00:06:58,000
newly created folder,

153
00:06:58,000 --> 00:07:02,000
and then run NPM start, which is a command,

154
00:07:02,000 --> 00:07:04,000
based on, the node package manager,

155
00:07:04,000 --> 00:07:06,000
which is a tool that was installed,

156
00:07:06,000 --> 00:07:09,000
together with node JS,

157
00:07:09,000 --> 00:07:11,000
which will in the end execute a script,

158
00:07:11,000 --> 00:07:13,000
that was pre-configured

159
00:07:13,000 --> 00:07:15,000
in that created react project.

160
00:07:15,000 --> 00:07:17,000
And when we run this script,

161
00:07:17,000 --> 00:07:20,000
a development server will be started,

162
00:07:20,000 --> 00:07:21,000
as it says here,

163
00:07:21,000 --> 00:07:25,000
which will host this react project.

164
00:07:25,000 --> 00:07:26,000
It should open a new tab

165
00:07:26,000 --> 00:07:28,000
in your browser automatically,

166
00:07:28,000 --> 00:07:30,000
on local host, free thousand,

167
00:07:30,000 --> 00:07:34,000
and display a starting project there, a starting website.

168
00:07:34,000 --> 00:07:37,000
If it didn't, simply manually go

169
00:07:37,000 --> 00:07:39,000
to local hosts free thousand,

170
00:07:39,000 --> 00:07:41,000
or whichever address is shown to you here.

171
00:07:43,000 --> 00:07:45,000
And then you should see something like this.

172
00:07:45,000 --> 00:07:49,000
The exact starting project can change over time.

173
00:07:49,000 --> 00:07:52,000
Since the starting project template can be changed

174
00:07:52,000 --> 00:07:54,000
by the create react app team,

175
00:07:54,000 --> 00:07:57,000
but all you made you should see something like this.

176
00:07:57,000 --> 00:08:00,000
And that's now a little, dummy website,

177
00:08:00,000 --> 00:08:02,000
which was pre-built for us,

178
00:08:02,000 --> 00:08:05,000
and which already exists in that starting project.

179
00:08:06,000 --> 00:08:07,000
Now we're going to get rid

180
00:08:07,000 --> 00:08:09,000
of that starting project here,

181
00:08:09,000 --> 00:08:11,000
and build our own website though,

182
00:08:11,000 --> 00:08:13,000
our own react project.