Construire un générateur de blagues à l'aide de React

Introduction

Dans ce tutoriel, nous vous guiderons dans la création d'un générateur de blagues simple et amusant à l'aide de React. Ce projet est parfait pour les débutants qui souhaitent s'entraîner à gérer les requêtes API dans React et à gérer l'état au sein des composants fonctionnels.

Aperçu du projet

Ce générateur de blagues récupère une blague aléatoire à partir d'une API et l'affiche à l'écran lorsque l'utilisateur clique sur un bouton. Il possède une interface utilisateur claire et minimaliste, ce qui facilite l'interaction. Ce projet apprend à intégrer des API et à gérer les états des composants dans React.

Caractéristiques

• Génération de blagues aléatoires : récupère une blague aléatoire à partir d'une API et l'affiche à l'écran.
• Conception réactive : s'adapte à différentes tailles d'écran pour une expérience conviviale.
• Interface facile à utiliser : Un seul bouton pour générer une nouvelle blague à chaque clic.

Technologies utilisées

• React : Pour créer l'interface utilisateur.
• CSS : Pour styliser l'application et garantir un design réactif.
• API Joke : pour récupérer des blagues aléatoires sur le Web.

Structure du projet

Le projet est structuré comme suit :

├── public
├── src
│   ├── components
│   │   └── Joke.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Composants clés

• Joke.jsx : contient la logique de récupération et d'affichage des blagues.
• App.jsx : enveloppe le composant Joke et gère la présentation globale de l'application.
• App.css : fournit un style pour l'application et les composants.

Explication du code

Composant de blague

Le composant Joke est chargé de récupérer une blague depuis l'API et de mettre à jour l'état du composant pour afficher la blague. Il utilise le hook useState de React pour gérer l'état du joke et la fonction fetchJoke pour récupérer les données de l'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;

Dans ce composant, le hook useState est utilisé pour stocker la blague récupérée. La fonction fetchJoke est déclenchée lorsque vous cliquez sur le bouton "Générer une blague", récupérant une nouvelle blague de l'API et mettant à jour l'état de la blague avec le résultat.

Composant d'application

Le composant App gère la mise en page globale et restitue le composant Joke. Il comprend également un en-tête et un pied de page pour améliorer l'apparence de l'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;

Ce composant organise la mise en page et ajoute un titre (Joke Generator) et un pied de page qui donne crédit au créateur.

Style CSS

Les styles CSS garantissent que la mise en page est propre et réactive. Le conteneur de blagues est centré sur la page et le bouton est conçu pour donner un look moderne.

* {
  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;
}

La classe .app stylise la mise en page principale, .joke-container garantit que la blague est affichée dans un conteneur bordé et .button fournit le style du bouton de génération de blague.

Installation et utilisation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances :

git clone https://github.com/abhishekgurjar-in/joke-generator.git
cd joke-generator
npm install
npm start

Cela démarrera le serveur de développement et l'application s'exécutera sur http://localhost:3000.

Démo en direct

Vous pouvez consulter la démo en direct du générateur de blagues ici.

Conclusion

Ce simple projet Joke Generator est un excellent moyen de mettre en pratique les principes fondamentaux de React, notamment la gestion des états et les requêtes API. Il sert également d'exemple sur la façon de créer des applications Web interactives avec un minimum de code.

Crédits

• Inspiration : Le projet s'inspire des générateurs de blagues en ligne et des projets basés sur des API.

Auteur

Abhishek Gurjar est un développeur Web passionné par la création d'applications Web interactives et réactives. Vous pouvez suivre son travail sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!