In this tutorial, we will guide you through building a simple and fun Joke Generator using React. This project is perfect for beginners who want to practice handling API requests in React and managing state within functional components.
This Joke Generator fetches a random joke from an API and displays it on the screen when the user clicks a button. It has a clean and minimalistic user interface, making it simple to interact with. This project teaches how to integrate APIs and manage component states in React.
The project is structured as follows:
├── public ├── src │ ├── components │ │ └── Joke.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
The Joke component is responsible for fetching a joke from the API and updating the component's state to display the joke. It uses React's useState hook to manage the joke state and the fetchJoke function to retrieve the data from the API.
import { useState } from "react"; const Joke = () => { const [joke, setJoke] = useState(""); const fetchJoke = () => { fetch("https://v2.jokeapi.dev/joke/Any?type=single") .then((response) => response.json()) .then((data) => setJoke(data.joke)); }; return ( <> <div className="joke-container"> <div className="output"> <p>{joke}</p> </div> </div> <button className="button" onClick={fetchJoke}> <p>Generate Joke</p> </button> </> ); }; export default Joke;
In this component, the useState hook is used to store the fetched joke. The fetchJoke function is triggered when the "Generate Joke" button is clicked, fetching a new joke from the API and updating the joke state with the result.
The App component handles the overall layout and renders the Joke component. It also includes a header and footer to enhance the look of the application.
import Joke from "./components/Joke"; import "./App.css"; const App = () => { return ( <div className="app"> <div className="header"> <h1>Joke Generator</h1> </div> <Joke /> <div className="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div> </div> ); }; export default App;
This component organizes the layout and adds a title (Joke Generator) and a footer that gives credit to the creator.
The CSS styles ensure the layout is clean and responsive. The joke container is centered on the page, and the button is styled to give a modern look.
* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: sans-serif; background-color: #ffff42; color: black; } .app { margin-top: 50px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .header { margin-bottom: 10px; } .joke-container { margin: 15px; width: 400px; height: 180px; display: flex; flex-direction: column; align-items: center; border: 1px solid black; background-color: #c2edf6; border-radius: 7px; } .output { width: 350px; font-size: 16px; font-weight: 500; } .button { width: 400px; background-color: #0075e1; border: none; color: white; font-size: 18px; cursor: pointer; border-radius: 10px; } .button:hover { background-color: #4086c8; } .footer { margin-top: 100px; }
The .app class styles the main layout, .joke-container ensures the joke is displayed inside a bordered container, and .button provides styling for the joke generation button.
To get started with this project, clone the repository and install the dependencies:
git clone https://github.com/abhishekgurjar-in/joke-generator.git cd joke-generator npm install npm start
This will start the development server, and the application will be running at http://localhost:3000.
You can check out the live demo of the Joke Generator here.
This simple Joke Generator project is a great way to practice React fundamentals, including state management and API requests. It also serves as an example of how to create interactive web applications with minimal code.
Abhishek Gurjar is a web developer passionate about building interactive and responsive web applications. You can follow his work on GitHub.
The above is the detailed content of Building a Joke Generator Using React. For more information, please follow other related articles on the PHP Chinese website!