使用 React 建立歌詞查找器應用程式

介紹

在本教學課程中，我們將使用 React 建立一個 Lyrics Finder Web 應用程式。該專案非常適合想要練習整合 API、管理狀態和顯示動態內容的人。

項目概況

歌詞查找器允許使用者透過輸入歌曲標題和藝術家姓名來搜尋歌詞。它從公共 API 獲取歌詞並將其顯示在螢幕上。用戶可以快速找到並閱讀自己喜歡的歌曲的歌詞。

特徵

• 搜尋功能：使用者可以按歌曲標題和藝人名稱搜尋歌詞。
• API 整合：從公開歌詞 API 取得歌詞。
• 動態內容：依照使用者輸入動態顯示歌詞。
• 使用者友善的介面：乾淨且易於使用的介面，用於搜尋和查看歌詞。

使用的技術

• React：用於建立使用者介面和管理元件狀態。
• CSS：用於設計應用程式的樣式。
• JavaScript：用於處理 API 請求和應用程式邏輯。

專案結構

專案組織如下：

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

關鍵零件

• LyricsFinder.jsx：管理搜尋邏輯並顯示取得的歌詞。
• SearchForm.jsx：提供一個表單供使用者輸入歌曲標題和藝術家姓名。
• App.jsx：渲染主佈局和 LyricsFinder 元件。

程式碼說明

LyricsFinder 元件

LyricsFinder 元件處理 API 整合並管理搜尋結果。

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}

}