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.

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';

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

const [githubData, setGithubData] = useState([])
const [githubUser, setGithubUser] = useState("vikstack")

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));
}

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()
}, [])

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>

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>

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 😀

Comments

[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?

[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;