DEV Community

Vik 📈
Vik 📈

Posted on

Using github api with react

#github #webdev #javascript #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 (2)

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

Read next

laeline profile image

Github ARC Runners sur EKS - Assume roles

Thibault CORDIER ☁ -

kajal393 profile image

Free Project Management Software

Kajal Shrama -

kajal393 profile image

Website Visitor Tracking Tool

Kajal Shrama -

rubymuibi profile image

Jest and Vite: Cannot use `import.meta` outside a module

RubyMuibi -