Membina Apl Pencari Lirik dengan React

pengenalan

Dalam tutorial ini, kami akan mencipta aplikasi web Pencari Lirik menggunakan React. Projek ini sesuai untuk mereka yang ingin berlatih menyepadukan API, mengurus keadaan dan memaparkan kandungan dinamik.

Gambaran Keseluruhan Projek

Pencari Lirik membolehkan pengguna mencari lirik lagu dengan memasukkan tajuk lagu dan nama artis. Ia mengambil lirik daripada API awam dan memaparkannya pada skrin. Pengguna boleh mencari dan membaca lirik lagu kegemaran mereka dengan cepat.

Ciri-ciri

• Fungsi Carian: Pengguna boleh mencari lirik mengikut tajuk lagu dan nama artis.
• Penyatuan API: Mengambil lirik daripada API lirik awam.
• Kandungan Dinamik: Memaparkan lirik secara dinamik berdasarkan input pengguna.
• Antara Muka Mesra Pengguna: Antara muka yang bersih dan mudah digunakan untuk mencari dan melihat lirik.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna dan mengurus keadaan komponen.
• CSS: Untuk menggayakan aplikasi.
• JavaScript: Untuk mengendalikan permintaan API dan logik apl.

Struktur Projek

Projek ini dianjurkan seperti berikut:

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

Komponen Utama

• LyricsFinder.jsx: Mengurus logik carian dan memaparkan lirik yang diambil.
• SearchForm.jsx: Menyediakan borang untuk pengguna memasukkan tajuk lagu dan nama artis.
• App.jsx: Memaparkan reka letak utama dan komponen LyricsFinder.

Penerangan Kod

Komponen Pencari Lirik

Komponen LyricsFinder mengendalikan integrasi API dan mengurus hasil carian.

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}

}