OK. So let's go ahead and start implementing the next set of features we want to introduce into our application. If we look at our design you can see that we have a tab for Newsletters and Requests,

What I want to do is show you how we can implement this, and then render components based on the tab we have selected. The way we're going to develop this is pretty interesting, because it will be reusable, so we can put in a whole bunch of different tabs if we want. We're obviously not going to. But the point of this course is to teach you how to program not just build one specific app or eight specific apps, it's to show you how to build components and use the react framework so you can actually build other applications so by doing this.

The first thing I want to do is in components, let's create a new component and let's call it dashboard.js. So let's take this dashboard component out of bootstrap.js and throw it into dashboard.js along with copying the import from the top of the file.

dashboard.js

import React, { Component } from 'react';

class Dashboard extends Component {
  render() {
    return (
        <div>
        hey there
    </div>
    )
  }
}

export default Dashboard;

All right. Next thing I want to do is import dashboard in our bootstrap.js, because we currently aren't using it.

This should be working. Let's go see the browser if it's still rendering our dashboard. We login, and it looks good. Now what I want to do is start developing a component for our dashboard called tabnav and I want to call it tabnav because it's going to be like tab's for navigation.

So let's go ahead and start that by going in and by creating a new component in our components directory here and that's just called tabnav.js. And then we're going have the same kind of configuration as dashboard.js, which is just a basic react component, so I'm going to copy the dashboard, and place that in tabnav.js and just change it to TabNav.

Now what we want to do in this component is accept a couple of objects that we're going to create. So it's going to get a little confusing. What these objects are going to contain are a title, a state of active, and a component. So we want to do is provide a couple object more to provide a newsletter and request, and say are they active and what components do they contain, one contains a newsletter of course and the other one contains requests.

OK so let's go ahead and start by going in a render function

tabnav.js

import React, { Component } from 'react';

class TabNav extends Component {
  render() {

    var JSX = [
        <h1>TABS</h1>
    ]

    this.props.tabs.map((tab, index) => {
        JSX.push(<h2>{tab.title}</h2>);
    })

    return JSX;
  }
}

export default TabNav;

So obviously this isn't how we're going to be doing things eventually, but I just want to get you the understanding of the data we're passing and before we do anything with it. But this is definitely not how we're going to be rendering things later on.

Let's go to dashboard.js and in here we need to provide some caps. And the reason we're doing it in here is because we want this component to be reusable across other apps and components. We are specific with this application. The idea is if you're working for a company and you're building components, it's extremely likely that they will want you to build components that you can use in the application elsewhere.

Most jobs are going to be bigger than this and you can already see in this app that things are being reused all over the place, like titles, our page formatting, and the buttons that're on almost every page. Basically you want to make components reusable.

All right. That's the whole idea of components. So by putting the Tabs in here we can say "Hey, let's use this tab now in a different file and provide some different tabs, like users, or notifications".

So let's go into our render function in `dashboard.js.

dashboard.js

import React, { Component } from "react";

class Dashboard extends Component {

    constructor(props) {
        super(props);

        this.state = {
            tabs: [
                {
                    title: 'Newsletter',
                    active: false,
                    component: <h4>Hey There - Newsletter</h4>
                },
                {
                    title: 'Requests',
                    active: false,
                    component: <h4>Hey There - Requests</h4>
                },
            ]
        }
    }

  render() {
    return <div>hey there</div>;
  }

}

export default Dashboard;

Those are items now with the way we're putting this component in. It's not really going to make sense with what we're doing in tabnav.js, so let's refactor that a bit, and instead of pushing tab.title, let's just render the component instead.

tabnav.js

import React, { Component } from 'react';

class TabNav extends Component {
  render() {
    var JSX = [
        <h1>TABS</h1>
    ];

    this.props.tabs.map((tab, index) => {
        JSX.push(tab.component);
    })

    return JSX;
  }
}

export default TabNav;

That should be good. Now what I would like to do is go back to dashboard.js and actually get the data in that component to render. So right now it's still just going to be displaying 'hey there' when we login. Let's have it actually render our tabnav. We'll import TabNav and then pass our information to the component.

dashboard.js

import React, { Component } from "react";

import TabNav from './tabnav';

class Dashboard extends Component {

    constructor(props) {
        super(props);

        this.state = {
            tabs: [
                {
                    title: 'Newsletter',
                    active: false,
                    component: <h4>Hey There - Newsletter</h4>
                },
                {
                    title: 'Requests',
                    active: false,
                    component: <h4>Hey There - Requests</h4>
                },
            ]
        }
    }

  render() {
    return <TabNav tabs={this.state.tabs}/>
  }

}

export default Dashboard;

All right, now we'll check the browser, and we can see that we have 'hey there - requests' and 'hey there - newsletter'. You'll also see 'TABS' up in the corner.

So it's kind of all over the place because we don't really have a grid. We don't really have these placed where we want them to be. So what we need to do is basically provide a grid on our TabNav. OK. We need instead of rendering tabs like we are, we want to render them in a div and render them properly.

OK. So let's go ahead and commit our code and then hop into that in the next video.

git status
git add .
git commit -m "built tab nav structure"

See you in the next video where we will continue building out this component and laid on a grid.

Resources

Code at this stage