So what we're going to do in this video is start building out the newsletter container component, because in our design what you'll see is that each one of these tabs contains a bunch of components. So we want to create a container component to contain all of these little components. This plus button, this box, this bigger component, and this archived component which contains list components.

So this will be pretty quick. All we have to do is basically put a grid together so we can align all these onto the grid. So let's go in here and get rid of the H4 because we don't want that to be our component.

Let's create a new folder in components, and let's call it newsletter. Let's create a new file in newsletter, and call it newsletterGrid.js. In here we're just going to import React and component from react and write out a base component.

newsletterGrid.js

import React, { Component } from 'react';

class NewsletterGrid extends Component {
    render() {
        return (
            <div className='newsletter-grid'>

            </div>
        )
    }
}

export default NewsletterGrid;

Let's go to our dashboard and import it, and use it as our component now. I've auto-imported it, so make sure to import that.

So that should display that now. Let's just write some content in here just so we can see it. Let's check it out in Chrome. Log in, and you'll see that nothing really displays.

So let's find out why. We're returning it, we're exporting it, we're importing it, and it's right here. That's because we're not actually displaying it as JSX. So let's say:

dashboard.js

component: <NewsletterGrid/>

Let's put it as JSX, like we are doing with our H4, instead of writing something like h4. We have to say <h4></h4> like JSX, and put this in like JSX. It's J6. So you should have your text in there now.

Now let's go to Firefox, and look at it. So if you go to it you'll realize there is no grid. You'll see that there's no grid. Let's just open it up our html here, and see where it is. Dashboard tab, NAV, and tabs, and you got the component, and the component contains the newsletter.

So what we need to do now is put this newsletter grid on the tab NAV component where it belongs. So let's go into our code, and let's look at our tab-nav.scss. You'll see that we have two rows, content, and tabs. We have it aligned on the tabs, but we don't really have the newsletter grid aligned on content.

So what I'm going to do is I'm going to go create a file in style, and let's call it newsletter-grid.scss. In here will say:

newsletter-grid.scss

.newsletter-grid {
    grid-row: content-s/content-e;
    height: 100%;
}

Let's go to Firefox, and it's still pretty small. So what we need to do is give the component a height or the tab-nav a height of 100%. So let's go to our code, go to tab-nav.scss, and let's just say:

So you'll see now in Firefox it is filling up the amount of space it needs to fill. Let's go to our code, and get rid of the 100% that belongs in the grid.

newsletter-grid.scss

.newsletter-grid {
    grid-row: content-s/content-e;
    //height: 100%;
}

That looks good to me. Now, you'll see it kind of affects it but it doesn't matter because we don't really have a grid on this yet. So once we put a grid, we will need it. So let's put it back in.

So let's go to newsletter-grid.scss, and start developing a grid for it by saying:

newsletter-grid.scss

.newsletter-grid {
    grid-row: content-s/content-e;
    //height: 100%;
    display: grid;
    grid-template-rows: [s box-s] 16rem [box-e archive-s] 1fr [archive-e e];
}

Let's go ahead and check it out in Firefox, and the newsletter grid is not picking up that it is a grid. So let's go to our Firefox and reload the page. So it's still not picking it up. Let's go into main.scss and make sure we're importing this.

main.scss

//NEWSLETTER
@import 'newsletter-grid';

There it is. So let's select it, and you'll see that we have the box right here, and then we have the remaining content.

So now we need to do is put the columns. And so when you say 16, and then fill out the rest, and maybe some spacers. So let's go into our code. Let's go to newsletter-grid.scss, and basically all we want to do is:

newsletter-grid.scss

.newsletter-grid {
    grid-row: content-s/content-e;
    //height: 100%;
    display: grid;
    grid-template-rows: [s box-s] 16rem [box-e archive-s] 1fr [archive-e e];
    grid-template-columns: [box-s archive-s] 16rem [box-e newsletter-s] 1fr [newsletter-e];
}

Now let's look at it and you'll see we can put our archive here, our box here, and then the rest of our content here.

So what we're going to do first is develop each component and throw them in. We're not going to worry too much about the space because they're all going to be touching each other really closely at first, but once we get those all in: we'll throw in some spacing between each of these.

So that's basically our grid and now all we need to do is develop each component for this grid here. Okay. So let's go ahead and commit our code: git status, git add ., git commit -m "built the the newsletter grid component and grid". See you in the next video.

Resources

• Source Code