Writing a Joke and Meme App in React

API League offers a set of best-in-class APIs that help you rocket launch your next project. Whether you need jokes, trivia, books, or news from around the world, API League's got you covered.

In this tutorial, we are going to create a simple jokes app which allows you to search for memes, GIFs and jokes.

Let's get started!

Create an Account

To start, visit the API League website and create an account. Once an account is created, confirming the email address is the next step. This is an important step, as you won't be able to access the API until you've confirmed your email. You will receive an email on the email you registered with. It will look something like this:

Simply click on confirm your account. After which, your account will be verified.

Getting the API Key

Now that your email is verified. Log in to your API League account and obtain your API key. API key is a unique identifier that allows you to access the API.

After you have successfully logged in, perform the following steps to obtain your API.

• From your dashboard, click on "Profile".

• In the "Profile" section, click on "Show/Hide API Key" to show your API key.

• Copy the API Key.

Save it somewhere safe for easier access. Don’t share it with anyone else!

Using the API

For this tutorial, we will be using the API League JavaScript SDK. Refer to our SDK Page if you are interested to try the API in another language.

With that out of the way, let's set up our React project.

Cloning Demo React Project

First, you need to clone the demo project repository.

git clone "https://github.com/ddsky/api-league-clients.git"

After that, navigate to the project directory "api-playground" and run the following command in the terminal:

npm install

This will install all the necessary dependencies required by the project.

After that, open "input.jsx" file under "CLONED_PROJECT_DIR/src/pages" and add the API key you copied earlier to the variable named "Api".

To run the project, run the following command in the terminal:

npm start

Once the project is initialized, it will look something like this.

Let's focus on one of the functions of Humor API, one which allows us to search for memes meeting particular criteria.

Search Meme

The searchMemes function takes the following parameters.

Name	Type	Description	Notes
keywords	String	A comma-separated list of words that must occur in the meme.	[optional]
keywordsInImage	Boolean	Whether the keywords must occur in the image.	[optional]
mediaType	String	The media type (either 'image', 'video' or even specific format such as 'jpg', 'png', or 'gif').	[optional]
minRating	Number	The minimum rating in range [0.0,1.0] of the meme.	[optional]
maxAgeDays	Number	The maximum age of the meme in days.	[optional]
offset	Number	The number of memes to skip, between 0 and 1000.	[optional]
number	Number	The number of memes, between 1 and 10.	[optional]

Let's take a look at how we can use the function using this example snippet.

import ApiLeague from 'api_league';
let defaultClient = ApiLeague.ApiClient.instance;
let apiKey = defaultClient.authentications['apiKey'];
apiKey.apiKey = 'YOUR API KEY';

let apiInstance = new ApiLeague.HumorApi();
let opts = {
    'keywords': "rocket",
    'keywordsInImage': true,
    'mediaType': "image",
    'minRating': 0,
    'maxAgeDays': 30,
    'offset': 0,
    'number': 3
};

apiInstance.searchMemes(opts, (error, data, response) => {
    if (error) {
        console.error(error);
    } else {
        console.log('API called successfully. Returned data: ' + data);
    }
});

In the code mentioned above, we have:

• Initialized the API League object.
• Passed our API credentials to that object.
• Created object of Humor API.
• Defined the criteria for the meme.
• Called searchMemes function and parsed the output.

Output Format

The demo application shows result in 2 formats, media format and JSON response.

Viewable Media Format:

JSON Response:

You can also experiment Random Meme Fetch, Search GIFs and Search Jokes API which is also a part of the demo project.

You can check the output of these below.

Random Meme

Search GIFs

Search Jokes

And that's it! Don't forget to check out more functions part of the Humor API.

Happy coding.