DEV Community

Vik 📈
Vik 📈

Posted on

Using github api with react

So you might have some experience of working with api. Its pretty fun and helps you a lot to build you skillset, and if you dont have any experience then after reading this blog, you will surely have.

In this blog we gonna build a github user searcher website. You can search for github users and it will display their info. You can choose what information you can display.

Image description

Donations are Very much appreciated

so this is how our User Interface will look. I am not gonna teach to make the UI as its pretty simple and easy. You can copy the css file from the github repo.

For this tutorial you wont need any libraries.

import {useEffect, useState} from 'react';
Enter fullscreen mode Exit fullscreen mode

We are importing useEffect and useState as it is necessary in this case.

const [githubData, setGithubData] = useState([])
const [githubUser, setGithubUser] = useState("vikstack")
Enter fullscreen mode Exit fullscreen mode

right here we are simply defining githubData ( this is an array ) so we can store out data returned from our api. The second useState is for the user we are searching for, we will change it later, you can define a default value, like I did as my github username.

const fetchData = () => {
  return fetch(`https://api.github.com/users/${githubUser}`)
    .then((response) => response.json())
    .then((data) => setGithubData(data));
}
Enter fullscreen mode Exit fullscreen mode

A simple function to get the json data from our api https://api.github.com/users/[username] // you can open and check whats in this url and then setting githubData and the response data from our api.

useEffect(() => {
  fetchData()
}, [])
Enter fullscreen mode Exit fullscreen mode

Well everyone knows what does this do, but for the beginners, we are just calling fetchData function inside a useEffect so that when a user enters our website, it will fetch the api.

// these code are inside return()
<input type="text" placeholder="Search for User" onChange={(e) => setGithubUser(e.target.value)} className="input_search" />
<button onClick={fetchData} className="search_button">Search Github</button>
Enter fullscreen mode Exit fullscreen mode

This code just set the githubUser as the user we want to search for and from the button we will fetch the api again for the new user.

<img src={githubUser.avatar_url} height="100" width="100" />
<p>{githubUser.name}</p>
Enter fullscreen mode Exit fullscreen mode

and now just explore the url https://api.github.com/users/[username] and replace {githubUser.name} to {githubUser.[something in the url]} like {githubUser.location}

It is easy, isnt it?

Now explore other api and try to do the same with those.

Its all for this blog.

Following me on twitter will help us both

Thanks for reading it till here and I appreciate your feedback 😀

Discussion (1)

Collapse
lukeshiru profile image
Luke Shiru

You could move the util away from the component making it more reusable:

// Outside the component:
const fetchGitHubUserData = user =>
    fetch(`https://api.github.com/users/${user}`).then(response =>
        response.json()
    );

// And then inside the component:
const handleUpdate = useMemo(
    () => fetchGitHubUserData(githubUser).then(setGithubData),
    [githubUser]
);
// ...
useEffect(handleUpdate, []);
// ...
<button onClick={handleUpdate} className="search_button">
    Search Github
</button>
Enter fullscreen mode Exit fullscreen mode

Cheers!