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:
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.
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.
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.
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.
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.
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:
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