So to get started, in your components directory go ahead and type in courseLibrary.js and in here go ahead and set up the base component that we always set up. If you remember, go ahead and try to do that, if not just feel free to follow along. Import React from react and make sure you import component as well. Import React component from react and lets type in our component so export default class CourseLibrary.

import React, { Component } from 'react';

export default class CourseLibrary {

}

And if you remember the other way to export the component go ahead and do that now before I get around to it. So I'm going to type out the render function and I'm also going to type out the constructor because we'll be using that and I always type out the props just to keep the habit of it. So in hand let's return here a list since we are going to be having a list of items and make sure to wrap that in parentheses.

import React, { Component } from 'react';

export default class CourseLibrary {

    constructor(props) {
        super(props)

    }

    render() {
        return (
            <li>

           </li>
        )
    }
}

Now, if you go to our app or if you look at my screen or go to the design you'll notice that we have a list going on here so that's why we're typing out a list and you might think OK we can use these all as separate components which is true. We could have a component called course and do it that way. But in order to get into redux as quickly as possible we're just going to use the functional method where we just return some JSX and later on we'll be implementing a course component of its own.

So go ahead outside of the list below the constructor above the render function lets type out a function called renderCourse and lets return a list item. And my bad make sure this is a UL for your list here and in here we want this to be a list.

Go out and find this function, since we will be using this keyword in there eventually so this.renderCourse is equal to this.renderCourse.bind(this);.

this.renderCourse = this.renderCourse.bind(this);

OK now in here let's actually pass in a parameter so let's call it course and this is going to be a javascript object. So in our list if you in brackets typed this.renderCourse and pass in an object we want to give this a title and a description so if I've been going too fast just kind of look at this and understand what we're doing. We are passing in a javascript object that's going to have a title and a description. And after we do this in the next guide we're actually going to implement this with redux. I'm just showing you how we can do it like we've been doing things immediately so that you can bring your knowledge from there to redux rather than just diving into redux. So in this object this course object we want to give it a description, actually let's start with the title and for the first title we want to leave this blank so we can copy and paste it so we have a title and then we need a description and leave that blank as well.

{this.renderCourse({'title': '', 'description': ''})}

Now, copy the above line two more times and then go below into the guide resources and you'll be able to copy and paste these descriptions and we're not going to do it like I did it. I don't want to keep this title in here since it's up here. So make sure you just get the description and throw it in and you'll notice it doesn't work.

And that's because we have an apostrophe here and we can use a backslash right before that so we can use that to fix it.

And the reason that breaks it is because it reads that has the end of the string so if I delete that you'll notice that's the end of the string immediately, but put a back slash and that will fix that. Now let's go ahead and copy the title, throw that in there and you'll notice it breaks just make sure it's on the same line and do the same thing for UX for developers. I don't want the title there I'm going to paste that in there.

There is no apostrophes in here so we don't need to change it up and then I just want copy over the title which is UX for developers and throw that in the title there, make sure it's on the same line and we should be good to go. And as always this code is in the guide notes below. So copy paste this over if you have trouble following along there. All right now what we're going to do is in this list tag we want to first wrap parentheses around this so it will work.

Now in here, I want a couple of divs, the first with a class name of course_title. And the second with a class name of, you guessed it, course_description. In the list tag we actually want to give this a title of course, all right and let's go ahead and this isn't just going to be containing the title this is actually going to be containing our checkmark, our up and down, and our add and remove.

So let's call this course_info, and then in here, let's type out a div and give it a class name of course_title-container and in here we want to give it a div and we want to put the title in here so course.title and this is coming from the course object which has title which is going to get these titles. And let's just give this a class name of course-title.

renderCourse(course) {
    return (
    <li className="course">
        <div className="course_info">
            <div className="course_title-container">
                <div className="course_title">>{course.title}</div>
            </div>
        </div>
    </li>
    )
}

Now, I'm trying to think if there's any other set up we need to do here besides the description, and there's not. So let's go ahead and let's stick with this for now so it doesn't get too confusing if it hasn't already. Let's go ahead and put in the description so coarse_description and in here we want to just put like an h6 and give it a class name of course_description-title and in here it's going to be the course description. Well this will be the title of course description and then below this is going to be this course description.

And blow this we want to put in a paragraph tag that contains our actual description so course.description. OK, save that go back to the browser and let's see what we're getting, reload the page and we're getting nothing and that's because we haven't included this in our app, real quick in the course library component I'm going to move this export default to the bottom and we also miss another thing. If you're catching that before I tell you go ahead and type that in (export default CourseLibrary;). And that is extending the component class, so extends Component

and just for our throwback here if we are to remove that we'd have to type in React.Component. Let's try it out because I thought that was the syntax, maybe this theme is just throwing me off a little bit. All right so let's import in our app.js let's `import CourseLibrary from ./course library.

import CourseLibrary from './courseLibrary';

Let's utilize this component right after our h1 so Course Library close that off and reload page and it works.

import React, { Component } from 'react';
import CourseLibrary from './courseLibrary';

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Course Library</h1>
        <CourseLibrary>
      </div>
    );
  }
}

Okay, so yeah if we don't include component up here in the import we have to extend it from reactor component but I don't like that and nobody does. So lets just type in import React component from react.

Okay, we're all set up, we have our description, our title, and in the next guide, we'll actually instead of diving right into redux. I did a little bit of styles so we can view this a little bit better because this is a little confusing and that's how we're going to be approaching the rest of this app is we are going to be adding in a few styles every now and then, but not so much that we're going to really see the nice design until the functionality is done.

Once the functionality is fully implemented with enough styles in there that we will be able to see what's going on and will be able to show and hide certain things such as the add and remove and a few other things and the dropdown here so we are adding in certain styles but we won't be fully styling this app until we get done with the functionality specifically the redux side of things since we need to understand this.

If that's the main thing you get out of this project it's just to understand the basics of redux, so that's the main goal here. In the next guide we will be getting into a little bit of styling and then we will move on to the redux side of things and see how we can implement this using redux.

So let's go ahead and comment or code so git status and it looks like we haven't initialized our repository.

Let's go ahead and type git init, git status and before you do this please make sure your node modules are not in here. Please make sure they're not in there. All right, so the way you do that is obviously we named .gitignore.example to .gitignore and I'll include this in the guide notes so you can make sure that you have that, even though you probably already have it.

Okay, so git status, git add, git comment -m "setup project and cours library componet". Okay, and we're not going to push it since we haven't initilazed it with git. in a couple guides we will be setting up our project on github, if you remember how to do that go ahead and do that without me. And I'll actually just skip that we're not going to do that toghther because you should know how to do that by now, if you don't now's the time to learn by doing.

So go ahead and before moving on actually just go ahead and put this up on github so you can push it. You'll notice if you try it now it's not going to work unless you've already set it up. So go ahead and set it up and then the next guide we will style this a little bit like I've said a thousand times and we will be ready to go. I will see you in the next guide.

Code

"title": "Up and Running with Redis", "description": "In this course you'll learn how to work with the efficient Redis database to manage key value relationships."

"title": "UX for Developers", "description": "This User Experience(UX) course examines how to develop a system for approaching application development and enhancing the experience for users."