7.2 - Github API Component

We now want to see the data from our github_user.js file.

Create a file to present our user data. We are going to call that file, GithubApp.js. We will start with our imports.

Now at this time we don't have a component created named GithubCardList and that's fine, it's all apart of our road ahead. We are coding with intent.

import React from 'react';
import GithubCardList from './GithubCardList';
import { GithubUserData } from './github_user';

After we have the imports let's construct the rest of our component,

const GithubApp = function () {
    return (
        <div className="main">
            <div className="mainDiv">
                <GithubCardList cards={GithubUserData}/>
            </div>
        </div>
    )
}

export default GithubApp;

What type of componenet is this?

Functional Component

Next we will see how we can start to think about how to style the data accordingly.

You see in this line of code:

<GithubCardList cards={GithubUserData}/>

That we are passing the GithubCardList props. Then we set the value of the props with the data that is coming from our github_user.js file.