/

A Simple React App Example: Fetch GitHub Users' Information via API

A Simple React App Example: Fetch GitHub Users’ Information via API

In this article, we will walk through a simple example of a React app that fetches GitHub user information using the GitHub API. This app consists of a form where users can enter a GitHub username. When the form is submitted, the app sends a request to the GitHub API, retrieves the user information, and displays it.

To begin, let’s create a reusable component called Card that will display the user’s image and details obtained from GitHub. The component will receive its data through props and display:

  • props.avatar_url: The user’s avatar
  • props.name: The user’s name
  • props.blog: The user’s website URL

Here is the code for the Card component:

1
2
3
4
5
6
7
8
9
10
11
const Card = props => {
  return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
  );
}

Next, we create a list of Card components using the CardList component. The CardList component receives an array of cards as a prop and iterates over it using the map() function to output a list of cards.

1
2
3
4
5
6
7
const CardList = props => (
  <div>
    {props.cards.map(card => (
      <Card {...card} />
    ))}
  </div>
);

The parent component of the app is App, which manages its own state and stores the cards array. We use the useState() Hook to manage the state.

1
2
3
4
5
6
7
8
9
const App = () => {
  const [cards, setCards] = useState([]);

  return (
    <div>
      <CardList cards={cards} />
    </div>
  );
}

To fetch the user information, we’ll use the Form component. The Form component manages its own state, including the username entered by the user. When the form is submitted, it sends a request to the GitHub API using Axios to retrieve the user information. We clear the input field by resetting the username state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const Form = props => {
  const [username, setUsername] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data);
      setUsername('');
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  );
}

To add the Form component to App, we pass a method called addNewCard as the onSubmit prop. The addNewCard method adds a new card to the list of cards in App by updating the cards state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const App = () => {
  const [cards, setCards] = useState([]);

  const addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo));
  };

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList cards={cards} />
    </div>
  );
}

Finally, we render the app using ReactDOM.

1
ReactDOM.render(<App />, document.getElementById('app'));

That’s it! You’ve created a simple React app that fetches GitHub user information using the GitHub API. Congratulations!

Check out the full source code of the app here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const { useState } = React;

const Card = props => {
  return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
  );
}

const CardList = props => (
  <div>
    {props.cards.map(card => (
      <Card {...card} />
    ))}
  </div>
);

const Form = props => {
  const [username, setUsername] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data);
      setUsername('');
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  );
}

const App = () => {
  const [cards, setCards] = useState([]);

  const addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo));
  };

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList cards={cards} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Feel free to try out the app on Codepen at https://codepen.io/flaviocopes/pen/oJLyeY.

Tags: React, GitHub API, React components, useState, Axios