Generating the Class Scheduling Application Project
Hi and welcome back to the react course, let's go ahead and generate our project.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So go ahead and open your terminal and go to where you want to place your project. I'm just going to store mine on the desktop so I'm going to change directory to the desktop and I'm going to type in JS generate and the template we're going to use is react redux since we will be learning about redux in this app.

large

I'm just going to name it CourseSchedule and that's how we can generate a project. Let's go ahead and open it up in Visual Studio code or the editor of your choice. So I'm going to open up that and I'm going to hit command J and I'm going to go to the terminal and type in npm install.

large

and once that is done I'm going to type in npm run I believe, or NPM start. All right, so let's just wait for this to finish up. And while that's installing let's just go ahead and rename our .gitignore.example to .gitignore. Okay so NPM should be installed now, I'm going to go ahead and type in npm start, that should start up our app and it says, I believe I'm running another app on the same port. So I'm just going to go ahead and stop that. Yours should be working. If you are running an app on the same port just go ahead and close down that app and start back up so if your other project.

If the birthday countdown app, since we did this app right up right before this, if that's still running just go out and stop it so you can start this one. All right, so I'm going to start it. I'm going to open a new terminal window and we should be good to go. Go ahead and test it out in the browser. So I'm going to localhost:3000 and it should be working. We opened up components/app.js and in here I'm just going to type in course library like you see in our example.

All right, so that sets up our project. In the next guide, we will be diving into our first component which is the component you see here which contains all of these course options so that is going to be called the course library. And then we have our schedule component here and then a component within each of these. So let's go ahead and get started with the course library component in the next guide. I will see you then.