Erstellen einer Lyrics Finder-App mit React

Einführung

In diesem Tutorial erstellen wir mit React eine Lyrics Finder-Webanwendung. Dieses Projekt ist perfekt für diejenigen, die die Integration von APIs, die Statusverwaltung und die Anzeige dynamischer Inhalte üben möchten.

Projektübersicht

Mit dem Lyrics Finder können Benutzer nach Songtexten suchen, indem sie den Songtitel und den Künstlernamen eingeben. Es ruft die Liedtexte von einer öffentlichen API ab und zeigt sie auf dem Bildschirm an. Benutzer können die Texte ihrer Lieblingslieder schnell finden und lesen.

Merkmale

• Suchfunktion: Benutzer können nach Songtiteln und Künstlernamen nach Liedtexten suchen.
• API-Integration: Ruft Liedtexte von einer öffentlichen Liedtext-API ab.
• Dynamischer Inhalt: Zeigt Liedtexte dynamisch basierend auf Benutzereingaben an.
• Benutzerfreundliche Oberfläche: Saubere und benutzerfreundliche Oberfläche zum Suchen und Anzeigen von Liedtexten.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche und Verwalten von Komponentenzuständen.
• CSS: Zum Gestalten der Anwendung.
• JavaScript: Zur Bearbeitung von API-Anfragen und App-Logik.

Projektstruktur

Das Projekt ist wie folgt organisiert:

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

Schlüsselkomponenten

• LyricsFinder.jsx: Verwaltet die Suchlogik und zeigt die abgerufenen Liedtexte an.
• SearchForm.jsx: Stellt ein Formular für Benutzer zur Eingabe von Songtiteln und Künstlernamen bereit.
• App.jsx: Rendert das Hauptlayout und die LyricsFinder-Komponente.

Code-Erklärung

LyricsFinder-Komponente

Die LyricsFinder-Komponente übernimmt die API-Integration und verwaltet die Suchergebnisse.

import { useState } from "react";
import SearchForm from "./SearchForm";

const LyricsFinder = () => {
  const [lyrics, setLyrics] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const fetchLyrics = async (song, artist) => {
    setLoading(true);
    setError("");
    try {
      const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
      if (!response.ok) {
        throw new Error("Lyrics not found");
      }
      const data = await response.json();
      setLyrics(data.lyrics);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="lyrics-finder">
      <SearchForm onSearch={fetchLyrics} />
      {loading && <p>Loading...</p>}
      {error && <p className="error">{error}</p>}
      {lyrics && <pre className="lyrics">{lyrics}

}