1
00:00:01,050 --> 00:00:02,610
‫Now before we start coding

2
00:00:02,610 --> 00:00:05,670
‫and learn all about React, let's quickly set up

3
00:00:05,670 --> 00:00:08,553
‫our development environment in this lecture.

4
00:00:09,960 --> 00:00:12,450
‫Now, since you're taking this course, I'm assuming

5
00:00:12,450 --> 00:00:15,030
‫that you already did some coding before

6
00:00:15,030 --> 00:00:17,940
‫and therefore, you will already have some code editor

7
00:00:17,940 --> 00:00:20,100
‫installed on your computer.

8
00:00:20,100 --> 00:00:24,480
‫And if that code editor is VS Code, then congratulations,

9
00:00:24,480 --> 00:00:28,290
‫you're already using the best code editor out there.

10
00:00:28,290 --> 00:00:31,110
‫But if you're using some other code editor

11
00:00:31,110 --> 00:00:35,460
‫then I would highly recommend you to download VS Code simply

12
00:00:35,460 --> 00:00:38,160
‫by downloading the installer from here

13
00:00:38,160 --> 00:00:41,940
‫and then installing it just like any other application.

14
00:00:41,940 --> 00:00:44,910
‫And by doing so, you can then customize the editor

15
00:00:44,910 --> 00:00:46,800
‫just like I do in this course,

16
00:00:46,800 --> 00:00:48,660
‫which will make it a little bit easier

17
00:00:48,660 --> 00:00:50,880
‫for you to follow everything.

18
00:00:50,880 --> 00:00:54,450
‫Next up, of course, we need a web browser to actually run

19
00:00:54,450 --> 00:00:57,030
‫the applications that we are going to build

20
00:00:57,030 --> 00:00:59,250
‫and I'm using Google Chrome for that.

21
00:00:59,250 --> 00:01:02,364
‫And so I highly encourage you to use the same browser

22
00:01:02,364 --> 00:01:05,370
‫so that our results are going to look the same.

23
00:01:05,370 --> 00:01:06,997
‫So if you don't have it installed yet

24
00:01:06,997 --> 00:01:10,410
‫then make sure to do that right now.

25
00:01:10,410 --> 00:01:11,243
‫And finally,

26
00:01:11,243 --> 00:01:15,570
‫we are going to need to install Node.js on our system.

27
00:01:15,570 --> 00:01:19,380
‫And this is not because we will do some Node.js development

28
00:01:19,380 --> 00:01:20,213
‫but it's simply

29
00:01:20,213 --> 00:01:24,450
‫because all the tools that we're gonna use run on Node.js

30
00:01:24,450 --> 00:01:28,620
‫and it's important that you use at least Node version 18.

31
00:01:28,620 --> 00:01:29,970
‫And so, if you're not sure

32
00:01:29,970 --> 00:01:33,000
‫about which version you are currently running or

33
00:01:33,000 --> 00:01:35,910
‫if maybe you never installed Node.js before,

34
00:01:35,910 --> 00:01:38,130
‫then please go ahead and download it here

35
00:01:38,130 --> 00:01:40,080
‫from this first button.

36
00:01:40,080 --> 00:01:42,376
‫And it doesn't matter if it's Node 18

37
00:01:42,376 --> 00:01:47,376
‫or 20 or 22 or whatever because of course, this Node version

38
00:01:48,240 --> 00:01:50,160
‫will change in the future.

39
00:01:50,160 --> 00:01:54,570
‫But what matters is that it is at least version 18.

40
00:01:54,570 --> 00:01:57,150
‫Okay, and with these three tools in place,

41
00:01:57,150 --> 00:01:59,733
‫let's now configure VS Code a little bit.

42
00:02:00,840 --> 00:02:03,870
‫So open up a new VS Code window, which will then

43
00:02:03,870 --> 00:02:05,640
‫look something like this.

44
00:02:05,640 --> 00:02:07,830
‫So it might have changed a bit in the future

45
00:02:07,830 --> 00:02:10,770
‫but basically, it will look something like this.

46
00:02:10,770 --> 00:02:13,740
‫And so here from the left sidebar, let's now install

47
00:02:13,740 --> 00:02:15,900
‫two essential extensions.

48
00:02:15,900 --> 00:02:19,343
‫The first one is ESLint, which is a coat linter.

49
00:02:19,343 --> 00:02:23,220
‫So basically, a program that will automatically find errors

50
00:02:23,220 --> 00:02:26,490
‫in our coat or find some best practices

51
00:02:26,490 --> 00:02:27,900
‫that we're violating.

52
00:02:27,900 --> 00:02:30,750
‫And maybe you have already used this linter before, but

53
00:02:30,750 --> 00:02:33,120
‫if not, really make sure to download it.

54
00:02:33,120 --> 00:02:37,830
‫That's really popular with over 25 million installs.

55
00:02:37,830 --> 00:02:41,940
‫Then another extension that we really need is Prettier

56
00:02:41,940 --> 00:02:46,020
‫because Prettier will automatically format our code

57
00:02:46,020 --> 00:02:49,650
‫for example, to remove empty lines and stuff like that.

58
00:02:49,650 --> 00:02:52,059
‫And this is really important for you to follow this course

59
00:02:52,059 --> 00:02:55,590
‫because it will make your code look exactly the same

60
00:02:55,590 --> 00:02:57,300
‫as my code in the videos.

61
00:02:57,300 --> 00:02:59,850
‫And so that will help you find any bugs

62
00:02:59,850 --> 00:03:01,530
‫that you might have created.

63
00:03:01,530 --> 00:03:04,890
‫So, please go ahead and download this extension here

64
00:03:04,890 --> 00:03:07,950
‫and if we need any more extensions throughout the course,

65
00:03:07,950 --> 00:03:10,980
‫we will then just install them as we go.

66
00:03:10,980 --> 00:03:13,620
‫Now about the color theme that I'm using here,

67
00:03:13,620 --> 00:03:16,893
‫it is called One Monokai.

68
00:03:18,060 --> 00:03:20,130
‫So that's this one down here.

69
00:03:20,130 --> 00:03:23,958
‫So again, if you want your editor to look just like mine

70
00:03:23,958 --> 00:03:26,520
‫then just go ahead, download it here

71
00:03:26,520 --> 00:03:29,070
‫and then set the color theme.

72
00:03:29,070 --> 00:03:31,833
‫You can also do that down here.

73
00:03:32,700 --> 00:03:34,230
‫Now, right.

74
00:03:34,230 --> 00:03:36,630
‫Now, besides this overall color theme,

75
00:03:36,630 --> 00:03:40,830
‫I also use a theme for the file icons in the file tree.

76
00:03:40,830 --> 00:03:45,240
‫And so that one's called Material Icons

77
00:03:45,240 --> 00:03:48,000
‫and so make sure to download this one as well.

78
00:03:48,000 --> 00:03:51,450
‫And then set this file icon theme, which again,

79
00:03:51,450 --> 00:03:54,003
‫you can also do it down here.

80
00:03:55,756 --> 00:03:56,589
‫Now, right.

81
00:03:56,589 --> 00:03:57,797
‫So with this we tweaked, the appearance

82
00:03:57,797 --> 00:04:02,280
‫of our VS Code a little bit, and of course you can go ahead

83
00:04:02,280 --> 00:04:05,100
‫and install as many extensions as you'd like

84
00:04:05,100 --> 00:04:09,300
‫but I will now move on to set some settings.

85
00:04:09,300 --> 00:04:11,670
‫So, that's very important as well.

86
00:04:11,670 --> 00:04:15,030
‫And the first one is the auto-safe setting.

87
00:04:15,030 --> 00:04:16,660
‫So you can just search that here.

88
00:04:16,660 --> 00:04:19,530
‫And probably, this is already the default

89
00:04:19,530 --> 00:04:20,910
‫but I'm not really sure.

90
00:04:20,910 --> 00:04:24,650
‫So just make sure to set auto-safe to onFocusChange,

91
00:04:24,650 --> 00:04:25,800
‫which will ensure

92
00:04:25,800 --> 00:04:28,500
‫that your code gets saved each time that you go

93
00:04:28,500 --> 00:04:31,263
‫to a different tap or to a different window.

94
00:04:32,340 --> 00:04:35,490
‫Next time, we need to now set the Prettier extension

95
00:04:35,490 --> 00:04:39,327
‫that we installed, SR default formatter.

96
00:04:47,190 --> 00:04:49,110
‫So that's this setting right here.

97
00:04:49,110 --> 00:04:53,580
‫So make sure to set it here to Prettier, Code formatter.

98
00:04:53,580 --> 00:04:57,038
‫So otherwise, sometimes VS Code doesn't know

99
00:04:57,038 --> 00:04:59,790
‫how to activate prettier.

100
00:04:59,790 --> 00:05:02,670
‫And then also we want to tell VS Code

101
00:05:02,670 --> 00:05:05,430
‫to do this formatting on safe.

102
00:05:05,430 --> 00:05:10,200
‫So, let's search for the setting format on safe

103
00:05:10,200 --> 00:05:12,500
‫and then let's simply turn this on right here.

104
00:05:13,380 --> 00:05:18,380
‫Then about ESLint, we can set the EsLint run setting here

105
00:05:19,410 --> 00:05:22,260
‫and set it to onSafe.

106
00:05:22,260 --> 00:05:26,010
‫So basically by default, ESLint will run each time

107
00:05:26,010 --> 00:05:28,620
‫that you type a new character, which might be

108
00:05:28,620 --> 00:05:29,820
‫a bit too much.

109
00:05:29,820 --> 00:05:32,610
‫And so by setting this here, ESLint will only check

110
00:05:32,610 --> 00:05:34,710
‫our code each time that we save it,

111
00:05:34,710 --> 00:05:36,930
‫which usually is more than enough.

112
00:05:36,930 --> 00:05:39,810
‫But of course, if you want, you can also leave the default

113
00:05:39,810 --> 00:05:41,237
‫which is onType.

114
00:05:43,499 --> 00:05:44,332
‫Now, okay?

115
00:05:44,332 --> 00:05:46,770
‫So that's all the settings that we need.

116
00:05:46,770 --> 00:05:49,650
‫Next up, let's quickly make sure that you actually

117
00:05:49,650 --> 00:05:52,290
‫have Node.js installed now.

118
00:05:52,290 --> 00:05:55,020
‫And so for that, let's open up a new terminal,

119
00:05:55,020 --> 00:05:57,540
‫which I like to do using this shortcut

120
00:05:57,540 --> 00:05:59,973
‫that you should see up here on the screen.

121
00:06:00,900 --> 00:06:03,510
‫And so then, to check your node version,

122
00:06:03,510 --> 00:06:06,480
‫just type node -v.

123
00:06:06,480 --> 00:06:08,070
‫And so make sure again

124
00:06:08,070 --> 00:06:11,190
‫that your node version is at least version 18.

125
00:06:11,190 --> 00:06:14,970
‫And if not, just go ahead and install it once again.

126
00:06:14,970 --> 00:06:15,803
‫Now, right?

127
00:06:15,803 --> 00:06:19,170
‫And now to finish, let's just set up some snippets.

128
00:06:19,170 --> 00:06:22,897
‫So, snippets are basically some pieces of predefined code

129
00:06:22,897 --> 00:06:27,330
‫that we can use to greatly speed up development.

130
00:06:27,330 --> 00:06:29,220
‫So I actually prepared a file

131
00:06:29,220 --> 00:06:31,839
‫of three snippets that we're going to use a lot

132
00:06:31,839 --> 00:06:36,270
‫and they are here in these starter files that we downloaded

133
00:06:36,270 --> 00:06:38,643
‫from GitHub, right in the first section.

134
00:06:39,600 --> 00:06:41,400
‫So, make sure to open it up.

135
00:06:41,400 --> 00:06:42,750
‫And this file is right here

136
00:06:42,750 --> 00:06:45,273
‫in the very first folder called setup.

137
00:06:46,200 --> 00:06:48,810
‫So let's open this file here, for example

138
00:06:48,810 --> 00:06:53,610
‫by dragging and dropping it here onto this VS Code icon.

139
00:06:53,610 --> 00:06:56,280
‫But if for some reason that doesn't work for you, you can

140
00:06:56,280 --> 00:07:00,887
‫of course always just open it here the normal way, right?

141
00:07:02,250 --> 00:07:05,700
‫Then just select everything and copy it.

142
00:07:05,700 --> 00:07:07,620
‫So, copy this entire code

143
00:07:07,620 --> 00:07:10,953
‫and then come down here to User Snippets.

144
00:07:12,240 --> 00:07:13,290
‫Now, right?

145
00:07:13,290 --> 00:07:14,610
‫And then, it might be

146
00:07:14,610 --> 00:07:17,520
‫that you already have some snippets file.

147
00:07:17,520 --> 00:07:20,189
‫And so in that case, you can just open one of them

148
00:07:20,189 --> 00:07:23,799
‫but if not, just go ahead and create a new snippets file

149
00:07:23,799 --> 00:07:26,067
‫by clicking here on this option.

150
00:07:26,067 --> 00:07:29,002
‫So, I will just use this one that I already have

151
00:07:29,002 --> 00:07:32,850
‫and let's just pretend that it's empty.

152
00:07:32,850 --> 00:07:34,860
‫So, I will just empty it out

153
00:07:34,860 --> 00:07:39,273
‫and then I will copy paste that code from here to here.

154
00:07:40,140 --> 00:07:42,960
‫So what we have here are three snippets.

155
00:07:42,960 --> 00:07:46,440
‫This one is to easily create a console. log.

156
00:07:46,440 --> 00:07:50,310
‫This one is to create a React functional component.

157
00:07:50,310 --> 00:07:53,520
‫So that's what this RFC stands for.

158
00:07:53,520 --> 00:07:56,700
‫And this one is a forward React style component.

159
00:07:56,700 --> 00:07:59,043
‫And we will see what these do later.

160
00:07:59,970 --> 00:08:02,520
‫So for example, this first one here to just print

161
00:08:02,520 --> 00:08:07,470
‫to the console will be activated each time that we type cl

162
00:08:07,470 --> 00:08:11,580
‫in a JavaScript, A type script, or a React file.

163
00:08:11,580 --> 00:08:16,267
‫And it'll then replace that cl with this console. log

164
00:08:16,267 --> 00:08:18,575
‫and it'll also then place the cursor

165
00:08:18,575 --> 00:08:20,670
‫between these parentheses,

166
00:08:20,670 --> 00:08:22,563
‫which is going to be really useful.

167
00:08:23,940 --> 00:08:26,700
‫So this is really powerful stuff, and again,

168
00:08:26,700 --> 00:08:30,153
‫we will come back to these other two and use them later.

169
00:08:31,860 --> 00:08:34,290
‫Okay, and with this, we're actually done.

170
00:08:34,290 --> 00:08:37,350
‫So we're all set up to now move on to finally

171
00:08:37,350 --> 00:08:41,940
‫start learning React and to start writing our own code.

172
00:08:41,940 --> 00:08:44,583
‫So hopefully, I see you soon in the next lecture.