Getting Random jokes with Dadjokes.io npm package tutorial

Introduction

Dadjokes is a popular api that contains thousands of jokes for everyone's enjoyment. The possibles are nearly endless with the dadjokes API you can create bots for Twitter or Discord, you could create a dating app matching people with commonly liked jokes the possibles are endless.

In this article, we'll show you have to create a small react application and how to use it in combination with the new Dadjokes.io npm package.

Before you begin this guide you'll need to have Node.js and NPM installed on your local development machine. You'll also need to create a rapid-api account

Let's begin!

Step 1 - create react app


To create a basic react app, we'll need to make a project directory and up the create-react-app command provided by React.

Open a new terminal window (Ctrl + Alt + T on Linux or CMD + SPACE on Mac) and run the following commands below to create your basic react app.

npx create-react-app dadjokes
cd my-app

fantastic now let us move on to step 2 install dadjokes.io

Step 2 - Installing dadjokes.io


After you have created your basic react app. Let's get into installing the dadjokes.io dependencies.

Now in the terminal window currently opened from step 1 run the following command below to install dadjokes.io

npm i @dadjokes-io/dad-jokes

and that's for installing the dadjokes.io package, I know amazing!

Step 3 -  Initialization


Using your favorite code editor open up your project and navigate to /App.js

Let's begin by importing the dadjokes package at the top of /App.js add the following line

import DadJokes from '@dadjokes-io/dad-jokes';

now that we have imported DadJokes into our /App.js file let's initialize it. Before the return statement let's add the following line.

const dadjokes = new DadJokes("")

now you must pass your rapid-api-key into the DadJokes function to properly initialization it. To access your API key you must create a rapid api account and subscribe here.

so far your App.js file should look something like this

import logo from './logo.svg';
import './App.css';
import DadJokes from '@dadjokes-io/dad-jokes';

function App() {
  const dadjokes = new DadJokes('*****');

  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'>
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Step 4 - Random Jokes


Now that we have Initialization the DadJokes package we can now begin fetching some jokes. In this tutorial, we'll only focus on fetching random jokes. In the future, we'll on more in-depth.

Let's start off with create a new function called  randomJokes which will return an array of jokes.

const jokes = await dadjokes.randomJokes(5)

Right we are only going to request five random jokes.

The jokes variable will contain an array of jokes so we want to map through the jokes and display them in an unordered list.

import logo from './logo.svg';
import './App.css';
import DadJokes from '@dadjokes-io/dad-jokes';

function App() {
  const dadjokes = new DadJokes('*****');
  const jokes = await dadjokes.randomJokes(5)

  return (
    <div className='App'>
     <ul>
       {jokes.map((joke) => (
      	<li>
          {joke.setup}
          {joke.punchline}
        </li>
       ))}
      </ul>
    </div>
  );
}

export default App;

and there we go, we now have a basic random joke generator using the dadjokes npm package.

Conclusion


Today we have introduced the dadjokes npm package and how to create a basic random joke generator that fetches new jokes on refresh.

If you like to learn more about the dadjokes npm package all of the npm documentation lives on GitHub.

Kegen Guyll

Kegen Guyll