Setting up a React project - React.js教程

- [Instructor] All right, so now that we're a little bit more familiar with React and why it's going to be so helpful in creating a front end for our full-stack application, the next thing that we're going to do is see how to create a new React app. Now, the fastest way to set up a React app from scratch is by using a generator, and the one that we're going to use here is going to be called Vite, or Vite, as the site suggests you pronounce it. It's apparently French for fast, so what we're going to do here, I'm going to start off with this directory here, and if you don't have the same files as I have here, don't worry too much about it. These are just basic files from the GitHub repo that I'm going to be using. You can start with an empty directory if you want, and inside that empty directory, what you're going to want to do is open up a terminal, which you can do in Visual Studio Code or Codespaces by going to Terminal, New Terminal, and inside this terminal, you're going to run the following command. You're going to say npm create, and then you're going to say vite@, and the recommended way of doing this for production purposes is to say @latest 'cause that will use the latest stable version to do this, but in order to make sure that you can actually use the exact same version, and in order to make sure all of the commands that I'm going to show you from here on out work for you, I'm going to suggest that you use the same version as I'm using here, which is 5.5.2, so you're going to run this command, npm create [email protected], and this is going to ask you some questions here. It's going to ask, first of all, is it okay to proceed? And I'm going to say yes, and then it's going to ask us what we want to name our project. I'll just expand this here a little bit. We can name this whatever we want, but in order to really emphasize the differentiation between the front end and back end, I'm going to call this front-end for the project name. The next thing it's going to ask us is to select a framework, and I'm going to select React here. You can actually create apps of plenty of other types, such as a Vue application, a Svelte application, just a vanilla JavaScript application if you want to, but obviously, since this is a course about full-stack React, we're going to choose React. Next thing it's going to ask us is if we want to use TypeScript or JavaScript. Just to keep things simple here, I'm going to use JavaScript, but if you're a fan of TypeScript, feel free to use that here instead, and now that we've done that, what Vite has done for us is created this whole front-end directory with lots of useful files inside of it that make up our React project, so if you take a look inside of here, and specifically, inside the src directory, you're going to see that we have a React component all ready to go called App.jsx, and if you run this application, you'll actually see what this is. It's just a basic boilerplate page that you can use to test and make sure your setup is working, so in order to do this, right? Now that we've created our React app, let's actually run this thing and take a look at it in a browser. What you're going to need to do for that is, first of all, install all of the dependencies. Vite does not do that for you, so we're going to change directories into the new front-end directory we just created, and then we're going to say npm install inside of there, and again, that's going to install all of the npm packages that this project needs in order to run, among them, of course, things like React, all right? And that's going to run for a little bit, but once it finishes, we should be able to run our project now, and the way that we do that in a project created using Vite is by saying npm run dev, and once again, make sure that you're running this inside this front-end directory, not in the surrounding directory, so I'm going to hit Enter, and sure enough, that will start up our app, and as you can see here, it's running on localhost:5173. Now, if you're using Codespaces here as I am, the process is going to be a little bit different than if you're running it locally. If you're running it locally, you can just open that right up by opening a browser and typing in HTTP whatever this URL is here, right? However, in Codespaces, because this isn't actually running on localhost on our own computer, you're going to need to go to PORTS in your bottom pane here, and if you take a look at Forwarded Address, you're just going to want to click on the little globe icon next to that, and that's going to open up your application in another tab, and sure enough, we see the new React application that the Vite script generated. It's got Vite + React. It's got the two icons, and they have this neat little hover effect, and if you click on this button, it keeps track of how many times it's been clicked, so the last thing that we're going to do here is I'd like to demonstrate something for you that Vite does for us that is going to make this application much easier to build, so if we go back into our editor here, all right? We're going to open up App.jsx, which is the component that we're seeing there, and let's just make a change to some part of this. You can really change any of the texts that you want on the page. I'm going to add, after this message that says Edit App.jsx and save to test HMR. I'm just going to say Just did! And if we save this file and go back to our app running in the browser, sure enough, we see that that's automatically updated. This is known as HMR, or Hot Module Reloading, which basically just means that our app can update to incorporate changes without restarting. It's, as I said, going to make this much easier to build our front end.