Build a React app with Final Space API

Image for post
Image for post
Final Space

Welcome to a new React JS project, where we are going to build a simple app using Final Space API in React.

So, fire up your terminal and create a new react app final-space-react with the below command.

Image for post
Image for post
final-space-react

We will remove all the unnecessary boiler-plate code and our index.js will look like below.

Image for post
Image for post
index.js

And the App.js contains only Hello World text. We have also removed all content from App.css file.

Image for post
Image for post
App.js

Next create an img folder inside the src folder. The content for the same can be taken from the github repo at the end of the post.

Also, create a components folder inside src folder and put a file Header.js inside it. We are showing the logo in it.

Image for post
Image for post
Header.js

Next, put the below content in App.css. We are not going to go through the css, as it’s a React project.

We will next include the Header component in App.js file and we will see the nice header over a green background.

Image for post
Image for post
App.js

Now, we need to do the API call, so we will install axios from the Integrated Terminal. We are then importing useState, useEffect and axios at top and then creating two state variables items and isLoading using useState hook.

Image for post
Image for post
App.js

Next, we will use the useEffect hook to hit the final space api endpoint to get all the characters in the series. Notice that we are using an empty array as second parameter, so that the API call is done only once after initial render.

We are getting back an array of object from api as shown in the console.

Image for post
Image for post
App.js

After that we will create a CardGrid.js file in the components folder. Here, we are checking whether isLoading is true and displaying Loading… text. If it is false we are mapping through the items array and passing individual object to the CardItem component.

Image for post
Image for post
CardGrid.js

Next, create a file CardItem.js inside the components folder. We are just using the pre-defined classes in App.css and showing the received image in the Card front and all the other data in Card back.

Image for post
Image for post
CardItem.js

We will then move back to App.js file. Here, we will first set the state inside the useEffect hook.

After the we are importing the CardGrid at top and passing isLoading and items as props to it, inside the return statement.

Image for post
Image for post
App.js

Now, if we go to localhost we can see all the characters from Final Space.

Image for post
Image for post
Final Space

Now, we have one thing remaining and that is to show the spinner gif, instead of the Loading… text. So, we will create a Spinner.js file inside the components folder and show the spinner using image.

Image for post
Image for post
Spinner.js

Next, we will show the Spinner in the CardGrid.js file.

Image for post
Image for post
CardGrid.js

Our App is complete now. You can find code for the same in this github repo.

Image for post
Image for post
Final Space

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store