使用 React 建立歌詞查找器應用程式-js教程-PHP中文網

Building a Lyrics Finder App with 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}

}

); }; export default LyricsFinder;

登入後複製

此元件管理歌詞、載入和錯誤訊息的狀態。它從 API 獲取歌詞並顯示它們。

搜尋表單元件

SearchForm 元件提供了一個表單供使用者輸入歌曲標題和藝術家姓名。

應用程式元件

CSS 樣式

樣式確保版面簡潔，具有使用者友善的視覺效果和響應式設計。

安裝與使用

這將啟動開發伺服器，並且應用程式將在 http://localhost:3000 上運行。

現場演示