Create React App generates a full project and can be installed on your computer to set up a React project from any folder at any time using the create-react-app command.
- [Instructor] Now that we have create-react-app installed, we can use the package to generate our own React project. So in the terminal or command prompt, we want to navigate to a folder where we can generate the project, and work with it throughout the course. This could be your exercise files folder, or you can just place it on your desktop. Okay, so let's get into that folder. We'll look at the desktop. We'll get into exercise files. We'll get into chapter two.
And then finally, I will navigate into 02_02/start. Okay. So now I can run the command create-react-app. Now this command is going to generate a project, and it'll generate the project by name, so we'll pick a name here, react-is-fun, that'll be our Hello World, to get us started. And as soon as I hit enter, it'll set to work, installing all of these packages.
Okay, so create-react-app gives us a few instructions here. The first instruction is to navigate into the react-is-fun directory, and then we can run npm start. Now once I run npm start, this is going to open up a browser window, where our React project will be running at localhost:3000. So it might take a second to load up, but we'll see that the spinning React logo means that this is now working correctly, and we should be ready to start our development.
So with our project running, we can open the files. I'm going to do so using VS Code. And if I navigate into the 02_02 directory, we should see the react-is-fun project. So let's explore what is going on here. If I open our package.json file, you'll see that there are a few dependencies installed. There's react, there's react-dom, and there's react-scripts. Now react is what will allow us to create components and use the React library. React-dom will be everything needed to take those components and place them in the dom, so to actually render them to the page.
React-scripts is where some of the magic happens. This is what's handling all of our transpiling of new syntax into browser compatible syntax. We also have webpack going on, and all sorts of stuff behind the scenes. So react-scripts is taking care of that for us. Now what's responsible for rendering that spinning React logo to the page? Well, that can be found in the src folder. So everything that is in the src folder is really where we're going to work.
This is where we're going to make any changes to the React files that we need to make, and this is where we'll create our components. So our project is set up, and in the next video, we'll actually start writing some React code.
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering