Welcome back to the course. In our last guide we setup our gradient class, and in order to make things run smoothly with styling, What we will do instead of styling each on of these things in detail, is first build out all of the functionality with a grid.

The approach we're going to take is to first, putting the grid together for each of our pieces, and will put them together along with our grid. we have to build the components to layout the grid correctly. Once we have that in place, we will build out our functionality, and once it is completely functional, then we will throw in the rest of our styles.

Let's go ahead and start in the course Library by building out our next component, the libraryCourse.js component. We'll close out of all of the files except for library.js. Inside of our library directory let's create a new file named libraryCourse.js. We'll import React and Component.

libraryCourse.js

import React, { Component } from 'react';

Then we'll create a new class named LibraryCourse with a render function that returns a div tag.

libraryCourse.js

import React, { Component } from 'react';

class LibraryCourse extends Component {
  render() {
    return (
      <div>

      </div>
    );
  }
}

We'll give the div a className of library-course, and then export the class at the bottom of the file.

libraryCourse.js

import React, { Component } from 'react';

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">

      </div>
    );
  }
}

export default LibraryCourse;

Within this library course we're going to have a few items. We'll have a title, an icon, an arrow, a button. Earlier in our notes, we had said that we wanted our icon, arrow, and button to be components, but the icon would Font Awesome, while the arrow was to be made with CSS. Overall it will be 3 components and a title, with the course description in a div tag.

So lets build it. Inside of our div lets put a label with a className of library-course__title, and we'll call it Problem Solving for now, since we will be getting data through redux, which we'll talk about later, after we've built out all of our functionality.

libraryCourse.js

import React, { Component } from 'react';

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">
        <label className="library-course__title">Problem Solving</label>

      </div>
    );
  }
}

export default LibraryCourse;

Then we'll add some comments to show where our other components go for now.

libraryCourse.js

import React, { Component } from 'react';

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">
        <label className="library-course__title">Problem Solving</label>
        {/* icon component */}
        {/* arrow component */}
        {/* action button component */}
      </div>
    );
  }
}

export default LibraryCourse;

Next we'll put in a div with the className of library-course__description, and put a label that says Course Description

libraryCourse.js

import React, { Component } from 'react';

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">
        <label className="library-course__title">Problem Solving</label>
        {/* icon component */}
        {/* arrow component */}
        {/* action button component */}
        <div className="library-course__description">
          <label>Course Description</label>
          <p></p>
        </div>
      </div>
    );
  }
}

export default LibraryCourse;

Now lets open up our browser and look up Lorem Ipsum to pull up a generator (link below). Lorem ipsum is just dummy text, or filler words. Let's hit generate and select part of the first paragraph, to keep things small. Then we'll paste it into our paragraph tag.

libraryCourse.js

import React, { Component } from 'react';

class LibraryCourse extends Component {
  render() {
    return (
      <div className="library-course">
        <label className="library-course__title">Problem Solving</label>
        {/* icon component */}
        {/* arrow component */}
        {/* action button component */}
        <div className="library-course__description">
          <label>Course Description</label>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla facilisis mi, non pellentesque metus consectetur vel. Quisque dictum, lectus vitae dignissim tincidunt, sapien nibh placerat diam, quis blandit enim nulla in felis.</p>
        </div>
      </div>
    );
  }
}

export default LibraryCourse;

Now let's go into our main.scss and create a grid. We'll create a new file in the style directory and call it library.scss. At the top of main.scss lets import it underneath variables.

We'll then cut the .library section from main.scss and paste it into library.scss. which should now look like this.

library.scss

.library {
  grid-column: library-s/library-e;
}

Now we want to create another file, named libraryCourse.scss, and will put .library-course in there with display: grid;, columns, and two rows, one for the main content and one for the paragraph. Your file should look like this:

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, ifr);
  grid-template-rows: 1fr 1fr;
}

Next we'll layout the items in the grid. We have title and description.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, ifr);
  grid-template-rows: 1fr 1fr;

  &__title {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

Okay let's go ahead and put this into our library.js file. We'll import LibraryCourse from ./libraryCourse, and then we'll add a couple of them down below our h1.

Now if we go to our browser, we can see all of our content here, but we'll probably want to put a grid in here, so we can have mor space for our title. Open up library.scss again and add:

library.scss

.library {
  grid-column: library-s/library-e;

  display: grid;
  grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
}

That should be good. Lets check the browser. Looks good. Let's go ahead and commit our code and continue on in the next video.

git status
git add .
git commit -m "built library course component with grid and library grid"
git push

We'll see you in the next video.

Resources

Code at this stage

Lorem Ipsum generator