Using React/public APIs to make a simple front end app

Hello! I’d like to show how easy it is to make a simple react app with a public external API and show my thought process throughout.

Photo by Florian Olivo on Unsplash

So, what is an API? API is an acronym for Application Programming Interface, it basically allows systems to communicate data to each other. Let’s go through a crudely drawn example:

Twitter and its database

Say we want to know about some of the data in twitter’s database. An API would allow us to use some of the data in our own apps. It opens an interface we can connect to via our app, which allows a particular company’s services to be used in our app.

A badly drawn example of how an API can help us fetch data from another database online

Getting data from an API requires an endpoint, (or the address we fetch our data from), and some require a user specific API key.

Now, there are many public APIs out there on the web that don’t require a specific API key to use, and that’s what we’re going to use to make a simple random quote generator.

The API we’re going to use today is https://kanye.rest/ . Making a GET request to this address returns an object with a “quote” key, and in it, is a random tweet from Kanye West.

An example of the kind of data you’d receive from a GET request

Okay! So let’s start off with making a react app by going to the desired place in terminal/console and then using

npx create-react-app <my-app-name>

If we navigate to our App.js in our /src folder, we can replace everything in the returned div jsx with what we want.

Our new App.js

You’ll notice that we’re importing a new component, ‘YeezyQuote’ from a new components folder and file. This is going to hold/show the info we get from the API, as well as react to any changes we may want to make.

To get the info from the API, we have to make a fetch request, for now let’s write it as fetch(‘endpoint’) and save it in a state

Fetching from the API and saving it in a state

Great! Now, we can pass those two states as props down to our presentational component, YeezyQuote.

Giving YeezyQuote props

Now in our YeezyQuote component, we can use those props to show what we fetched from our API:

Using the props we passed down, className for css

Our page now should look like:

🙏

We could stop here, but what if we wanted to change the quote? After all, the API given does give us random tweets from a huge list. First, we should start by giving the user a button to change the quote:

Our new render function

In our yet to be defined handleClick function, we plan on changing the state of our parent component, App.js. So to pass back data to that component, we have to pass a function from App.js as a prop to YeezyQuote. Since we plan on changing the quote and the imageUrl, let’s call the functions setQuote and setImageUrl.

Inside our App.js

Now that we have those defined and passed down, we can work on our handleClick function:

Our handleClick function in YeezyQuote

Our handleClick function is making another GET request to the API, and using the passed down function, we can set the state of our parent component with the value we get from the request. The yeezyImages array is an array of links of Kanye that we randomly select from and set to our new image url.

Now our page should look like this:

Now with a button!

And when we press the “Change quote” button:

Great! We can continue to improve on the UI/functionality of this app but for now it’s a way to continuously get new quotes from Mr. West. Here’s a deployed version: https://suspicious-fermat-401c26.netlify.app/

In conclusion, I think there are tons of fun APIs out there that can be used for whatever you might want. These APIs could increase the functionality of the app you’re working on, or just be a silly quote generator like this. One list of public APIs is available here: https://github.com/public-apis/public-apis.