Chapter 7. Consuming the REST API with React

This chapter explains networking with React. We will learn about promises, which make asynchronous code cleaner and more readable. For networking, we will use the fetch library. As an example, we use the GitHub REST API to demonstrate how to consume RESTful Web Services with React.

In this chapter, we will look at the following:

• Using promises
• How to use Fetch
• How to make requests to the REST API
• How to handle responses from the REST API
• How to create a React app that consumes the REST API

Technical requirements

In this book, we are using the Windows operating system, but all tools are available for Linux and macOS as Node.js and create-react-app have to be installed. 

Using promises

The traditional way to handle an asynchronous operation is to use callback functions for the success or failure of the operation. One of the callback functions is called, depending on the result of the call. The following example shows the idea of using the callback function:

function doAsyncCall(success, failure) {
    // Do some api call
    if (SUCCEED)
        success(resp);
    else
        failure(err);
}

success(response) {
    // Do something with response
}

failure(error) {
    // Handle error
}

doAsyncCall(success, failure);

A promise is an object that represents the result of an asynchronous operation. The use of promises simplifies the code when doing asynchronous calls. Promises are non-blocking.

A promise can be in one of three states:

• Pending: Initial state
• Fulfilled: Successful operation...

Summary 

In this chapter, we focused on networking with React. We started with promises that make asynchronous network calls easier to implement. It is a cleaner way to handle calls, and much better than using traditional callback functions. In this book, we are using the Fetch API for networking, therefore we went through the basics of using fetch. We implemented two practical React apps that calling open REST APIs and we presented the response data in the browser. In the next chapter we will look some useful React component that we are going to use in our frontend.

Questions

1. What is a promise?
2. What is fetch?
3. How should you call the REST API from the React app?
4. How should you handle the response of the REST API call?

Further reading

Packt has other great resources for learning about React:

• https://www.packtpub.com/web-development/getting-started-react
• https://www.packtpub.com/web-development/react-16-essentials-second-edition