A simple React app: fetch GitHub users information via API

Welcome to a quick tutorial on my journey of building a React app that connects with external APIs. Today, I'm focusing on a hands-on example: fetching and displaying GitHub user data using GitHub's public API. This project is ideal for anyone looking to grasp API integration in React, whether you're starting out or brushing up your skills.

I'll walk you through setting up the React environment, exploring the GitHub API, and creating a user interface for displaying the data. Also, we'll look into using Axios for efficient API requests. By the end of this post, you'll see how I developed a functional React app that seamlessly integrates with an external API.

Setting Up the React Environment

Creating a React application is streamlined thanks to the tools and libraries in the React ecosystem. In this section, we'll cover the steps to set up a new React project, which is essential for our application to fetch GitHub user data.

Step 1: Install Node.js and npm

Node.js and npm (Node Package Manager) are vital for managing the packages your React application will depend on. Here's how to install them on different operating systems:

• On Linux:

Depending on your distribution, the installation commands may vary. For Debian and Ubuntu-based distributions, use:

sudo apt update
sudo apt install nodejs npm

• On macOS:

You can install Node.js and npm using Homebrew, a package manager for macOS. If you haven't installed Homebrew, you can do so by running the following command in the terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once Homebrew is installed, install Node.js and npm by executing:

brew install node

• On Windows:

Download the Node.js installer from the official website. Once the download is complete, run the installer and follow the on-screen instructions.

Step 2: Create a React App

With Node.js and npm installed, create your React application by running:

npx create-react-app github-user-fetch

This command sets up a new project named github-user-fetch.

Step 3: Navigate to Your Project Directory

Switch to your new project's directory:

cd github-user-fetch

Step 4: Run the React App

Start your React app locally with:

npm start

This opens the default React welcome page in your browser.

Step 5: Install Axios

Axios is a popular JavaScript library for making HTTP requests. We'll use it to fetch data from the GitHub API. Install Axios by running:

npm install axios

Your React application is now ready. Next, we'll delve into the GitHub API and begin crafting the user data fetching functionality.

Understanding the GitHub API

The GitHub API is a powerful tool that allows developers to interact programmatically with GitHub's vast array of functionalities. In our React app, we'll use this API to retrieve information about GitHub users.

API Overview

GitHub provides a REST API that lets you fetch public information about users, repositories, issues, and more. For our app, the endpoint we'll be interested in is:

https://api.github.com/users/{username}

Replace {username} with a GitHub username to fetch data for that specific user. This endpoint provides details like the user's name, number of repositories, followers, and more.

Rate Limiting

It's important to note that GitHub's API has a rate limit. For unauthenticated requests, the limit is up to 60 requests per hour. This should be sufficient for our tutorial, but for larger applications, consider authenticating to increase the limit.

Fetching User Data

To fetch user data, we'll make a GET request to the API. The response will be in JSON format, providing us with the data we need to display in our app. In the next sections, we'll implement this in our React application using Axios, handle the response, and display the data.

Example API Call

Here’s a quick example of what an API call to GitHub looks like using fetch in JavaScript:

fetch('https://api.github.com/users/kaex')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

This fetches data for the user kaex. We'll refine this process in our React app to make it dynamic and user-friendly.

Creating the User Interface

A user-friendly and intuitive interface is key to any application. For our React app, we'll design a simple yet functional UI that displays GitHub user information in a clear and engaging manner.

UI Components

Our UI will consist of the following components:

1) Search Input: A text field where users can enter a GitHub username.
2) Button: A button to trigger the search.
3) User Information Display: An area to display the fetched user data.

Let's start implementing these components in our React app:

1) Search Input and Submit Button

In src/App.js, add a text input and a button:

import React, { useState } from 'react';

function App() {
  const [username, setUsername] = useState('');

  return (
    <div>
      <input 
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Enter GitHub username"
      />
      <button onClick={fetchUserData}>
        Fetch User
      </button>
    </div>
  );
}

export default App;

Here, we use useState to manage the input state and an onChange handler to update it.

2) User Information Display

We'll display the user information in a simple format. For now, let's create a placeholder where this data will be shown:

function App() {
  // ...previous code...

  const [userData, setUserData] = useState(null);

  // ...fetchUserData function will be added here...

  return (
    <div>
      {/* Search input and button */}
      {/* ... */}

      <div>
        {userData && (
          <div>
            <h3>User Information</h3>
            {/* Display user data here */}
          </div>
        )}
      </div>
    </div>
  );
}

We'll populate this section with real data in the next part, where we fetch and handle data from the GitHub API.

Styling the UI

Add some basic styling to src/App.css to make the UI more visually appealing. Here's a simple example:

input {
  margin-right: 10px;
  padding: 5px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

.user-info {
  margin-top: 20px;
}

We now have a basic UI setup for our React application. Users can enter a username, trigger a search, and the app will display the fetched data in the designated area. In the next section, we'll integrate Axios to fetch data from the GitHub API and display it in our app.

Fetching Data with Axios

Axios is a popular JavaScript library used for making HTTP requests. It simplifies the process of working with requests and responses in JavaScript, making it a great choice for our React app to interact with the GitHub API.

Why Axios Over Fetch

While the native fetch API is capable, Axios provides several advantages:

1) Automatic JSON Data Transformation: Axios automatically transforms request and response data into JSON.
2) Request and Response Interception: Offers the ability to intercept requests and responses to modify or log them.
3) Error Handling: Easier error handling with a dedicated method for catching errors.

Setting Up Axios

First, ensure Axios is installed in your project:

npm install axios

Next, let's integrate Axios into our React app to fetch GitHub user data.

Fetching GitHub User Data

In src/App.js, we'll add a function to fetch user data using Axios:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  // ...previous state declarations...

  const fetchUserData = () => {
    axios.get(`https://api.github.com/users/${username}`)
      .then(response => {
        setUserData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setUserData(null);
      });
  };

  // ...UI rendering code...
}

export default App;

In this function, we make a GET request to the GitHub API for the entered username. The response is then stored in our userData state, ready to be displayed.

Error Handling

Proper error handling is crucial. In the .catch block, we log the error and reset userData to null, ensuring our UI reacts appropriately in case of a failed request.

We've now integrated Axios into our React app for efficient API requests. Our app can fetch and handle data from GitHub, bringing us one step closer to displaying it. In the next section, we'll focus on mapping this fetched data to our UI components to display user information.

Displaying User Data

Now that we have successfully fetched user data from the GitHub API using Axios, the next step is to display this information in our application. We will map the data we've obtained to our UI components.

Mapping Data to UI Components

In the src/App.js file, we already have a placeholder for user data. Let's enhance it to display the fetched data:

function App() {
  // ...previous code...

  return (
    <div>
      {/* Search input, button, and other UI elements */}
      {/* ... */}

      <div className="user-info">
        {userData && (
          <div>
            <h3>User Information</h3>
            <p><strong>Username:</strong> {userData.login}</p>
            <p><strong>Name:</strong> {userData.name}</p>
            <p><strong>Followers:</strong> {userData.followers}</p>
            <p><strong>Following:</strong> {userData.following}</p>
            <p><strong>Repositories:</strong> {userData.public_repos}</p>
            {/* Add more data fields as needed */}
          </div>
        )}
      </div>
    </div>
  );
}

In this snippet, we check if userData is available. If so, we display various pieces of user information like their username, name, followers, following count, and number of repositories.

Styling the Display

For a better visual presentation, add some CSS to src/App.css:

.user-info {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
}

.user-info h3 {
  margin-bottom: 10px;
}

.user-info p {
  margin: 5px 0;
}

This CSS will style the user information section, making it more readable and visually appealing.

Handling No Data

It's important to handle cases where no data is available or an incorrect username is entered. You might want to display a message indicating that no user was found:

<div className="user-info">
  {userData ? (
    {/* User data display code */}
  ) : (
    <p>No user data to display. Please search for a GitHub username.</p>
  )}
</div>

Our React app now not only fetches data from the GitHub API but also displays it in a user-friendly format. This completes the core functionality of our application. Users can enter a GitHub username, fetch relevant information, and view it immediately on the screen.