React Demos – Episode2 – Ajax Data Loading

Introduction

This is the second post in this series of React Demos. You can check the previous post on this link.

Making Ajax calls and performing CRUD operations are very common in web development. In this post we’ll load data from public APIs and display it in react components.

Show Bitcoin Price

We’ll start with a simple demo and perform a GET request to read the data from Coindesk’s public API

Here is the component

Notice the useState hook for state.

• useState Hook will allow the use of state in function component without writing a separate class component.
• useEffect Hook, will allow to perform side effect operations such as fetching data, clean up, or DOM manipulation.

We can now use this component in Misc page, which we setup in the previous example

and here is the component’s view

No data yet, so lets do this next.

Making Ajax Call

To make ajax calls, we can use browser’s fetch API along with useEffect hook as shown below:

useEffect() takes a function as first argument. This function will execute after the first render and after every component update. So this function is an apt place to call the data API.

Passing a second argument to useEffect is optional. Passing an empty array [] ensures this effect will run just once; otherwise, it will run after every render.

and now we can see that our component is showing the data as expected

Setting up axios

axios is a popular promised based http client to make ajax calls. Let’s install it using npm and update our component to use axios instead of fetch API.

npm install axios

and we can update the useEffect hook as follows

and our component will render the data as before.

Display GitHub-User Data

This example is very similar to the previous one. We’ll get the user data from GitHub API and display it inside a component.

and following shows the component inside Misc Page (just like previous example)

Show Data from Final Space API

Lets see another demo by loading data from Final Space API.

It is a free RESTful API that provides information about characters, episodes, and locations of the Final Space TV show.

To start with, I created FinalSpace component and add route for it in app.js as shown below

I also added the route link inside NavBar component.

here is the FinalSpace component code

Ajax call using axios is very similar to what saw earlier. We are getting response from the API and then storing it to data variable. We are not showing the data yet, lets see how this looks in browser

As you can see in the inspect window, we have the data from the API, now we can show it on the UI as follows

JavaScript map function is very useful for such purposes. Here we are using the bootstrap styling to render each data item in a card and with these changes, the UI looks as follows

Some other Components

I’ve added few other components inside the Misc. Page. These are few basic examples for reference. I’ll be adding more of such components in coming days. The code is self explanatory and following picture shows these components.

Summary

Preforming AJAX calls is a common operation in web applications. In this post, we started by loading data from public APIs using AJAX.

You can download the source code from this git repository.

We’ll continue learning more about React using demos in coming posts. Let me know if you have some questions or comments. Till next time, happy coding.