How to Work with REACT REST API with Ease?

Today, organizations build software to conduct several business operations. However, to further enhance the workflows across departments, companies build applications on top of existing applications. To build a new applications’ user interface, organizations leverage React REST APIs. As modern web applications require higher flexibility and scalability, REST API has been a popular choice to connect clients or resources due to the lightweight REST architecture. On the other hand, React is one of the most familiar front-end JavaScript libraries used for web applications. Businesses can gain benefits by consuming React REST APIs. It will not only enhance user experience but also allow developers to create large web applications that can change data without reloading the page.

This article describes the steps to consume React REST APIs in a simple fashion. It introduces you to REST API and the basic terminologies required in the React JavaScript library. The article also explains various methods to consume React REST APIs using JavaScript libraries.

Prerequisites

• The basic idea of APIs.
• Basic understanding of JavaScript programming.

What is REST API?

A REST API, also known as RESTful API, is an Application Programming Interface (API) that adheres to REpresentational State Transfer architecture. Roy Fielding introduced REST in his thesis (2000) for distributed hypermedia systems. He described the software design principles along with constraints to retain REST architecture style. With REST APIs, developers experience higher flexibility and lightweight techniques to integrate applications. Today, it has emerged as the most widely used method for connecting components in microservices architectures. 

Below are a few key fundamentals of REST API:

• Benefits
• Principles
• CRUD Operations
• Endpoints

A) Benefits

The benefits of REST API are as follows:

• REST APIs provide developers with the ability to organize complicated applications into simple resources.
• REST APIs are deemed very easy to learn and understand.
• They are also considerably easier to scale than their alternatives.
• It is very easy for external clients to build their REST API without any hitches.
• A REST API isn’t platform or language-specific, but can be consumed with any language or easily run on any platform as well.

B) Principles

API allows an application or service to access resources within another application or service. The application or service accessing information is called ‘client,’ whereas ‘server’ is the application or service containing resources. REST API supports a variety of data formats and virtually can be developed using any programming language.

The only requirement is to follow below REST design principles:

1. Decoupled Service

Client-server decoupling describes the nature of the separation between client and server. While a service listens to requests and possesses multiple capabilities, any request made by consumers is either accepted or rejected by the server. With client-server decoupling, portability of user interface and scalability of server components also improve.

2. Statelessness

Statelessness is another constraint added to the principle of REST architecture. It mandates each ‘request’ to include all necessary information offered between client and server without storing any context on the server.

3. Cache

Resources should be cacheable on the client or server-side because it helps mitigate constraints of statelessness. Cache constraints consider implicit or explicit labeling of data within a response to a request as cacheable or non-cacheable. If a response is labeled ‘cacheable,’ client cache is given the right to reuse that response data for later, equivalent requests.

4. Uniform Interface

Uniform interface is the primary feature that distinguishes REST architectural style from other network-based styles. It defines a uniform contract, prohibiting the use of multiple or self-contained interfaces within an API. All APIs requesting the same resource should look alike (Idempotent), irrespective of where the request was initiated.

5. Layered System

A layered system allows an architecture to be hierarchical. This constraint limits the interaction of components beyond the immediate layer. As none of the layers can see into others, the calls and responses go through different layers. This principle allows new commands to be added without impacting previous commands and their functionality.

C) CRUD Operations

CRUD is an acronym for Create, Read, Update, and Delete commands. These four major functions guide software developers to interact with databases. Despite its origin from databases, it now maps the design principle of dynamic applications like HTTP, SQL, and DDS. CRUD operations are cyclic rather than being an architectural system. Below are tasks performed by CRUD commands:

• Create: is a procedure that generates new records.
• Read: is a procedure used to read/retrieve data based on desired input parameters.
• Update: This is a procedure used to modify records (without overwriting).
• Delete: is a procedure used to remove (one or more) entries entirely.

D) Endpoints

API executes an operation using ‘requests’ and ‘responses.’ If APIs send a ‘request’ information from a web application or web server, it will receive a ‘response.’ The location where APIs send requests or where resources live are endpoints. With REST APIs, an endpoint is one end of a communication channel. Each endpoint is a location where REST APIs can access the resources needed to carry out a function.

What is React?

React, also referred to as ‘React.js’ or ‘React JS,’ is an open-source JavaScript library that allows building user interfaces specifically for single-page applications. It was developed by Jordan Walke, a software engineer working for Facebook. With React, developers handle the view layer for web or mobile applications and even create reusable UI components. As React provides fast, scalable, and simple solutions, it helps to develop large web applications that work on user interfaces in a given application.

React is often used in combination with other JavaScript libraries or frameworks, such as AngularJS. Although developers can write in pure JavaScript, React uses JSX (syntax extension to JavaScript) to mix HTML with JavaScript.

Key Features of React

Here are some of the key features of React:

• React is built in a way that allows for one-way data binding or unidirectional data flow. One-way data-binding gives you more control over your application.
• Components are fundamental to ReactJS. Each component in a ReactJS application has its own logic and controls. These components may be reused, which makes it easier to keep track of the code while working on larger projects.
• React is simple to understand as it mixes fundamental HTML and JavaScript ideas with some useful enhancements.
• To accelerate the development of web apps, React uses Virtual DOM. Instead of updating all of the components again, as traditional web applications do, Virtual DOM analyses the components’ prior states and updates just the things in the Real DOM that have changed.
• React makes use of a JSX file, which makes the application easy to develop and understand.

What are the Javascript Methods for REST API?

JavaScript has a few in-built as well as third-party libraries that assure smooth interaction with REST API. They are primarily used to send HTTP ‘requests’ and receive ‘response’ in JSON/XML format. 

Below are a few libraries to make HTTP operations:

• XMLHttpRequest
• Fetch
• Axios
• SuperAgent
• Ky

1. XMLHttpRequest

Modern web browsers use XMLHttpRequest (XHR) objects to request data from the server. XHR is a native API in JavaScript that allows sending HTTP requests without refreshing a loaded web page. XHR object can:

• Update a web page (without reloading).
• Request data from a server even after a page has loaded.
• Receive data from a server even after the page has loaded.
• Send data to a server running in the background.

Although XHR is the building block of several HTTP request modules, developers rarely use this API.

To send a ‘GET’ request, create XMLHttpRequest, open the HTTP request, and finally send the requests. Use the below code to send ‘GET’ request by XHR object:

//create XMLHttpRequest object 
const xhr = new XMLHttpRequest(); //open a get request with the remote server URL 
xhr.open("GET", "https://world.openfoodfacts.org/category/pastas
/ 1)
//send the Http request 
xhr.send()

Pros and Cons of XMLHttpRequest

Here are a few key advantages of XMLHttpRequest:

• It removes the need for external dependencies.
• Since the method is natively supported, XMLHttpRequest is compatible with all the modern browser versions.
• It also allows manipulating and accessing asynchronous HTTP requests at the base level.

Here are a few key disadvantages of XMLHttpRequest:

• No support is offered for async/await or promise-based syntax.
• The code for XMLHttpRequest is unnecessarily long and extremely verbose.
• Most of the newer HTTP request packages offer simple abstractions over the complex XMLHttpRequest API.

2. Fetch

Fetch is also a native JavaScript API used to make HTTP requests to servers. As modern applications widely use the ‘Fetch’ library, it has become one of the most popular JavaScript libraries to send HTTP requests. This method considers two input parameters: URL and array of properties (optional). Fetch also reduces the complexity and verboseness of the code with the use of simpler syntax and promises.

fetch("https://world.openfoodfacts.org/category/pastas/1.json"), .then(response => {
// indicates whether the response is successful (status code 2 if (!response.ok) {
throw new Error('Request failed with status ${reponse.status
return response.json()
.then(data => {
console.log(data.count) console.log(data.products)
.catch(error => console.log(error))

Pros and Cons of Fetch

Here are a few key advantages of Fetch:

• Fetch is easy to learn and can be used for problems of any level.
• It provides you with a native, simplified way to make HTTP requests in Javascript.
• Fetch also supports promise-based implementation, allowing you to write concise and cleaner code.
• It also offers supplementary features over XMLHttpRequest such as integrating the Response and Request objects with the native Cache API and sending no-cors requests.

Here are a few key disadvantages of Fetch:

• Fetch accepts a response even when an HTTP error occurs. You will have to manually check for HTTP errors and handle them.
• It lacks some useful features supported by XMLHttpRequest such as aborting a request and tracking request progress. Having said that, Fetch allows the use of a separate AbortController object to control timeouts and abort requests.
• Fetch isn’t compatible with Internet Explorer, though hopefully, it isn’t as relevant anymore.

3. Axios

Axios is one of the most popular third-party packages used to make HTTP requests in JavaScript. It is a promise-based HTTP client that can be used with JavaScript and advanced frameworks like React, Vue.js, and Angular. While the native.js HTTP module is called on the server-side, the client-side use XHR. Follow the below code to create a ‘GET’ request from Axios:

axios.get("https://world.openfoodfacts.org/category/pastas/1.jso .then(response => {
// access parsed JSON response data using response.data fiel data = response. data console.log(data.count) console.log(data.products)
.catch(error => { if (error.response) {
//get HTTP error code
console.log(error.reponse.status) } else {
console.log(error.message)

Pros and Cons of Axios

Here are a few key advantages of Axios:

• Axios is compatible with all the main browser editions, including Internet Explorer.
• It offers a simple and concise easy-to-learn syntax with a smooth learning curve.
• Axios also supports a versatile set of features that aren’t available in various other HTTP packages. These include intercepting HTTP requests, aborting sent requests, sending simultaneous requests, tracking request progress, and automatic JSON data transformation.
• It also provides client-side support for XSRF protection.

Here are a few key disadvantages of Axios:

• Axios adds an additional external dependency to the application since the module isn’t native.

4. SuperAgent

SuperAgent is one of the earliest third-party packages introduced to Javascript for making HTTP requests. Similar to Axios, SuperAgent uses XMLHttpRequest API in the backend in its implementation and comes with a comprehensive set of features in a number of request handling tasks. The package offers support for both callback-based and promise-based implementations.

When sending HTTP requests with SuperAgent, you can depend on its dedicated methods to initiate a request of a specific type. For instance, you can use the superagent.type() method to send GET requests, as depicted in this example:

superagent
  .get("https://world.openfoodfacts.org/category/pastas/1.json")
  .then(response => {
    // get parsed JSON response data
    data = response.body
    console.log(data.count)
    console.log(data.products)
  })
  .catch(error => {
    if (error.response) {
      console.log(error.status)
    } else {
      console.log(error.message)
    }
  })

You can also send POST requests in a similar fashion:

superagent
  .post("/food")
  .send(food)
  .then(response => console.log("Request successful!"))
  .catch(error => {
    if (error.response) {
      console.log(error.status)
    } else {
      console.log(error.message)
    }
  })

Pros and Cons of SuperAgent

Here are a few key advantages of SuperAgent:

• SuperAgent is a well-supported and mature Javascript module.
• It provides an easy-to-use promise-based solution for sending HTTP requests.
• SuperAgent is compatible with all the browser versions. However, you need to use a polyfill for earlier versions of Internet Explorer to enable features like promise support.
• It also supports retrying requests if a network-related or other transient error takes place while making a request.
• SuperAgent also provides support for extending the package’s functionality with the help of a constantly evolving set of plugins. Some instances of features these plugins add to SuperAgent consist of simulating mock HTTP calls, throttling and queueing requests, caching request and response data, etc.

Here are a few key disadvantages of SuperAgent:

• SuperAgent doesn’t support monitoring request progress.
• It adds an external dependency since the module isn’t native to the application.

5. Ky

Ky is a considerably new Javascript package that can be used for generating asynchronous HTTP requests from the front end of a web application. It is built on top of the native Fetch API with simpler syntax and supplementary functionality.

Ky provides a simpler syntax for making requests with its dedicated HTTP methods. Here’s an example of sending a GET request using Ky with await/async.

async function getData () {
  try {
    const data = await ky.get("https://world.openfoodfacts.org/category/pastas/1.json").json()
    console.log(data.count)
    console.log(data.products)
  } catch (error) {
    if (error.response) {
      console.log(error.response.status)
    } else {
      console.log(error.message)
    }
  }
}

You can send POST requests in a similar fashion:

async function postData () {
  try {
    const response = await ky.post("/food", { json: food })
    console.log("Request successful!")
  } catch (error) {
    if (error.response) {
      console.log(error.reponse.status)
    } else {
      console.log(error.message)
    }
  }
}

Pros and Cons of Ky

Here are a few key advantages of Ky:

• Ky can easily address some limitations within the native Fetch API with support for features like retry, request timeout, and monitoring progress.
• Ky gives a simple, lightweight, promise-based API that allows you to make HTTP requests.
• It also provides you with hooks to modify requests during their lifecycle: afterResponse, beforeRequest, beforeRetry, etc.
• Ky supports all the modern browsers like Firefox, Chrome, Safari, etc. For Internet Explorer support, Ky offers an alternative package, Ky-Universal.

Here are a few key disadvantages of Ky:

• Ky is a relatively new package compared to other versatile, mature options discussed before. It also adds an external dependency since it isn’t native to the application.

Comparison between Fetch and Axios

Here are the primary differences between Fetch and Axios:

• Browser Compatibility: One of the many reasons why developers would prefer Axios over Fetch is because Axios is supported across major versions and browsers, unlike Fetch which is only supported in Firefox 39+, Chrome 42+, Safari 10.1+, Edge 14+.
• Basic Syntax: Both Axios and Fetch have very simple syntaxes for making requests. But Axios has an upper hand since Axios automatically converts a response to JSON, so when using Axios you skip the step of converting the response to JSON, unlike Fetch() where you’d have to convert the response to JSON. Lastly, Axios shorthand methods allow you to make specific HTTP requests easier.
• Intercepting HTTP Requests: Axios lets developers intercept HTTP requests. HTTP interceptors are needed when you need to change HTTP requests from your application to the server. Interceptors provide you with the ability to do that without having to write any extra code.
• Handling Response Timeout: Sending a timeout for responses is very easy to do within Axios by leveraging the timeout option within the request object. But in Fetch, it is not easy to carry this out. Fetch provides a similar feature by leveraging the AbortController() interface but it takes more time to implement and can get confusing.
• Making Multiple Requests Simultaneously: Axios allows you to make multiple HTTP requests with the use of axios.all() method. Fetch offers the same feature with the use of promise.all() method, you can make multiple fetch requests in it.

What are the Steps to Consume React REST APIs?

A REST API can be consumed in various ways using Angular, jQuery, or Bootstrap. However, React has gained popularity with its quick, efficient, and flexible front-end framework among developers. Eventually, it becomes necessary to understand the integration of React REST APIs.

Below are steps that can assist you to consume React REST APIs:

• Step 1: Suppose the task is to build an application that will display all the repositories and their description to a particular user. The first task is to get the endpoint because it contains JSON data required for our application. As you will be creating a React REST API application, it is quite essential to set up an environment. One must have ‘npm’ (default package manager for the JavaScript) to arrange modules for a node and manage dependency conflicts intelligently. Use the below commands to set up an environment for a new React REST API project:

To bootstrap, a new React app	To run the application

If a React app is created, you should see a browser window navigating to localhost:3000 as shown below:

• Step 2: Create a folder ‘component’ inside the ‘src’ folder in your repository. The ‘component’ folder will fold all React REST API components. In this folder, create two files — ‘List.js’ and ‘withListLoading.js’ to hold the required components in your application. The ‘List.js’ file will display our Repositories in the form of a list, whereas the ‘withListLoading.js’ file will display ongoing fetch requests.
• Step 3: In the ‘List.js’ file, a React REST API list component is used to display collected data. For instance, if you want a list of repository names and their descriptions, use the below code:

import React from 'react';
const List = (props) => {
  const { repos } = props;
  if (!repos || repos.length === 0) return <p>No repos, sorry</p>;
  return (
    <ul>
      <h2 className='list-head'>Available Public Repositories</h2>
      {repos.map((repo) => {
        return (
          <li key={repo.id} className='list'>
            <span className='repo-text'>{repo.name} </span>
            <span className='repo-description'>{repo.description}</span>
          </li>
        );
      })}
    </ul>
  );
};
export default List;

• Step 4: While the above step arranges data in a list, there may be some high-order components that check the loading state. If the ‘isLoading’ state is ‘true,’ a message will be displayed ‘Hold on, fetching data may take some time :).’ To show the loading state, use the below code:

import React from 'react';

function WithListLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return <Component {...props} />;
    return (
      <p style={{ textAlign: 'center', fontSize: '30px' }}>
        Hold on, fetching data may take some time :)
      </p>
    );
  };
}
export default WithListLoading;

• Step 5: Create another file named ‘*App.js’ in the ‘src’ folder and follow the below steps to consume a React REST API:

• Step 5.1: Import all necessary external files and components created in the components folder as shown below for the React REST API:

import React, { useEffect, useState } from 'react';
import './App.css';
import List from './components/List';
import withListLoading from './components/withListLoading';

• Step 5.2: Create a component called ‘ListLoading’ to wrap a higher-order component ‘withListLoading.’ Here, the state values of ‘loading’ and ‘repos’ are created with React REST API Hook ‘useState()’ method, as shown below:

const ListLoading = withListLoading(List);
  const [appState, setAppState] = useState({
    loading: false,
    repos: null,
  });

• Step 5.3: The next step is to initialize the ‘useEffect()’ React REST API Hook. In the ‘useEffect()’ hook, set the initial loading state to true while creating a constant variable called ‘user’ as shown in the below code:

useEffect(() => {
    setAppState({ loading: true });
    const user = `https://api.github.com/users/hacktivist123/repos`;
    fetch(user)
      .then((res) => res.json())
      .then((repos) => {
        setAppState({ loading: false, repos: repos });
      });
  }, [setAppState]);

After the fetch request is made to the React REST API, set the loading state to false and populate the ‘repos’ state with data received from the request.

• Step 5.4: Finally, render the React REST API components assigned in our higher-order component using the below code:

return (
    <div className='App'>
      <div className='container'>
        <h1>My Repositories</h1>
      </div>
      <div className='repo-container'>
        <ListLoading isLoading={AppState.loading} repos={AppState.repos} />
      </div>
    </div>
  );
}
export default App;

The browser will initially fetch requests for React REST APIs from a given database, where the priority of ‘withListLoading’ is higher. While the fetch request for React REST API is loading, the below screen is displayed:

Once the fetch request is complete, all the repositories for the React REST API will be displayed in list form as shown below:

• Step 6: Since the application display for the React REST API is quite simple, you can grace the display by styling the ‘App.css’ file. Various class names can be associated with each element in the ‘App.js’ file. Below is the display for the React REST API repository, post styling:

Conclusion

Businesses create dynamic web applications using JavaScript. However, developing large-scale web applications specifically with HTML strings requires complex coding. As React facilitates greater scope in building machine-readable codes, it enhances performance with less code and better functionality. Consuming React REST API assures high-speed operation, and a better user interface in the ever-changing front-end web application.

Explore the benefits of integrating React with Google Analytics 4. Learn how this setup can help you track and analyze user interactions more effectively.

Extracting complex data from a diverse set of free data sources like REST APIs can be a challenging task and this is where Hevo saves the day!

Hevo Data offers a faster way to move data from 150+ data sources such as SaaS applications, Databases, Files, etc. Hevo’s native REST API connector can help connect with a variety of non-native/custom sources into your Data Warehouse to be visualized in a BI tool. Hevo is fully automated and hence does not require you to code.

Sign up for a 14-day free trial and experience the feature-rich Hevo suite first hand. You can also have a look at the unbeatable pricing that will help you choose the right plan for your business needs.

Frequently Asked Questions