All language subtitles for 5. Setting Up Our Development Environment

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,840 --> 00:00:07,170 Now before we start coding and learn all about React, let's quickly set up our development environment 2 00:00:07,170 --> 00:00:08,550 in this lecture. 3 00:00:09,730 --> 00:00:15,610 Now, since you're taking this course, I'm assuming that you already did some coding before and therefore 4 00:00:15,610 --> 00:00:19,810 you will already have some code editor installed on your computer. 5 00:00:19,810 --> 00:00:24,400 And if that code editor is vs code, then congratulations. 6 00:00:24,400 --> 00:00:27,970 You're already using the best code editor out there. 7 00:00:27,970 --> 00:00:35,380 But if you're using some other code editor, then I would highly recommend you to download vs code simply 8 00:00:35,380 --> 00:00:41,620 by downloading the installer from here and then installing it just like any other application. 9 00:00:41,620 --> 00:00:47,830 And by doing so you can then customize the editor just like I do in this course, which will make it 10 00:00:47,830 --> 00:00:50,410 a little bit easier for you to follow everything. 11 00:00:50,530 --> 00:00:56,800 Next up, of course, we need a web browser to actually run the applications that we are going to build, 12 00:00:56,800 --> 00:00:59,020 and I'm using Google Chrome for that. 13 00:00:59,020 --> 00:01:05,170 And so I highly encourage you to use the same browser so that our results are going to look the same. 14 00:01:05,170 --> 00:01:09,980 So if you don't have it installed yet, then make sure to do that right now. 15 00:01:10,190 --> 00:01:15,380 And finally, we are going to need to install NodeJS on our system. 16 00:01:15,380 --> 00:01:21,620 And this is not because we will do some NodeJS development, but it's simply because all the tools that 17 00:01:21,620 --> 00:01:24,260 we're going to use run on NodeJS. 18 00:01:24,260 --> 00:01:28,430 And it's important that you use at least Node version 18. 19 00:01:28,430 --> 00:01:34,580 And so if you're not sure about which version you are currently running or if maybe you never installed 20 00:01:34,580 --> 00:01:39,860 NodeJS before, then please go ahead and download it here from this first button. 21 00:01:39,860 --> 00:01:48,470 And it doesn't matter if it's Node 18 or 20 or 22 or whatever because of course this node version will 22 00:01:48,470 --> 00:01:49,970 change in the future. 23 00:01:49,970 --> 00:01:54,080 But what matters is that it is at least version 18. 24 00:01:54,620 --> 00:01:55,100 Okay. 25 00:01:55,100 --> 00:01:59,870 And with these three tools in place, let's now configure vs code a little bit. 26 00:02:00,590 --> 00:02:05,400 So open up a new VS code window which will then look something like this. 27 00:02:05,420 --> 00:02:10,510 So it might have changed a bit in the future, but basically it will look something like this. 28 00:02:10,520 --> 00:02:15,620 And so here from the left sidebar, let's now install two essential extensions. 29 00:02:15,650 --> 00:02:19,480 The first one is Eslint, which is a code Linter. 30 00:02:19,490 --> 00:02:26,600 So basically a program that will automatically find errors in our code or find some best practices that 31 00:02:26,600 --> 00:02:27,620 were violating. 32 00:02:27,620 --> 00:02:33,080 And maybe you have already used this linter before, but if not really, make sure to download it. 33 00:02:33,110 --> 00:02:37,250 It's really popular with over 25 million installs. 34 00:02:37,520 --> 00:02:45,170 Then another extension that we really need is prettier because prettier will automatically format our 35 00:02:45,170 --> 00:02:49,370 code, for example, to remove empty lines and stuff like that. 36 00:02:49,370 --> 00:02:55,010 And this is really important for you to follow this course because it will make your code look exactly 37 00:02:55,010 --> 00:02:57,140 the same as my code in the videos. 38 00:02:57,140 --> 00:03:01,280 And so that will help you find any bugs that you might have created. 39 00:03:01,290 --> 00:03:04,710 So please go ahead and download this extension here. 40 00:03:04,710 --> 00:03:10,530 And if we need any more extensions throughout the course, we will then just install them as we go. 41 00:03:10,770 --> 00:03:16,670 Now about the color theme that I'm using here, it is called one Mono Chi. 42 00:03:18,010 --> 00:03:19,880 So that's this one down here. 43 00:03:19,900 --> 00:03:26,590 So again, if you want your editor to look just like mine, then just go ahead, download it here and 44 00:03:26,590 --> 00:03:28,420 then set the color theme. 45 00:03:28,870 --> 00:03:31,840 You can also do that down here. 46 00:03:32,640 --> 00:03:33,410 All right. 47 00:03:34,010 --> 00:03:40,550 Now, besides this overall color theme, I also use a theme for the file icons in the file tree. 48 00:03:40,580 --> 00:03:44,660 And so that one is called material icons. 49 00:03:44,900 --> 00:03:51,500 And so make sure to download this one as well and then set this file icon theme, which again, you 50 00:03:51,500 --> 00:03:53,990 can also do it down here. 51 00:03:55,550 --> 00:03:56,000 All right. 52 00:03:56,000 --> 00:04:00,800 So with this, we tweaked the appearance of our VS code a little bit. 53 00:04:00,800 --> 00:04:06,230 And of course you can go ahead and install as many extensions as you'd like, but I will now move on 54 00:04:06,230 --> 00:04:08,570 to set some settings. 55 00:04:08,960 --> 00:04:11,420 So that's very important as well. 56 00:04:11,420 --> 00:04:14,450 And the first one is the autosave setting. 57 00:04:14,720 --> 00:04:20,690 So you can just search that here and probably this is already the default, but I'm not really sure. 58 00:04:20,690 --> 00:04:27,470 So just make sure to set autosave to on focus change, which will ensure that your code gets saved each 59 00:04:27,470 --> 00:04:31,220 time that you go to a different tab or to a different window. 60 00:04:32,110 --> 00:04:32,920 Next time. 61 00:04:32,920 --> 00:04:38,470 We need to now set the prettier extension that we installed as our default. 62 00:04:41,210 --> 00:04:43,130 A four metre. 63 00:04:46,980 --> 00:04:48,900 So that's this setting right here. 64 00:04:48,900 --> 00:04:53,070 So make sure to set it here to prettier code formatter. 65 00:04:53,250 --> 00:04:59,130 So otherwise sometimes vs code doesn't know how to activate prettier. 66 00:04:59,460 --> 00:05:04,860 And then also we want to tell vs code to do this formatting on save. 67 00:05:05,100 --> 00:05:12,450 So let's search for the setting format on save and then let's simply turn this on right here. 68 00:05:13,130 --> 00:05:21,830 Then about Eslint, we can set the Eslint run setting here and set it to on save. 69 00:05:21,950 --> 00:05:28,640 So basically by default, Eslint will run each time that you type a new character, which might be a 70 00:05:28,640 --> 00:05:29,550 bit too much. 71 00:05:29,570 --> 00:05:35,300 And so by setting this here, Eslint will only check our code each time that we save it, which usually 72 00:05:35,300 --> 00:05:36,580 is more than enough. 73 00:05:36,590 --> 00:05:41,390 But of course if you want, you can also leave the default which is on type. 74 00:05:43,320 --> 00:05:46,480 Okay, so that's all the settings that we need. 75 00:05:46,780 --> 00:05:52,030 Next up, let's quickly make sure that you actually have NodeJS installed now. 76 00:05:52,030 --> 00:05:58,000 And so for that, let's open up a new terminal, which I like to do using this shortcut that you should 77 00:05:58,000 --> 00:05:59,950 see up here on the screen. 78 00:06:00,670 --> 00:06:08,650 And so then to check your node version, just type node dash V and so make sure again that your node 79 00:06:08,650 --> 00:06:11,020 version is at least version 18. 80 00:06:11,020 --> 00:06:14,200 And if not, just go ahead and install it once again. 81 00:06:14,920 --> 00:06:15,490 All right. 82 00:06:15,490 --> 00:06:18,880 And now to finish, let's just set up some snippets. 83 00:06:18,880 --> 00:06:26,650 So snippets are basically some pieces of predefined code that we can use to greatly speed up development. 84 00:06:26,980 --> 00:06:34,180 So I actually prepared a file of three snippets that we're going to use a lot, and they are here in 85 00:06:34,180 --> 00:06:38,620 the starter files that we downloaded from GitHub right in the first section. 86 00:06:39,420 --> 00:06:41,160 So make sure to open it up. 87 00:06:41,160 --> 00:06:45,240 And this file is right here in the very first folder called Setup. 88 00:06:46,040 --> 00:06:53,290 So let's open this file here, for example, by dragging and dropping it here onto this vs code icon. 89 00:06:53,300 --> 00:06:59,810 But if for some reason that doesn't work for you, you can of course always just open it here the normal 90 00:06:59,810 --> 00:07:00,320 way. 91 00:07:01,420 --> 00:07:05,360 Right, Then just select everything and copy it. 92 00:07:05,380 --> 00:07:10,960 So copy this entire code and then come down here to user snippets. 93 00:07:12,180 --> 00:07:12,470 No. 94 00:07:12,480 --> 00:07:13,050 Right. 95 00:07:13,050 --> 00:07:17,220 And then it might be that you already have some snippets file. 96 00:07:17,220 --> 00:07:20,250 And so in that case you can just open one of them. 97 00:07:20,250 --> 00:07:26,010 But if not, just go ahead and create a new snippets file by clicking here on this option. 98 00:07:26,220 --> 00:07:33,630 So I will just use this one that I already have, and let's just pretend that it's empty so I will just 99 00:07:33,630 --> 00:07:39,330 empty it out and then I will copy paste that code from here to here. 100 00:07:39,950 --> 00:07:42,670 So what we have here are three snippets. 101 00:07:42,680 --> 00:07:46,160 This one is to easily create a console dot log. 102 00:07:46,190 --> 00:07:49,980 This one is to create a react functional component. 103 00:07:50,000 --> 00:07:53,000 So that's what this RFC stands for. 104 00:07:53,180 --> 00:07:59,030 And this one is for React styled component and we will see what these do later. 105 00:07:59,760 --> 00:08:05,580 So, for example, this first one here to just print to the console will be activated each time that 106 00:08:05,580 --> 00:08:15,600 we type in a JavaScript, a TypeScript or a React file, and it will then replace that with this console 107 00:08:15,600 --> 00:08:21,840 dot log and it will also then place the cursor between these parentheses, which is going to be really 108 00:08:21,840 --> 00:08:22,530 useful. 109 00:08:23,820 --> 00:08:26,070 So this is really powerful stuff. 110 00:08:26,070 --> 00:08:30,150 And again, we will come back to these other two and use them later. 111 00:08:31,810 --> 00:08:32,350 Okay. 112 00:08:32,350 --> 00:08:34,120 And with this, we're actually done. 113 00:08:34,120 --> 00:08:41,050 So we're all set up to now move on to finally start learning, react, and to start writing our own 114 00:08:41,050 --> 00:08:41,660 code. 115 00:08:41,680 --> 00:08:44,590 So hopefully I see you soon in the next lecture. 11595

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.