All language subtitles for 010 Setting Up The Course Dev Environment (Code Editor)_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
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 Download
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:01,171 --> 00:00:04,220 Now we are soon going to get started 2 00:00:04,220 --> 00:00:07,480 with writing our own React.js code 3 00:00:07,480 --> 00:00:10,360 and working in our own React projects 4 00:00:10,360 --> 00:00:11,890 and we are going to learn about 5 00:00:11,890 --> 00:00:14,840 all of React's cool features. 6 00:00:14,840 --> 00:00:17,630 Now for writing React code, 7 00:00:17,630 --> 00:00:19,650 you will need a code editor 8 00:00:19,650 --> 00:00:21,990 and any Web Development Editor 9 00:00:21,990 --> 00:00:24,250 or IDE can be used. 10 00:00:24,250 --> 00:00:26,780 Atom, Sublime text, Web Storm, 11 00:00:26,780 --> 00:00:28,590 whatever you want. 12 00:00:28,590 --> 00:00:31,360 My recommendation and the Editor 13 00:00:31,360 --> 00:00:33,400 I will use in this course though, 14 00:00:33,400 --> 00:00:35,650 is Visual Studio Code. 15 00:00:35,650 --> 00:00:37,740 It's a free code editor, 16 00:00:37,740 --> 00:00:38,960 and it's amazing. 17 00:00:38,960 --> 00:00:41,850 So free and amazing is a pretty good combination. 18 00:00:41,850 --> 00:00:43,660 And that's why I will use it. 19 00:00:43,660 --> 00:00:45,430 You can download and install it 20 00:00:45,430 --> 00:00:47,840 for all major operating systems 21 00:00:47,840 --> 00:00:50,510 and therefore this is the editor I will use 22 00:00:50,510 --> 00:00:51,830 throughout this course. 23 00:00:51,830 --> 00:00:55,040 You can simply visit code.visualstudio.com. 24 00:00:55,040 --> 00:00:56,970 Download the installer from there, 25 00:00:56,970 --> 00:00:59,950 and then simply walk through that installer. 26 00:00:59,950 --> 00:01:03,600 It's a standard installer, nothing special there. 27 00:01:03,600 --> 00:01:06,600 Now, once you did install Visual Studio Code 28 00:01:06,600 --> 00:01:07,940 you can open it. 29 00:01:07,940 --> 00:01:09,280 And once you did open it, 30 00:01:09,280 --> 00:01:11,940 it will look something like this. 31 00:01:11,940 --> 00:01:13,870 Now the exact look can differ 32 00:01:13,870 --> 00:01:16,350 but it should look something like this. 33 00:01:16,350 --> 00:01:18,170 You can tweak the appearance 34 00:01:18,170 --> 00:01:20,610 under View Appearance. 35 00:01:20,610 --> 00:01:23,800 For example, I will remove the Status Bar 36 00:01:23,800 --> 00:01:27,410 and you can then open files or folders. 37 00:01:27,410 --> 00:01:30,010 Through this Open Folder button here 38 00:01:30,010 --> 00:01:34,973 or this File, Open or Open Folder button in the File menu. 39 00:01:35,830 --> 00:01:39,410 And you can simply open the React projects 40 00:01:39,410 --> 00:01:42,160 you are going to work on throughout this course 41 00:01:42,160 --> 00:01:43,880 with this editor. 42 00:01:43,880 --> 00:01:46,480 So at this point we don't have a project yet. 43 00:01:46,480 --> 00:01:48,350 Later once we do have projects, 44 00:01:48,350 --> 00:01:50,930 simply open those project folders 45 00:01:50,930 --> 00:01:52,510 with this editor, 46 00:01:52,510 --> 00:01:55,173 and you'll then be able to work on your code. 47 00:01:56,020 --> 00:01:58,740 Now regarding the settings and the styling 48 00:01:58,740 --> 00:02:00,480 and the look of this editor 49 00:02:00,480 --> 00:02:04,700 you can of course fine-tune it to your requirements. 50 00:02:04,700 --> 00:02:07,590 I'm using a theme here 51 00:02:07,590 --> 00:02:11,660 and you can change it under preferences, color theme 52 00:02:11,660 --> 00:02:14,850 and I'm using the Dark+ theme here. 53 00:02:14,850 --> 00:02:17,210 You can, of course also switch to other themes 54 00:02:17,210 --> 00:02:19,570 but I like this Dark+ theme. 55 00:02:19,570 --> 00:02:21,330 So if you wanna have that same look 56 00:02:21,330 --> 00:02:24,360 you can use that same theme here. 57 00:02:24,360 --> 00:02:25,210 Throughout this course 58 00:02:25,210 --> 00:02:27,010 I will also be a bit zoomed in. 59 00:02:27,010 --> 00:02:28,150 And of course, that is something 60 00:02:28,150 --> 00:02:30,210 I'm just doing here for this course 61 00:02:30,210 --> 00:02:33,110 so that you can view my code without issues. 62 00:02:33,110 --> 00:02:36,200 I will also sometimes remove this Side Bar 63 00:02:36,200 --> 00:02:39,800 which you can do with View Appearance Show Side Bar 64 00:02:39,800 --> 00:02:41,973 or with the shortcut you see here. 65 00:02:43,540 --> 00:02:44,710 Now, in addition, 66 00:02:44,710 --> 00:02:47,550 the great thing about Visual Studio Code is 67 00:02:47,550 --> 00:02:49,790 that you can install extensions 68 00:02:49,790 --> 00:02:52,340 under View Extensions. 69 00:02:52,340 --> 00:02:55,470 And here I got a bunch of extensions installed 70 00:02:55,470 --> 00:02:57,710 but there aren't many important ones. 71 00:02:57,710 --> 00:03:01,580 Most of these extensions have nothing to do with a React. 72 00:03:01,580 --> 00:03:02,980 There are two extensions 73 00:03:02,980 --> 00:03:04,320 I wanna mention though. 74 00:03:04,320 --> 00:03:06,430 The first one is Prettier. 75 00:03:06,430 --> 00:03:10,580 This is an extension which will help with code formatting 76 00:03:10,580 --> 00:03:12,860 because in Visual Studio Code, 77 00:03:12,860 --> 00:03:15,740 if you go to your keyboard shortcuts, 78 00:03:15,740 --> 00:03:19,290 there is a Format Document shortcut, 79 00:03:19,290 --> 00:03:23,090 which you can bind in case it's not bound for you yet, 80 00:03:23,090 --> 00:03:25,550 which you can press once you got some code 81 00:03:25,550 --> 00:03:29,260 and it will then format your code so that it looks nicer. 82 00:03:29,260 --> 00:03:31,610 Simply remove redundant white space 83 00:03:31,610 --> 00:03:32,460 and so on. 84 00:03:32,460 --> 00:03:36,600 So this can help with keeping your code clean and readable. 85 00:03:36,600 --> 00:03:40,210 And this shortcut can benefit from this extension 86 00:03:40,210 --> 00:03:42,220 which helps with formatting. 87 00:03:42,220 --> 00:03:45,113 So installing Prettier might be a good idea. 88 00:03:46,410 --> 00:03:47,970 Once you did install it, 89 00:03:47,970 --> 00:03:50,580 you might just wanna check out your settings 90 00:03:50,580 --> 00:03:53,110 under Preferences Settings 91 00:03:53,110 --> 00:03:55,890 and then search for format here 92 00:03:55,890 --> 00:04:00,563 and make sure you set your Default Formatter to Prettier. 93 00:04:02,360 --> 00:04:04,710 And then this Format Document shortcut 94 00:04:04,710 --> 00:04:05,760 which I showed you 95 00:04:05,760 --> 00:04:08,350 should use Prettier. 96 00:04:08,350 --> 00:04:09,960 Now that's one extension. 97 00:04:09,960 --> 00:04:11,410 The other extension, 98 00:04:11,410 --> 00:04:14,320 which I use in some course modules, 99 00:04:14,320 --> 00:04:16,810 is the Material Icon extension. 100 00:04:16,810 --> 00:04:19,173 The Material Icon Theme extension. 101 00:04:20,079 --> 00:04:23,120 You can download and enable this as well. 102 00:04:23,120 --> 00:04:25,060 And I will be using it in some, 103 00:04:25,060 --> 00:04:27,440 but not all course sections. 104 00:04:27,440 --> 00:04:30,860 This extension will simply change the file icons, 105 00:04:30,860 --> 00:04:32,960 the look of the file icons. 106 00:04:32,960 --> 00:04:36,020 And therefore, of course, it's 100% optional 107 00:04:36,020 --> 00:04:38,310 and you don't need it. 108 00:04:38,310 --> 00:04:42,450 And that's all that is the setup I'm using in this course. 109 00:04:42,450 --> 00:04:44,950 This is the editor I'm using in this course. 110 00:04:44,950 --> 00:04:48,610 And of course you can and should tweak it exactly 111 00:04:48,610 --> 00:04:49,670 how you want it. 112 00:04:49,670 --> 00:04:53,123 I just wanted to introduce you to my set up. 8264

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