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 πŸ˜€

Top comments (3)

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!

Collapse
 
tik9 profile image
Timo KΓΆrner

The link to the Github Repo does not exist. Can you add a repo so that I can read the full code?

Collapse
 
shivamtyagi12345 profile image
shivam tyagi
import React, { useState, useEffect } from 'react';

const url = 'https://api.github.com/users';

// second argument

const UseEffectFetchData = () => {
  const [users, setUsers] = useState([]);

  const getUsers = async () => {
    const response = await fetch(url);
    const users = await response.json();
    setUsers(users);
    // console.log(users);
  };

  useEffect(() => {
    getUsers();
  }, []);
  return (
    <>
      <h3>github users</h3>
      <ul className='users'>
        {users.map((user) => {
          const { id, login, avatar_url, html_url } = user;
          return (
            <li key={id}>
              <img src={avatar_url} alt={login} />
              <div>
                <h4>{login}</h4>
                <a href={html_url}>profile</a>
              </div>
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default UseEffectFetchData;

Enter fullscreen mode Exit fullscreen mode

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.