Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

2.1 Create the React App

The next thing that we're gonna do is actually create our react app. Now there's a number of different ways that you can do this. You can do it from scratch, you can use utilities. And the way that I like to actually do this is by using a command line utility or Command Line Interface CLI, that has been created by Facebook called the create react app. Very Name if you ask me. So basically what this is, is a, like I said before, it's a command line interface, a command line utility that will allow you to very quickly and easily create react apps with one single line. Now, there's a couple different ways that you can do this like any other package that you can install with npm which we already installed if you have node installed because it comes with node. Is that we can go ahead and install it globally on our machine if we choose via the npm install command, or we could use npx, which is kind of a remote package installer utility that comes with npm 5.2 and above, as you can see right here. That actually allows you to kind of bypass the global installation step and really just use those packages that are off. In the repositories and just use them locally if that's what you would like to do, and that's how I like to do it. So here's what I'm gonna do. I'm actually gonna copy this line right here. Let's go ahead and copy that. I'm going to open up my terminal. You can use any terminal that you want. I'm gonna paste that line in there, and I'm gonna change the name here. And since we're basically creating a kind of a Hangman style clone, I'm gonna use the command npx create-react-app, and we're just gonna call this Hangman. So this is going to go ahead and download the create-react-app, it's going to install the package, it's going to run it. It's going to create a new react application for me that I can them find in the Hangman directory on my desktop, and then go ahead and get started so very quickly you can see it's going to give you some information about what you can do to actually get this up and running. So as you can here you can go ahead and use yarn to get this up and running. You can use yarn start, yarn build, yarn test, yarn eject, and you can also use npm honestly. And that's what I'm gonna use in this course, but you can use yarn you can do whatever you would like. So let's go ahead and clear this out, as you can see on my desktop I have a Hangman directory, so let's go ahead and go in there. And you can go ahead and take a look at this, and we'll dig through this a little bit later and we're actually gonna do a lot of modifying of what's in here. But right now if you just want to see things up and running, you can say npm start. And what this is going to do is it's going to start up the application and watch the files within that directory so that you can make modifications and it will update the page on the fly. And if you've done everything correctly, then you're going to see this right here you're going to see this kind of default react page that you get using that create react app. And it gives you a little bit of information. If you want to make changes to this, you can go ahead and edit this App.js file in the source directory to go ahead and make modifications to this, and one again, like I said, because npm and As well is going to have a watcher running in the background, whenever you make changes to these files and save them, it's going to reload this page for you. We're going to take advantage of that in the future.

Back to the top