Consuming a REST API ( Github Users ) using Fetch – React Client
In this article you will learn to develop a React application, which will fetch the data from a REST API using Fetch. We will use GitHub Users API to fetch the user’s public information with their username. You can find the API reference and source code links at the end of this article.
Before moving onto the development part, to initialize a simple react application you can follow the steps mentioned below:
Step 1: Create React application.
npx create-react-app foldername
Step 2: Move into the project folder.
Step 3: Create a components folder and now Project Structure will look like:
Custom components resides in the components folder, with everything put together in the MainComponent.js, we will place this component inside App.js, which itself goes under “root” DOM node and everything inside this node will be managed by React DOM.
We are going to develop three components:
- Main Component: Responsible for fetch operation and state changes in the application.
- Search Bar: A search bar to get the user input for GitHub username.
- UserInfoCard: A reusable component to display the GitHub user information.
Step 4: In the MainComponent.js component, we have two state variables, username ( input from the user ) and userData ( response from the REST API ). We need to fetch the user data, every time there is an update to the username. To achieve this, we are going to use useEffect hook from React.
Step 5: Now to get the response from GitHub users API, we are going to make a GET request using Fetch, which will be the role of getUserData() function.
getUserData() is an asynchronous function, in which fetch(gitHubUrl) makes the request and returns a promise. When the request is complete, the promise is resolved with response object. This object is basically a generic placeholder for various response formats. response.json() is used to extract the JSON object from the response, it returns a promise, hence the await.
So finally, our MainComponent.js file is looks like:
Step 6: Now, moving on to the SearchBar component, which serves the purpose of receiving the user input for username. It is a simple component, with an input field of text type. On any change, it fires of the setUsername with the updated value.
Step 7: Our last component, is a reusable UI component, which is basically a Card Component that receives userData as props, and just displays it in any chosen format. You can tweak the App.css file to understand the various design aspects.
That is all, with these three components put together, completes our React application, which you can download from the source code link provided below, and run it on your system. Source code does include an extra component, to store the retrieved data in Local Storage, which was not covered in this article. So if you’re interested, go ahead and check that out as well.
Step to run the application: To start the application on your system, run the following command:
GitHub Users API: https://docs.github.com/en/rest/reference/users
Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Source Code: https://github.com/notnotparas/github-users-api