使用 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}

}