From the course: React Hooks

Installing Create React App - React.js Tutorial

From the course: React Hooks

Start my 1-month free trial

Installing Create React App

“

- [Instructor] One of the most common tools for creating a new React application is Create React App. Create React App will give us a React project structure, the ability to use the latest JavaScript features, and tools for optimizing your app for production. To get started with Create React App, you need to do a couple of things. So first we need to open our terminal. So we're going to type node -v. This will let us know what version it is. As long as you see something higher than 8.10 then you can use Create React App. The next thing I'll check is NPM. NPM is the Node Package Manager and we want to make sure that this is version five, six, or higher. If you don't see those versions, you can always go to nodejs.org and download the latest. Now that we know that we have the correct versions, what I need to do is I want to get into a folder where I want to run my project. So I'm just going to CD, change directory to the desktop, and then I'm going to run Create React App using this command called NPX. So NPX is a package runner that comes with NPM that we can use to run something like Create React App without having to install it globally on our computer. So this is really nice. So we'll use NPX create-react-app and then whatever the name of the project is going to be. So I'm going to just call it react-hooks. This might take a little while to install. Now that that's installed, we can change directory into the react-hooks directory and then run NPM start. NPM start is going to start our project on local host 3000. So this should pop this open in a new browser window. We can see the starter project running right here. Now if this went really badly for you and maybe it didn't fully install, or your screen doesn't look like this, or you got a bunch of errors, something that you can do is you can go to a new window and type react.new. So react.new is going to open up a code sandbox, which is an in-browser IDE that you can use for React development. So if you'd rather follow along in something like this, you can. You will sign in either using your GitHub or your Google account. So I'll sign in with GitHub here. And it's going to make me do everything to sign in. So now that I'm logged in, I can start to make some changes, hello world. And as soon as I do that, we're going to see that render in the output. So this is a really cool way to get started with a React project quickly. If you don't want to work with the files locally, you can always work with them here. As soon as you save it too, it's going to fork the sandbox so that you have your own URL to always refer back to. Whether you're working with the code sandbox here in the browser or if you're working with the project locally, you're ready to go. With this set up, in the next lesson, we're going to look at how to create a component.

Contents