Create a Random Joke using React app through API

In this guide, we'll embark on a journey to build an interactive website that dynamically fetches and displays jokes from an external API using the power of React. With React as our primary framework, we'll create a seamless user experience where each page reload and button click unveils a fresh, humor-filled joke without the need to refresh the entire page.

Prerequisite: The pre-requisites for this project are:

React
Function Components
ReactJS AJAX and API
useState Approach: Decoding the Joke-Generating Component In our architecture, the "Joke" file takes center stage as a functional component. Within this component, a crucial state variable, "Joke," is initialized to an empty string. The magic unfolds as the output dynamically adjusts based on the state of this variable. The essence lies in the seamless rendering of the joke content, driven by the underlying state.

Adding to the intricacy, this component smartly incorporates the "Button" component. Here, the "Button" is not just any button; it's a functional component meticulously imported for its role in triggering the joke generation process. Clicking this button sets the gears in motion, unveiling a fresh joke.

Diving deeper, the "Button" component is a compact yet powerful functional component, exclusively designed to render a button element. Adding a layer of sophistication, we pass along some props to this "Button" companion. The prop in question is a method named "callAPI," a linchpin in fetching jokes from the API whenever the code executes the fetching sequence.

Steps to create the application:

Step 1: Initialize the project from terminal using the command.

npx create-react-app jokegenerator
Step 2: Navigate to the project folder using the command.
cd jokegenerator

Step 3: Create a folder called components and add two files in it Button.js and Joke.js
Example: Write the following code in respective files.

App.js: This file imports the components to render it on the web page
Joke.js: This file contains the joke to be displayed and makes the API call
Joke.css: This file contains the styling of all the elements
Button.js: This file contains the button component which generates the joke on click
Button.css: This file contains the styling of button element

Javascript

// App.js

import Joke from "./components/Joke";

function App() {
    return (
        <div className="App">
            <h1>Joke Generator Using React and Joke API</h1>
            <Joke/>
        </div>
    );
}

export default App;


// Joke.js

import React from "react";

import Button from "./Button";
import './Joke.css';

const Joke = () => {
    const [Joke, setJoke] = React.useState("");

    const fetchApi = () => {
        fetch("https://sv443.net/jokeapi/v2/joke/Programming?type=single")
            .then((res) => res.json())
            .then((data) => setJoke(data.joke));
    };

    return (
        <div className="joke">
            <Button callApi={fetchApi} /> 
            <p>{Joke}</p>    
        </div>
    );
}

export default Joke;

CSS


/* Joke.css */

body {
    background-color: rgb(47, 97, 80);
}

.joke {
    width: auto;
    height: auto;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: beige;
}

h1 {
    text-align: center;
    color: beige;
}

Javascript


// Button.js

import React from "react";
import './Button.css'

const Button = (props) => {
    return <button onClick={props.callApi}>
        Click to generate a joke.
    </button>;
}

// Export Button Component
export default Button;

CSS

/* Button.css */

button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #70a03a;
    color: #ffffff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .5s;
}

button:hover {
    background-color: #c1f590;
}

button:active {
    background-color: #297910;
}

Steps to run the application:

Step 1: Type the following command in terminal of your project directory

npm start
Step 2: Type the following URL in your web browser.
http://localhost:3000/