1
00:00:01,080 --> 00:00:02,700
‫Welcome back.

2
00:00:02,700 --> 00:00:06,930
‫So now that we know that we want to use Create-React-App

3
00:00:06,930 --> 00:00:08,910
‫for small course projects,

4
00:00:08,910 --> 00:00:12,480
‫let's actually set up our very first project now

5
00:00:12,480 --> 00:00:15,183
‫with the Create-React-App tool.

6
00:00:16,590 --> 00:00:21,000
‫Now, Create-React-App is a command-line interface tool.

7
00:00:21,000 --> 00:00:23,370
‫And so now we need actually a terminal

8
00:00:23,370 --> 00:00:27,030
‫or a command prompt as it's called on Windows.

9
00:00:27,030 --> 00:00:28,530
‫So if you're on Windows,

10
00:00:28,530 --> 00:00:31,200
‫go ahead and open up your command prompt,

11
00:00:31,200 --> 00:00:35,313
‫and if you're on a Mac, then open up your terminal.

12
00:00:37,140 --> 00:00:40,830
‫Okay, let's make this a bit bigger.

13
00:00:40,830 --> 00:00:42,360
‫And there's not a lot of things

14
00:00:42,360 --> 00:00:44,760
‫that you need to know about the terminal.

15
00:00:44,760 --> 00:00:48,300
‫So all you need to know is that in the terminal,

16
00:00:48,300 --> 00:00:50,130
‫or also in the command prompt,

17
00:00:50,130 --> 00:00:53,010
‫which I'm just going to use interchangeably,

18
00:00:53,010 --> 00:00:54,510
‫you're always in a folder.

19
00:00:54,510 --> 00:00:57,090
‫And that folder is usually displayed here

20
00:00:57,090 --> 00:00:59,130
‫in the command prompt.

21
00:00:59,130 --> 00:01:02,100
‫Now, this command prompt here, so this thing,

22
00:01:02,100 --> 00:01:04,050
‫probably looks very different for you

23
00:01:04,050 --> 00:01:05,850
‫than it looks for me, but that's just

24
00:01:05,850 --> 00:01:09,750
‫because I have this kind of extension here installed.

25
00:01:09,750 --> 00:01:12,000
‫So for you, it's probably just all black.

26
00:01:12,000 --> 00:01:14,610
‫And most likely, you will see the folder

27
00:01:14,610 --> 00:01:16,170
‫that you're currently in here.

28
00:01:16,170 --> 00:01:18,030
‫So I'm currently in this folder,

29
00:01:18,030 --> 00:01:20,310
‫which is basically just the home folder.

30
00:01:20,310 --> 00:01:22,950
‫And you can see the contents of the folder

31
00:01:22,950 --> 00:01:25,833
‫by writing ls on the Mac.

32
00:01:26,670 --> 00:01:29,460
‫And on Windows, the same thing is dir,

33
00:01:29,460 --> 00:01:31,380
‫which stands for directory.

34
00:01:31,380 --> 00:01:33,570
‫So again, with this you can see the contents

35
00:01:33,570 --> 00:01:35,640
‫of the current directory.

36
00:01:35,640 --> 00:01:37,350
‫So what I want to do now is

37
00:01:37,350 --> 00:01:39,510
‫to navigate to another directory,

38
00:01:39,510 --> 00:01:41,580
‫which is where I ultimately want

39
00:01:41,580 --> 00:01:44,880
‫to run the Create-React-App tool.

40
00:01:44,880 --> 00:01:47,460
‫So for me, that's the Desktop again.

41
00:01:47,460 --> 00:01:49,890
‫And so I can write cd

42
00:01:49,890 --> 00:01:53,310
‫and then the name of the folder and hit Enter.

43
00:01:53,310 --> 00:01:56,850
‫And this command is actually the exact same on Windows.

44
00:01:56,850 --> 00:01:58,380
‫So that's also cd.

45
00:01:58,380 --> 00:02:00,600
‫And so make sure that you navigate to the folder

46
00:02:00,600 --> 00:02:03,510
‫in which you want to create the new project.

47
00:02:03,510 --> 00:02:05,460
‫So again, for me, that's on the Desktop.

48
00:02:05,460 --> 00:02:07,140
‫And just to make sure, yeah,

49
00:02:07,140 --> 00:02:10,140
‫these are the two folders that are on my desktop,

50
00:02:10,140 --> 00:02:12,693
‫which are exactly these two, right?

51
00:02:13,680 --> 00:02:16,200
‫Now, later on, we will actually use the terminal

52
00:02:16,200 --> 00:02:18,690
‫that is integrated into VS Code,

53
00:02:18,690 --> 00:02:21,570
‫for example, to start and stop the application.

54
00:02:21,570 --> 00:02:23,190
‫But to create an application,

55
00:02:23,190 --> 00:02:26,100
‫we will always keep using this terminal here

56
00:02:26,100 --> 00:02:28,470
‫because the terminal that's in VS Code

57
00:02:28,470 --> 00:02:31,530
‫is usually tied to the project folder itself.

58
00:02:31,530 --> 00:02:34,170
‫But here, we don't have a project folder yet.

59
00:02:34,170 --> 00:02:38,400
‫Instead, we will now create it using Create-React-App.

60
00:02:38,400 --> 00:02:39,540
‫Once you're in the folder

61
00:02:39,540 --> 00:02:41,880
‫where you want to create the new project,

62
00:02:41,880 --> 00:02:46,880
‫type npx and then create-react-app

63
00:02:48,270 --> 00:02:51,363
‫and then the name of the app that you want to build.

64
00:02:52,200 --> 00:02:53,040
‫Now, in our case,

65
00:02:53,040 --> 00:02:56,880
‫that's going to be pizza-menu

66
00:02:56,880 --> 00:02:59,670
‫because this is our very first project

67
00:02:59,670 --> 00:03:01,440
‫that we're going to build in this course

68
00:03:01,440 --> 00:03:03,300
‫in the next section.

69
00:03:03,300 --> 00:03:07,170
‫However, we're not really ready to run this yet

70
00:03:07,170 --> 00:03:10,440
‫because I want you to actually use the version five

71
00:03:10,440 --> 00:03:12,300
‫of Create-React-App.

72
00:03:12,300 --> 00:03:16,260
‫So please write this @ and then 5

73
00:03:16,260 --> 00:03:19,650
‫to lock in version five of Create-React-App.

74
00:03:19,650 --> 00:03:20,490
‫And that's important

75
00:03:20,490 --> 00:03:24,300
‫because this tool will most likely change in the future,

76
00:03:24,300 --> 00:03:27,150
‫and then it might work in a slightly different way

77
00:03:27,150 --> 00:03:29,130
‫than the one that I'm showing you here.

78
00:03:29,130 --> 00:03:31,440
‫But in order not to run into any problems,

79
00:03:31,440 --> 00:03:34,140
‫let's just fix this on version five

80
00:03:34,140 --> 00:03:35,730
‫for the rest of the course.

81
00:03:35,730 --> 00:03:38,250
‫And then later, if you want to build your own projects

82
00:03:38,250 --> 00:03:40,260
‫outside of the course, you, of course,

83
00:03:40,260 --> 00:03:41,940
‫no longer need this.

84
00:03:41,940 --> 00:03:44,580
‫Then you will just run Create-React-App like this

85
00:03:44,580 --> 00:03:45,930
‫without the version number.

86
00:03:45,930 --> 00:03:47,850
‫But here, let's do it like this.

87
00:03:47,850 --> 00:03:51,420
‫So once you have it written like this, just hit Enter,

88
00:03:51,420 --> 00:03:55,830
‫and this will then take a long time to download.

89
00:03:55,830 --> 00:03:57,420
‫Well, actually, first,

90
00:03:57,420 --> 00:03:59,580
‫it asks me if I want to proceed.

91
00:03:59,580 --> 00:04:04,230
‫So just type y and then Enter or return.

92
00:04:04,230 --> 00:04:07,140
‫And so yeah, now it is starting to download like,

93
00:04:07,140 --> 00:04:10,200
‫thousands of packages,

94
00:04:10,200 --> 00:04:12,000
‫which will take a lot of time.

95
00:04:12,000 --> 00:04:14,880
‫But you see it already created the folder

96
00:04:14,880 --> 00:04:17,400
‫with the name of the app that we specified here,

97
00:04:17,400 --> 00:04:18,930
‫pizza-menu.

98
00:04:18,930 --> 00:04:20,790
‫So go ahead and pause the video right now,

99
00:04:20,790 --> 00:04:23,760
‫and I will be back here once downloading all

100
00:04:23,760 --> 00:04:25,833
‫of these packages has finished.

101
00:04:27,360 --> 00:04:30,330
‫Okay. And it's done installing all the packages.

102
00:04:30,330 --> 00:04:33,840
‫And so now we can actually close up this terminal

103
00:04:33,840 --> 00:04:36,240
‫or the command prompt.

104
00:04:36,240 --> 00:04:39,420
‫Now, before I open up this folder here,

105
00:04:39,420 --> 00:04:41,250
‫I will quickly rename this folder just

106
00:04:41,250 --> 00:04:43,890
‫so they stay in the order that I want them to be.

107
00:04:43,890 --> 00:04:45,633
‫But this is totally optional.

108
00:04:46,500 --> 00:04:49,770
‫So number two will be for the next section.

109
00:04:49,770 --> 00:04:51,960
‫That's why this one is number three.

110
00:04:51,960 --> 00:04:52,793
‫Okay.

111
00:04:52,793 --> 00:04:55,200
‫And now we're ready to open up this project

112
00:04:55,200 --> 00:04:57,540
‫as project folder in VS Code.

113
00:04:57,540 --> 00:04:58,373
‫And so once again,

114
00:04:58,373 --> 00:05:03,373
‫I will drag and drop it onto the VS Code icon down here,

115
00:05:03,540 --> 00:05:08,540
‫or optionally, you can also just open a new VS Code window

116
00:05:08,670 --> 00:05:12,570
‫and then open up the project folder right here.

117
00:05:12,570 --> 00:05:15,990
‫But anyway, let's now explore the file structure

118
00:05:15,990 --> 00:05:20,100
‫that has been created for us by Create-React-App.

119
00:05:20,100 --> 00:05:21,870
‫And we can already see

120
00:05:21,870 --> 00:05:25,410
‫that this is actually just a regular npm project

121
00:05:25,410 --> 00:05:28,440
‫that we could also have manually created using

122
00:05:28,440 --> 00:05:30,990
‫the npm init command.

123
00:05:30,990 --> 00:05:33,720
‫So we have a package.json file here,

124
00:05:33,720 --> 00:05:37,290
‫which contains the name of the app, the version,

125
00:05:37,290 --> 00:05:41,193
‫the dependencies, and also the npm scripts.

126
00:05:42,847 --> 00:05:43,710
‫All right.

127
00:05:43,710 --> 00:05:46,290
‫And we also have the node_modules folder,

128
00:05:46,290 --> 00:05:49,980
‫which is where all the npm packages have been installed.

129
00:05:49,980 --> 00:05:51,990
‫And you see that there are hundreds,

130
00:05:51,990 --> 00:05:54,390
‫maybe thousands of them,

131
00:05:54,390 --> 00:05:57,480
‫but I'm just looking for the React ones here.

132
00:05:57,480 --> 00:06:00,240
‫And yeah, here they are.

133
00:06:00,240 --> 00:06:02,640
‫So here is the react package,

134
00:06:02,640 --> 00:06:04,620
‫and here, the react-dom package.

135
00:06:04,620 --> 00:06:07,770
‫And remember that these two are exactly the ones

136
00:06:07,770 --> 00:06:10,380
‫that we also included into our file

137
00:06:10,380 --> 00:06:13,320
‫in the pure React lecture, right?

138
00:06:13,320 --> 00:06:16,440
‫But we did it back then using the script tag,

139
00:06:16,440 --> 00:06:21,440
‫and of course, not using npm install, right?

140
00:06:22,110 --> 00:06:25,440
‫Now, if this whole concept here of the npm project,

141
00:06:25,440 --> 00:06:28,950
‫so this node_modules and the package.json,

142
00:06:28,950 --> 00:06:31,620
‫is a bit strange for you, then don't worry,

143
00:06:31,620 --> 00:06:34,050
‫you don't really need to understand all that.

144
00:06:34,050 --> 00:06:36,120
‫But if you want, you can just try

145
00:06:36,120 --> 00:06:38,910
‫to read something on it or watch a video,

146
00:06:38,910 --> 00:06:43,350
‫or I also explain it all in my complete JavaScript course.

147
00:06:43,350 --> 00:06:46,020
‫But again, it's not really necessary.

148
00:06:46,020 --> 00:06:48,900
‫Just know that this is very, very standard

149
00:06:48,900 --> 00:06:52,230
‫in basically all modern JavaScript projects

150
00:06:52,230 --> 00:06:55,140
‫that have a build tool associated.

151
00:06:55,140 --> 00:06:56,310
‫Okay?

152
00:06:56,310 --> 00:06:59,040
‫But anyway, let's now check out these other folders

153
00:06:59,040 --> 00:07:01,470
‫that have been created for us.

154
00:07:01,470 --> 00:07:04,080
‫Now, most of our development work,

155
00:07:04,080 --> 00:07:06,150
‫or basically all development,

156
00:07:06,150 --> 00:07:09,630
‫will happen here inside the source folder.

157
00:07:09,630 --> 00:07:11,700
‫So here, we have a bunch of files,

158
00:07:11,700 --> 00:07:14,100
‫where most of them we actually don't need.

159
00:07:14,100 --> 00:07:16,650
‫And so we will get rid of them soon.

160
00:07:16,650 --> 00:07:20,050
‫But for now, let's just leave everything here as it is

161
00:07:21,240 --> 00:07:23,220
‫and checking out the other folder,

162
00:07:23,220 --> 00:07:24,690
‫which is the public folder.

163
00:07:24,690 --> 00:07:27,690
‫And this is where basically all the assets

164
00:07:27,690 --> 00:07:31,590
‫that will end up in the final application go.

165
00:07:31,590 --> 00:07:35,520
‫So all the images, like the favicon,

166
00:07:35,520 --> 00:07:39,450
‫and also the index.html file.

167
00:07:39,450 --> 00:07:40,710
‫And if we open that up,

168
00:07:40,710 --> 00:07:44,070
‫we have a bunch of stuff here

169
00:07:44,070 --> 00:07:46,320
‫and, well, all of these comments here,

170
00:07:46,320 --> 00:07:48,030
‫which you can read if you want.

171
00:07:48,030 --> 00:07:50,160
‫But I just wanted to draw your attention

172
00:07:50,160 --> 00:07:53,610
‫to this div with the id of root.

173
00:07:53,610 --> 00:07:55,383
‫So is that familiar to you?

174
00:07:56,220 --> 00:07:58,260
‫Yeah, we wrote exactly the same thing

175
00:07:58,260 --> 00:08:00,090
‫in the pure React lecture

176
00:08:00,090 --> 00:08:02,970
‫and used this as the root of our app.

177
00:08:02,970 --> 00:08:06,480
‫And so exactly the same convention has been used here

178
00:08:06,480 --> 00:08:08,880
‫by Create-React-App.

179
00:08:08,880 --> 00:08:11,670
‫So Create-React-App created

180
00:08:11,670 --> 00:08:15,120
‫this index.html file already for us.

181
00:08:15,120 --> 00:08:18,300
‫And then if we open index.js,

182
00:08:18,300 --> 00:08:23,200
‫you see that here it also selects that root element,

183
00:08:24,150 --> 00:08:26,700
‫so the element with the id of root,

184
00:08:26,700 --> 00:08:28,260
‫and then it creates the root

185
00:08:28,260 --> 00:08:29,770
‫using ReactDOM.createRoot

186
00:08:31,170 --> 00:08:34,290
‫and then renders the app into it.

187
00:08:34,290 --> 00:08:37,950
‫So exactly like we did in the pure React lecture.

188
00:08:37,950 --> 00:08:39,990
‫But more about all this

189
00:08:39,990 --> 00:08:41,910
‫at the beginning of the next section,

190
00:08:41,910 --> 00:08:44,280
‫when we actually start building this project.

191
00:08:44,280 --> 00:08:46,110
‫For now, I just want to explore

192
00:08:46,110 --> 00:08:48,570
‫the file structure here a little bit.

193
00:08:48,570 --> 00:08:51,030
‫Now, what I do want to say in this video

194
00:08:51,030 --> 00:08:52,830
‫is that all of these files

195
00:08:52,830 --> 00:08:56,340
‫and this entire file structure here has been created

196
00:08:56,340 --> 00:08:58,890
‫by Create-React-App in a way

197
00:08:58,890 --> 00:09:01,890
‫that its developers thought was best.

198
00:09:01,890 --> 00:09:04,800
‫But it could be all completely different.

199
00:09:04,800 --> 00:09:07,890
‫Like, this index.html could be out here,

200
00:09:07,890 --> 00:09:09,810
‫or it could be inside here,

201
00:09:09,810 --> 00:09:12,690
‫or we could maybe have no folders at all,

202
00:09:12,690 --> 00:09:16,260
‫because React really doesn't care about any of that.

203
00:09:16,260 --> 00:09:20,100
‫And the proof for that is that in the pure React lecture,

204
00:09:20,100 --> 00:09:22,800
‫we didn't need any of this, right?

205
00:09:22,800 --> 00:09:27,420
‫All we had was one index.html with some JavaScript

206
00:09:27,420 --> 00:09:30,180
‫in which we basically had this.

207
00:09:30,180 --> 00:09:32,730
‫So this part here is actual React,

208
00:09:32,730 --> 00:09:35,370
‫and it's this part which takes care

209
00:09:35,370 --> 00:09:39,630
‫of rendering this App component into the DOM.

210
00:09:39,630 --> 00:09:42,900
‫So this App component is here inside this App file.

211
00:09:42,900 --> 00:09:45,330
‫But we will open up all of these files

212
00:09:45,330 --> 00:09:47,250
‫and clean them up, also,

213
00:09:47,250 --> 00:09:49,920
‫once we start actually building the app.

214
00:09:49,920 --> 00:09:52,500
‫For now, I just wanted to explore this a little bit,

215
00:09:52,500 --> 00:09:56,163
‫and also, I actually wanted to now start this app.

216
00:09:57,180 --> 00:09:59,850
‫So to start a Create-React-App,

217
00:09:59,850 --> 00:10:04,290
‫we can use this npm script right here.

218
00:10:04,290 --> 00:10:06,693
‫So this npm run start.

219
00:10:07,890 --> 00:10:10,500
‫So let's open up the terminal again.

220
00:10:10,500 --> 00:10:12,000
‫But as I said in the beginning,

221
00:10:12,000 --> 00:10:15,540
‫now we will actually use the integrated terminal

222
00:10:15,540 --> 00:10:18,390
‫that comes with VS Code.

223
00:10:18,390 --> 00:10:21,540
‫So for that, open up terminal right here.

224
00:10:21,540 --> 00:10:23,340
‫And now the big advantage here is

225
00:10:23,340 --> 00:10:27,570
‫that we are already automatically inside our project folder.

226
00:10:27,570 --> 00:10:31,950
‫So if we run ls here, or dir on Windows,

227
00:10:31,950 --> 00:10:35,340
‫then you will see exactly the same files and folders

228
00:10:35,340 --> 00:10:37,980
‫that we have here in the sidebar.

229
00:10:37,980 --> 00:10:40,530
‫But anyway, now, to start the project,

230
00:10:40,530 --> 00:10:44,880
‫all we need to do is to run npm run start

231
00:10:46,110 --> 00:10:49,260
‫because this is how you run these commands right here.

232
00:10:49,260 --> 00:10:51,090
‫So you write npm run

233
00:10:51,090 --> 00:10:54,690
‫and then the name of one of these four, in this case.

234
00:10:54,690 --> 00:10:56,820
‫And we could also create our own,

235
00:10:56,820 --> 00:10:58,710
‫but we don't need to.

236
00:10:58,710 --> 00:11:01,260
‫Now, in the case of the start command,

237
00:11:01,260 --> 00:11:03,630
‫we actually don't even need to write run.

238
00:11:03,630 --> 00:11:07,050
‫Can just type npm start, hit Enter,

239
00:11:07,050 --> 00:11:10,050
‫and that will then start up our application

240
00:11:10,050 --> 00:11:12,423
‫and even open up a new browser tab.

241
00:11:14,250 --> 00:11:15,420
‫And there it is.

242
00:11:15,420 --> 00:11:19,020
‫So Create-React-App created a web server for us

243
00:11:19,020 --> 00:11:21,210
‫and made our application run here

244
00:11:21,210 --> 00:11:24,363
‫on localhost port 3000.

245
00:11:25,650 --> 00:11:26,940
‫Okay?

246
00:11:26,940 --> 00:11:30,810
‫Now, let's just one more time come back here

247
00:11:30,810 --> 00:11:33,600
‫and open up this App component.

248
00:11:33,600 --> 00:11:37,473
‫So this App component here is inside the App file.

249
00:11:40,050 --> 00:11:43,080
‫Well, let's just take everything here

250
00:11:43,080 --> 00:11:46,530
‫and just very quickly type h1,

251
00:11:46,530 --> 00:11:48,990
‫Hello React!

252
00:11:48,990 --> 00:11:50,130
‫Give it a save.

253
00:11:50,130 --> 00:11:52,020
‫And then once we go back,

254
00:11:52,020 --> 00:11:53,940
‫it should automatically have updated.

255
00:11:53,940 --> 00:11:56,310
‫And indeed, it did.

256
00:11:56,310 --> 00:11:58,830
‫So this was one of the things that we were missing

257
00:11:58,830 --> 00:12:00,900
‫in the pure React lecture,

258
00:12:00,900 --> 00:12:03,780
‫but now, here we are actually using a web server.

259
00:12:03,780 --> 00:12:07,023
‫And so we get hot module replacement with that.

260
00:12:07,860 --> 00:12:08,730
‫Great.

261
00:12:08,730 --> 00:12:11,430
‫So congratulations, you just created

262
00:12:11,430 --> 00:12:15,810
‫your very first Create-React-App application.

263
00:12:15,810 --> 00:12:18,240
‫And with this, we actually reached the end

264
00:12:18,240 --> 00:12:21,420
‫of the First Look at React section.

265
00:12:21,420 --> 00:12:23,610
‫Now, the next section is a quick review

266
00:12:23,610 --> 00:12:27,180
‫of the essential JavaScript that you need for React.

267
00:12:27,180 --> 00:12:30,900
‫And so you can see if you need any of those lectures.

268
00:12:30,900 --> 00:12:34,290
‫But if not, then just move on right to the next section,

269
00:12:34,290 --> 00:12:38,250
‫where we will then start building this pizza menu

270
00:12:38,250 --> 00:12:42,960
‫that we started here to learn all the fundamentals of React.

271
00:12:42,960 --> 00:12:45,603
‫So hopefully I see you there very soon.