‫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.