Installing requirements

- [Instructor] Let's take a look at what we're going to need to get going with our react project. Now, there are some prerequisites that you're going to have to install before you get started. First, is a copy of Git. Git is a version control system that is used to manage most web projects. If you're on a PC, when you install Git, you have the option of installing an app called Git Bash which lets you use Linux commands on a PC. You'll also need a copy of Node.js which is used to manage node projects. And it comes with something called NPX which we will need for this project. In addition to that there's a couple of tools that aren't necessarily required, but are going to make your life a lot easier. First is, the react developer tools. This is an extension for a Chrome browsers and it gives you a lot of capabilities in inspecting your react projects. You can see a little, we have it right here. It's very handy. In addition to that, there's a couple of different extensions that can make your life easier, if you're using visual studio code. The first is React Snippets. This is a series of react snippets that's going to make your life easier and it's going to make it faster for you to type some of the code. In addition to that, there is a JSX snippets that will allow you to use the language that react projects are based on a little bit easier. Now to install react, we're going to need to use an application called the Create React App. You can see the website right here and what it does is manage the project for you and creates a build process that is going to take care of live reloading and letting you build the project whenever you need to send it into a server. Now to use this, you're going to need to do a couple of things. If you have a previous version of the Create React App, you want to run this command on your terminal to make sure that you uninstall the older version of it. If you've got that taken care of then you can issue commands like this to install an application on your desktop. And that's what we're going to do right now. I'm going to use a terminal application called hyper, you can use the Macro S terminal or Git Bash on a PC and we're going to run those commands that we just saw a minute ago. First, I like to place things on the desktop. You can put them on any folder on your hard drive. So I'm going to issue a CD Tilda/Desktop Command and then from here, I'm going to run the npx command. Now, when you run NPX it does require that you have Node.js 5.2 or higher. So if you already had a copy of Node.js on your machine and this doesn't work, make sure that you update Node.js. Let's go to the Node.js website and download the newer version. So we'll do npx and then create-react-app like this, and then we'll give our project a name. So I'm going to call this one reactgraphql. You can call it whatever you want. And then it's going to go through the installation process. This is going to take a while. So, once that's done, you can see that you can go and use a couple of these different commands to run your application. First, you need to make sure that you are in the proper folder. So let's do a cd reactgraphql. Now we're in the right folder and we can use any of these commands right here. Now I want to go ahead and open this up in my editor instead of running the NPM start command from here. So I'm going to open this up in visual studio code and I'll open up a terminal. You can go to the menu right here and select new terminal, or you can use the shortcut that is listed right here. So it's Ctrl + Tilda on a Mac and then issue the npm start command from here. I'll go ahead and run the app on another port but that may not be showing up in your project. And once you run that, you should see the application run. Your port might be different but it should pull up in a browser. And I've arranged that over here on the right hand side The README file has all of those commands when you first install it. However, in this project, you may notice that we are going to end up with some different looking, read me files when this project is done. We can see npm start and npm test, and if you want to create the application so that you can put it on a server by FTP net or for sale, or any other hosting company, you can run an npm run build command, and that will create an additional folder called build folder. That's what would go on the server. Well, there's one more thing I want to do right here before I get too far, I'm going to be creating a file that I do not want Git to track for me. And that file is going to need to go in this gitignore document. This document allows you to tell Git not to track certain files. And the file we're going to be creating is going to be in the source folder and it's going to be called db.js. So that's going to be a small change that I'm making here. Let's go ahead and save that and I'll go over everything that we've installed in the next video.