使用 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 上运行。

现场演示