From the course: React.js: Building an Interface

Installing requirements

- [Instructor] Let's take a look at the tools we'll need to get started installing a React project with Create React App. Now before you get started, you'll need to have some tools pre-installed on your computer to work on this project. First, you'll need a copy of Git installed. A Git is a version control system that lets you keep track of and collaborate on 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 the project. A couple of optional tools will also make your life easier. First, I highly recommend that you install the React Developer Tools. They allow you to inspect what's going on with React in real time. I'll be using Visual Studio Code for this project, so there's a couple of extensions that will really help. The first is a series of React Snippets that will make your life easier when working with React. The second is a series of snippets for JSX, the language that React projects are based on. You can create a React app with a tool called Create React App. It's a much simpler way to create projects, but it does require that you have npm, which comes with Node.js 5.2 or higher. If you have a previous version of the Create React App project, you can uninstall it with the command seen here. Otherwise, you can use your terminal application to run the following commands. First, I like to put my projects on the desktop but you can put them wherever you want. Then you'll use an npx and then use the Create React App command and give your application a name. I'm going to call mine reactinterface then we'll switch over to the reactinterface folder and run npm start. Let's go ahead and try that in a terminal. I'm using a hyper right here but you can use the macro S terminal, Git Bash, or any other tool of your liking. So I'm going to issue a cd~/Desktop, that will put my terminal in the desktop and then I'll use the npx create-react-app and create the reactinterface project. I'm going to hit return, wait for the installation to complete. Once that's done, you can see the different commands that you can use. If you see yarn, that means that you have another application called yarn. You can look for that, or if you have npm, you can use npm, but you can use any of these commands that you want. I'm going to cd into the reactinterface folder, and once in there I can run the npm start command, or you can run yarn start. Now, if you do have something running on the default port, like I do, it's going to ask you this, just go ahead and say yes, and it'll start your browser with the sample application showing.

Contents