All language subtitles for 005 Setting Up Our Development Environment_en

Now before we start coding

and learn all about React, let's quickly set up

our development environment in this lecture.

Now, since you're taking this course, I'm assuming

that you already did some coding before

and therefore, you will already have some code editor

installed on your computer.

And if that code editor is VS Code, then congratulations,

you're already using the best code editor out there.

But if you're using some other code editor

then I would highly recommend you to download VS Code simply

by downloading the installer from here

and then installing it just like any other application.

And by doing so, you can then customize the editor

just like I do in this course,

which will make it a little bit easier

for you to follow everything.

Next up, of course, we need a web browser to actually run

the applications that we are going to build

and I'm using Google Chrome for that.

And so I highly encourage you to use the same browser

so that our results are going to look the same.

So if you don't have it installed yet

then make sure to do that right now.

And finally,

we are going to need to install Node.js on our system.

And this is not because we will do some Node.js development

but it's simply

because all the tools that we're gonna use run on Node.js

and it's important that you use at least Node version 18.

And so, if you're not sure

about which version you are currently running or

if maybe you never installed Node.js before,

then please go ahead and download it here

from this first button.

And it doesn't matter if it's Node 18

or 20 or 22 or whatever because of course, this Node version

will change in the future.

But what matters is that it is at least version 18.

Okay, and with these three tools in place,

let's now configure VS Code a little bit.

So open up a new VS Code window, which will then

look something like this.

So it might have changed a bit in the future

but basically, it will look something like this.

And so here from the left sidebar, let's now install

two essential extensions.

The first one is ESLint, which is a coat linter.

So basically, a program that will automatically find errors

in our coat or find some best practices

that we're violating.

And maybe you have already used this linter before, but

if not, really make sure to download it.

That's really popular with over 25 million installs.

Then another extension that we really need is Prettier

because Prettier will automatically format our code

for example, to remove empty lines and stuff like that.

And this is really important for you to follow this course

because it will make your code look exactly the same

as my code in the videos.

And so that will help you find any bugs

that you might have created.

So, please go ahead and download this extension here

and if we need any more extensions throughout the course,

we will then just install them as we go.

Now about the color theme that I'm using here,

it is called One Monokai.

So that's this one down here.

So again, if you want your editor to look just like mine

then just go ahead, download it here

and then set the color theme.

You can also do that down here.

Now, right.

Now, besides this overall color theme,

I also use a theme for the file icons in the file tree.

And so that one's called Material Icons

and so make sure to download this one as well.

And then set this file icon theme, which again,

you can also do it down here.

Now, right.

So with this we tweaked, the appearance

of our VS Code a little bit, and of course you can go ahead

and install as many extensions as you'd like

but I will now move on to set some settings.

So, that's very important as well.

And the first one is the auto-safe setting.

So you can just search that here.

And probably, this is already the default

but I'm not really sure.

So just make sure to set auto-safe to onFocusChange,

which will ensure

that your code gets saved each time that you go

to a different tap or to a different window.

Next time, we need to now set the Prettier extension

that we installed, SR default formatter.

So that's this setting right here.

So make sure to set it here to Prettier, Code formatter.

So otherwise, sometimes VS Code doesn't know

how to activate prettier.

And then also we want to tell VS Code

to do this formatting on safe.

So, let's search for the setting format on safe

and then let's simply turn this on right here.

Then about ESLint, we can set the EsLint run setting here

and set it to onSafe.

So basically by default, ESLint will run each time

that you type a new character, which might be

a bit too much.

And so by setting this here, ESLint will only check

our code each time that we save it,

which usually is more than enough.

But of course, if you want, you can also leave the default

which is onType.

Now, okay?

So that's all the settings that we need.

Next up, let's quickly make sure that you actually

have Node.js installed now.

And so for that, let's open up a new terminal,

which I like to do using this shortcut

that you should see up here on the screen.

And so then, to check your node version,

just type node -v.

And so make sure again

that your node version is at least version 18.

And if not, just go ahead and install it once again.

Now, right?

And now to finish, let's just set up some snippets.

So, snippets are basically some pieces of predefined code

that we can use to greatly speed up development.

So I actually prepared a file

of three snippets that we're going to use a lot

and they are here in these starter files that we downloaded

from GitHub, right in the first section.

So, make sure to open it up.

And this file is right here

in the very first folder called setup.

So let's open this file here, for example

by dragging and dropping it here onto this VS Code icon.

But if for some reason that doesn't work for you, you can

of course always just open it here the normal way, right?

Then just select everything and copy it.

So, copy this entire code

and then come down here to User Snippets.

Now, right?

And then, it might be

that you already have some snippets file.

And so in that case, you can just open one of them

but if not, just go ahead and create a new snippets file

by clicking here on this option.

So, I will just use this one that I already have

and let's just pretend that it's empty.

So, I will just empty it out

and then I will copy paste that code from here to here.

So what we have here are three snippets.

This one is to easily create a console. log.

This one is to create a React functional component.

So that's what this RFC stands for.

And this one is a forward React style component.

And we will see what these do later.

So for example, this first one here to just print

to the console will be activated each time that we type cl

in a JavaScript, A type script, or a React file.

And it'll then replace that cl with this console. log

and it'll also then place the cursor

between these parentheses,

which is going to be really useful.

So this is really powerful stuff, and again,

we will come back to these other two and use them later.

Okay, and with this, we're actually done.

So we're all set up to now move on to finally

start learning React and to start writing our own code.

So hopefully, I see you soon in the next lecture.