Creating a portfolio App in React using the Github REST API
Published: 2023-01-11 12:29:05

In this article, we will learn how to create a react application that interacts with the Github REST API. Some of the libraries we will be using are `react-icons`, `react-router-dom`, `react-helmet` and `Error-Boundary`.

This project was created using create-react-app.
Before anything else, let's see how to install Create React App. The following command will create a new react project for us:

`npx create-react-app github-portfolio-app`

This will start the installation process for Create React App, which can take several minutes, depending on your hardware. Although we're only executing one command, the installer for Create React App will install the packages we need to run our React application. Therefore, it will install `react`, `react-dom`, and `react-scripts`, where the last package includes all the configurations for compiling, running, and building React applications.

To be able to open the project in the browser, we can simply type the following command into the command line, which runs package react-scripts in development mode:

`npm start`

**Creating reusable components**
React makes it possible for us to create custom components that we can reuse throughout the project.
First, lets create a `NavBar.js` component;

```
import { FaGithub } from "react-icons/fa"

function NavBar() {
    return (
        <div className="nav__bar">
            <FaGithub className="github-icon"/>
            <h1>My GitHub Portfolio.</h1>
        </div>
    )
}

export default NavBar;
```
**Implementing API fetch**
We need to create another component where we will implement the API fetch of our Portfolio. Lets call this component `Home.js`

```
import React from 'react'

const Home = () => {
return (
<div>
</div>
)
};

export default Home;
```
We will go ahead and import `useState` and `useEffect` into the `Home.js`. The `useState` hook will be used for storing variables that are part of our application's state and will change as the user interacts with our website. The `useEffect` hook allows components to react to lifecycle events such as mounting to the DOM, re-rendering, and unmounting.

```
import React, { useState, useEffect} from 'react'
```

We will create a function named `fetchRepos` in the `Home.js` that will get data from our GitHub repos API and then save it in a state named `user`. Then we create another function named `userInfos`. This function will return our mapped data that we got from the github API response. 

```
import React, { useEffect, useState } from "react"

function Home() { 
  
  const [user, setUser] = useState([])

  const fetchRepos = () => {
    fetch(`https://api.github.com/users/Ajoke-Amupitan/repos`)
    .then((response) => (response.json()))
    .then((data) => {
        setUser(data)  
    })
  }

  useEffect(() => {
    fetchRepos()
  }, []) 

  const userInfos = user.map((userInfo) => {
        return (
            <div className="repo-card" key={userInfo.id}>
                <h2 className="repo-name">{userInfo.name}</h2>
                <p className="language">Langauge{userInfo.language === null ? "none" : userInfo.language}</p>
                <p className="date">Start date & time: {userInfo.created_at}</p>
                <p className="visibility">Visibility: {userInfo.visibility}</p>
            </div>
        )
  })

  return (
      <>
        <section className="repo-container">
            {userInfos}
        </section>
      </>
  )
}

export default Home;
```

**Conclusion**
In this article, we've been able to create a react application that gets some data from the github API and displays the data for the user to see on the User Interface. We also implemented several features and third part libraries.

Tnanks for taking the time to read through this article and I hope you loved it.