The idea of this application is pretty straight forward.
We have a course library with an amount of classes here that you can expand to see the course description, and you can add it to the schedule.
There also is a progress tracker that shows that you can only have a max of 5 classes and obviously 1 out of 5 is 20%, 2 out of 5 is 40%, up to 5 out of 5 is 100%, so you get the idea of the progress tracker. We also have the funtionality to clear the schedule.

So that's the entire app. I'm going to go through it again step by step a little bit slower.

We have a label, with a bunch of course options within these we have a description that will animate and show when clicked on.
When you hover on this there's going to be a button to add it to the schedule.

As you hover over the selected course, your cursor will change to a pointer.

Now let's talk about the pieces of our project. It's crucial for us to break up our app and think about it as individual components. For example, if you Google Thinking in react, You can pull up an example of components in the ReactJs Docs (link below). Now you don't have to read all of this but the idea is that you have got to think of the components in the app.

You can kind of see that in their example, there's a container component that's orange named FilterableProductTable, a search bar that is blue, a product table that is green, and so on.

In our application, you can see the same thing going down. If we look at the wireframe, you can see that it looks a bit different than our design, but the logic is the same, as are the components. We have some class components and some schedule components.

Now if we flip back over to our design, inside of our main app we'll have a grid, and this grid will have the Course Library component, and the My Schedule component, which we'll call library.js and schedule.js. Within these they're going to each have an H1 tag (with some styling of course), and a couple of unique components.The first component for libraries is going to be called libraryCourse.js, and that's going to be all of these objects here. Now you may think that we'll have a separate component for the description boxes, but it's actually going to be a part of the same component, just with a little different styling. We'll just hide the description initially, most likely using state.

Now inside of our schedule component, we'll have a component called scheduleCourse.js you see that it initially it says Empty Slot, but it will render the courses we've selected. It may look different, but both the empty slot and the filled one are in the same component. Plus we have a gradient and a progress tracker.

So let's generate our project. Open up your terminals, what we want to do is choose where we want to put it and I'm going to put it in my root directory. Then we'll run the command js-generate, and select react-redux, since we'll be learning a little bit of redux in this course, which I'll explain a little bit more when we get to it later in the project. I'll name my project schedule, and then cd into the folder. Once inside I'll run npm install. While this is running, I'm going to open up a sticky note to write down our components. If you are using Mac OS, I recommend you open up stickies as well, but if you are running something else just open up something that you can write down stuff.

Our first component is library.js, and inside of that we'll put libraryCourse.js, which will have it's own components. We'll have icon.js as a component instead of just making it in styles, so that we can use the icons from Font Awesome. However we will have a special arrow.js component that we'll build instead of using an icon. The next one is called actionButton.js, I'm probabaly going to change that later, but it'll work for now. Next we have our schedule.js component. Inside of that we have our scheduleCourse.js, and our gradient.js and progressTracker.js. So in total we have nine components in this application, and that's just our beginning estimate. We might even add or remove a couple depending on how complex it gets, but we're pretty safe in thinking that this is how it's going to go since it's a relatively simple application.

Component List

Components

- library.js
  - libraryCourse.js
    - icon.js
    - arrow.js
    - actionButton.js

- schedule.js
  - scheduleCourse.js
    - gradient.js
    - progressTracker.js

Now that we have that mapped out feel free to reference that as we go throughout the app. I'll be referencing it as well so if you didn't write it down, it doesn't really matter.

Now that we have npm installed, lets open it up. If you are using VS Code you can use the code . command in your terminal to open it up. If you are using sublime or a different text-editor without a built-in terminal, make sure you keep your terminal window open. Next lets change our .gitignore.example file to just .gitignore. Don't worry about what's already written inside of the file right now since it doesn't matter much for us. Next we'll open up our src folder, and inside of static we'll open up index.html. We are going to change the text inside of the title tags to read Course Schedule.

I'm not going to go through how all of this information is injected into the HTML and Bootstrap, since I covered it fairly well in the Birthday Countdown app. There's also a bunch of different calls towards redux functions, and I'll be explaining that very indepth since we haven't reached any of it yet.

Now we'll go back to src and open up the components directory. Inside of there we'll open up our app.js file and change the h1 tag to read Course Scheduler

Now I want to rename this app.js file to something else because so far throughout all of our applications we have just stuck with app.js but I want you to know that this doesn't have to be named that. The first thing I want to do is basically get rid of the export default and put it at the bottom so you know that you don't have to have it at the top, since it's not exclusive to app.js, since in most of our components we export it down at the bottom.
Your file should now look like this.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Course Scheduler</h1>
      </div>
    );
  }
}

export default App

Now let's go ahead and give this a className and let's call it home, and change the class to be called Home

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div className="home">
        <h1>Course Scheduler</h1>
      </div>
    );
  }
}

export default Home

We may think that this will just work now, but it doesn't because in our bootstrap.js we're still trying to import app, so go to your bootstrap.js in the src folder and rename to import Home from the ./components/home, and change it in the <Provider> tag to say <Home />

So let's rename our app.js file to home.js.

Now that everything should be up and running, let's go ahead and start our server by opening up the terminal, and running npm start. If you still have the Birthday Countdown app running, or a different app, you can either close out of it or you can change the port for this app in the env.js file. Next I'm going to close out of the other files and just leave home.js open for the next video. Let's test this out in the browser and go to localhost:3000 and it should say Course Scheduler up at the top.

Excellent. Let's commit our code and move on to the next video.
I'm going to open up a new terminal instance so I can keep my server running and I'm going to say git init, then we run git status. Make sure that your .gitignore is not labeled .gitignore.example. Now we can add our files with git add . and lets commit it with git commit -m "app setup".

In the next video, we are going to setup our repositories on GitHub and Heroku, and we'll make our first push to them.

See you then.

Resources

Code for this Video

Thinking in React