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}

}

); }; export default LyricsFinder;

Nach dem Login kopieren

Diese Komponente verwaltet den Status für Liedtexte, Ladevorgänge und Fehlermeldungen. Es ruft Liedtexte von der API ab und zeigt sie an.

SearchForm-Komponente

Die SearchForm-Komponente bietet Benutzern ein Formular zur Eingabe des Songtitels und des Künstlernamens.

import { useState } from "react";

const SearchForm = ({ onSearch }) => {
  const [song, setSong] = useState("");
  const [artist, setArtist] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(song, artist);
  };

  return (
    <form onSubmit={handleSubmit} className="search-form">
      <input
        type="text"
        placeholder="Song Title"
        value={song}
        onChange={(e) => setSong(e.target.value)}
      />
      <input
        type="text"
        placeholder="Artist Name"
        value={artist}
        onChange={(e) => setArtist(e.target.value)}
      />
      <button type="submit">Search</button>
    </form>
  );
};

export default SearchForm;

Diese Komponente nimmt Benutzereingaben für den Songtitel und den Interpreten entgegen und löst die Suchfunktion aus.

App-Komponente

Die App-Komponente verwaltet das Layout und rendert die LyricsFinder-Komponente.

import LyricsFinder from './components/LyricsFinder'
import "./App.css"
const App = () => {
  return (
    <div className='app'>
      <div className="heading">
        <h1>Lyrics Finder</h1>
      </div>
      <LyricsFinder/>
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  )
}

export default App

Diese Komponente stellt einen Header bereit und rendert die LyricsFinder-Komponente in der Mitte.

CSS-Styling

Das CSS gestaltet die Anwendung, um eine saubere und benutzerfreundliche Oberfläche zu gewährleisten.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.app {
  width: 100%;
  height: 100vh;
  background-image: url(./assets/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heading {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  background-color: #eab229;
  color: black;
  border: 2px solid white;
  border-radius: 20px;
  text-align: center;
}

.heading h1 {
  font-size: 18px;
}

.lyrics-container {
  margin-top: 10px;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.input-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.track-input-box {
  margin: 7px;
  width: 500px;
  height: 30px;
  background-color: #363636;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow: hidden;
}

.track-input-box input {
  width: 480px;
  height: 30px;
  background-color: #363636;
  color: white;
  margin-left: 10px;
  outline: none;
  border: none;
}

.input-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.artist-input-box {
  margin: 7px;
  width: 400px;
  height: 30px;
  background-color: #363636;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow: hidden;
}

.artist-input-box input {
  width: 380px;
  height: 30px;
  margin-left: 10px;
  background-color: #363636;
  color: white;
  border: none;
  outline: none;
}

.search-btn {
  width: 100px;
  padding: 6px;
  border-radius: 7px;
  border: 1.5px solid white;
  background-color: #0e74ad;
  color: white;
  font-size: 16px;
}

.search-btn:hover {
  background-color: #15557a;
}

.output-container {
  background-color: black;
  width: 600px;
  height: 300px;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow-y: scroll;
  margin-block: 40px;
}

.output-container::-webkit-scrollbar {
  display: none;
}

.output-container p {
  margin: 30px;
  text-align: center;
  font-size: 16px;
}

.footer {
  font-size: 14px;
  color: white;
}

Das Design sorgt für ein klares Layout mit benutzerfreundlicher Optik und ansprechendem Design.

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/lyrics-finder.git
cd lyrics-finder
npm install
npm start

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

Live-Demo

Sehen Sie sich hier die Live-Demo des Lyrics Finder an.

Abschluss

Das Lyrics Finder-Projekt ist eine hervorragende Möglichkeit, die Integration von APIs und den Umgang mit dynamischen Inhalten in React zu üben. Es bietet ein praktisches Beispiel für die Erstellung einer nützlichen Anwendung mit einer übersichtlichen und interaktiven Benutzeroberfläche.

Credits

• Inspiration: Das Projekt ist von der Notwendigkeit inspiriert, beim Musikhören schnell auf Songtexte zugreifen zu können.

Autor

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

Das obige ist der detaillierte Inhalt vonErstellen einer Lyrics Finder-App mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!