Initial setup - React.js Tutorial

- [Instructor] For setting up our React project I really want to get started where most of you start when developing a React application and that is with the create-react-app CLI tool, better known as the CRA. Then we'll add what we need to be properly set with our base setup. So let's get to it. So the first thing I'm going to do is create a brand new React application, so what I'm going to do is use Visual Studio Code terminal to do that. So I'm going to open the folder and basically open the Desktop folder like so and create my react-app application in here. Perfect. So now that I have that, what I am going to bring is my terminal, so I'm going to click on View, Terminal, and then what I'm going to use is npx. So if you're not familiar with npx it's basically npm without having the tool installed locally to your system. So it's going to download the tool, create the new application, and then remove it. So it's a great tool to use any Angular or React tool without having them installed locally. So let's go ahead and do npx create-react-app and I'm going to call this one secure. Okay, so now that we have a brand new React application installed and created for us, let's close Visual Studio Code and copy the file that we have in our Exercise Files. So what I'm going to do is open the Exercise Files like so and open my Secure folder that I just created. And what I'm going to do is go into the Resources in the Exercise Files and then click on Project and then what you need to do is copy the Source folder into here and remove the one that we have in here. So we're not going to use any of that anymore. The only thing that I would keep is the service worker, so let's go ahead and do that. So I'm going to delete everything but the service worker, like so, and then copy all of this from the Source folder into the Source folder here, like so. And let's just make sure that we do a copy, so Option + Click like so. Once you have that, you want to make sure that you copy the Index from the Public 'cause I actually have some libraries that are installed with the Index. So let's go to Public and remove the index.html and then Option + Click or Command or Control + C and then Command or Control + V. And that should do it for the files that we have to copy from the Exercise Files. So once we have this, I'm supposed to have all of this open like we had before, I'm going to simply drag and drop the folder inside of Visual Studio Code or on Windows you can right click and open in Visual Studio Code. So now I have my project in here. The only dependency that we need that is not with the base system here is React Router DOM, so let's go ahead and install that. So I'm going to bring up my terminal again and do an npm i --save, and actually we don't need to do that. That's from the legacy npm version. And what we need to install is react-router-dom. So if you want to see if everything is good in the package.json file, we should see react-router-dom appear in the dependencies shortly. Perfect. So now we have everything that we need, so let's go ahead and start our application. Let's do an npm start and if everything went well with our files that we copied, we should have a simple list of all my courses presented with some CSS styles. Perfect. Okay, so now we've got a React application running that has some meat to it. So feel free to use your own if you need to, but make sure you are on the latest version of React. Let's move on.