As the technologies for web development increase, so do the possibilities of things that can be done. And not only can they be done, but they can now be done easier with lower time and space complexity.

This piece is out to teach how APIs can be fetched for use in React.js projects. We will use the example of calling GitHub repositories but the technique can pretty much be used to call any API in React.js.

Importantly, this piece will talk briefly about React.js for the benefit of those coming in contact with it for the first. It will discuss what APIs are, and then move into how to use them in React.js.

What is React JS?

Simply put, React is a declarative and easy-to-use JavaScript library used to build user interfaces. Note that it is not a programming language in itself. A JavaScript library for building user interfaces is what it is.

React helps to build web applications faster than what obtains with the combination of HTML, CSS, and vanilla JavaScript because you will write less bulky code. React applications are, therefore, built by building reusable components. Think of these as individual rooms that are habitable on their own. So, when these individual rooms are brought together and arranged in a certain way, you can have a beautiful mansion or even a 5-star hotel. That would be your complete React app!

Therefore, the ReactJS framework has the speedy attribute and the efficiency of JavaScript, as well as its efficient DOM manipulation method so it could render web pages faster and also create responsive and dynamic web applications. You can go more in-depth with React here.

What is an API?

Application Programming Interface. Wikipedia defines it as a way for two or more computer programs to communicate with each other. And that’s it, really. Interoperability.

Software components so defined that want to communicate with each other will require certain protocols and definitions. The two software exchanging data interact in a client and server relationship where the software making a request is the server and the software granting the request or responding is the server.

So, for example, like the project this piece will examine, our React app wants to display the repositories of a certain GitHub account. Our React app is the client while GitHub is the server.

RESTful API

There is another concept worth noting here and it is called the REST API. It is the common API standard used by most mobile and web applications to talk to the server they make requests from.

Representational State Transfer (REST) is not really a specification as it were but a relatively loose set of rules that have become the general standards for building web APIs since the early 2000s. An API that follows the REST standard is thus called a RESTful API.

A RESTful API is one that organizes resources into unique Uniform Resource Identifiers (URI). The URIs will identify different types of resources on a server. You can catch more on that here.

Implementing API Fetch in React.js

I will assume the knowledge of how React works at this point as the focus here is API implementation. That is the foundation we will build on. Readers who need help creating a React app can find it here.

Once the React app has been created, make sure to install react-router-dom. This helps to implement dynamic routing in the React app. It is useful for displaying pages in the app and letting users navigate them easily. It is a full-feature client-side and server-side routing library for React.

Then you need to process to import the Router, Routes, Route, and all other dependencies into your App.js file. As for the logic for calling the API (GitHub repositories in this case), I would recommend you create it in a different component in the “src” folder. Therefore, create a new component; call it anything, say; “components” and then create the logic folder in it. Also call it anything, say; “Home.”

There are two major parts necessary to be explained with regard to the scope of this piece. The first is using the async function and await statement in the useEffect hook to call a GitHub repository beginning in line 10.

Although there are different ways the useEffect hook and async function can be used in relation to one another. It is simply better to have the async function inside the hook.

The useEffect hook is used to instruct React that the component has to execute something after rendering. React will then remember the function you passed, in this case, the async, and call it later after performing the DOM updates. That is where the called repositories get called.

What the first set of logic renders is what gets laid out in the return from line 33 to 51. The pagination logic then follows from line 53. Line 63 to 77 breaks the content into several pages while each of the buttons up and down defines the direction of the page.