Erstellen eines Witzgenerators mit React

Einführung

In diesem Tutorial führen wir Sie durch den Aufbau eines einfachen und unterhaltsamen Witzgenerators mit React. Dieses Projekt ist perfekt für Anfänger, die den Umgang mit API-Anfragen in React und die Statusverwaltung innerhalb funktionaler Komponenten üben möchten.

Projektübersicht

Dieser Witzgenerator ruft einen zufälligen Witz von einer API ab und zeigt ihn auf dem Bildschirm an, wenn der Benutzer auf eine Schaltfläche klickt. Es verfügt über eine klare und minimalistische Benutzeroberfläche, die die Interaktion erleichtert. Dieses Projekt lehrt, wie man APIs integriert und Komponentenzustände in React verwaltet.

Merkmale

• Zufällige Witzgenerierung: Ruft einen zufälligen Witz von einer API ab und zeigt ihn auf dem Bildschirm an.
• Responsive Design: Passt sich für ein benutzerfreundliches Erlebnis an verschiedene Bildschirmgrößen an.
• Einfach zu bedienende Oberfläche: Eine einzige Schaltfläche, um bei jedem Klick einen neuen Witz zu generieren.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche.
• CSS: Zum Gestalten der Anwendung und Sicherstellen eines responsiven Designs.
• Witz-API: Zum Abrufen zufälliger Witze aus dem Internet.

Projektstruktur

Das Projekt ist wie folgt aufgebaut:

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

Schlüsselkomponenten

• Joke.jsx: Enthält die Logik zum Abrufen und Anzeigen von Witzen.
• App.jsx: Umschließt die Joke-Komponente und verwaltet das Gesamtlayout der Anwendung.
• App.css: Stellt Stil für die App und die Komponenten bereit.

Code-Erklärung

Scherzkomponente

Die Joke-Komponente ist dafür verantwortlich, einen Witz von der API abzurufen und den Status der Komponente zu aktualisieren, um den Witz anzuzeigen. Es verwendet den useState-Hook von React, um den Witzstatus zu verwalten, und die fetchJoke-Funktion, um die Daten von der API abzurufen.

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 dieser Komponente wird der useState-Hook verwendet, um den abgerufenen Witz zu speichern. Die fetchJoke-Funktion wird ausgelöst, wenn auf die Schaltfläche „Witz generieren“ geklickt wird. Sie ruft einen neuen Witz von der API ab und aktualisiert den Witzstatus mit dem Ergebnis.

App-Komponente

Die App-Komponente verwaltet das Gesamtlayout und rendert die Joke-Komponente. Es enthält außerdem eine Kopf- und Fußzeile, um das Erscheinungsbild der Anwendung zu verbessern.

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;

Diese Komponente organisiert das Layout und fügt einen Titel (Joke Generator) und eine Fußzeile hinzu, die den Ersteller würdigt.

CSS-Styling

Die CSS-Stile sorgen dafür, dass das Layout sauber und reaktionsschnell ist. Der Witzcontainer ist auf der Seite zentriert und die Schaltfläche ist so gestaltet, dass sie ein modernes Aussehen verleiht.

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

Die .app-Klasse formatiert das Hauptlayout, .joke-container stellt sicher, dass der Witz in einem umrandeten Container angezeigt wird, und .button stellt den Stil für die Schaltfläche zur Witzgenerierung bereit.

Installation und Nutzung

Um mit diesem Projekt zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

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

Dadurch wird der Entwicklungsserver gestartet und die Anwendung wird unter http://localhost:3000 ausgeführt.

Live-Demo

Sie können sich hier die Live-Demo des Joke Generators ansehen.

Abschluss

Dieses einfache Joke Generator-Projekt ist eine großartige Möglichkeit, die React-Grundlagen zu üben, einschließlich Statusverwaltung und API-Anfragen. Es dient auch als Beispiel dafür, wie man interaktive Webanwendungen mit minimalem Code erstellt.

Credits

• Inspiration: Das Projekt ist von Online-Witzgeneratoren und API-basierten Projekten inspiriert.

Autor

Abhishek Gurjar ist ein Webentwickler, der sich leidenschaftlich für die Entwicklung interaktiver und reaktionsfähiger Webanwendungen interessiert. Sie können seine Arbeit auf GitHub verfolgen.

Das obige ist der detaillierte Inhalt vonErstellen eines Witzgenerators mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!