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.
Top comments (0)