使用 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 组件提供了一个表单供用户输入歌曲标题和艺术家姓名。

import { useState } from "react";

const SearchForm = ({ onSearch }) => {
  const [song, setSong] = useState("");
  const [artist, setArtist] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(song, artist);
  };

  return (
    <form onSubmit={handleSubmit} className="search-form">
      <input
        type="text"
        placeholder="Song Title"
        value={song}
        onChange={(e) => setSong(e.target.value)}
      />
      <input
        type="text"
        placeholder="Artist Name"
        value={artist}
        onChange={(e) => setArtist(e.target.value)}
      />
      <button type="submit">Search</button>
    </form>
  );
};

export default SearchForm;

该组件接受用户输入的歌曲标题和艺术家并触发搜索功能。

应用程序组件

App 组件管理布局并渲染 LyricsFinder 组件。

import LyricsFinder from './components/LyricsFinder'
import "./App.css"
const App = () => {
  return (
    <div className='app'>
      <div className="heading">
        <h1>Lyrics Finder</h1>
      </div>
      <LyricsFinder/>
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  )
}

export default App

该组件提供标题并在中心呈现 LyricsFinder 组件。

CSS 样式

CSS 设计应用程序以确保界面干净且用户友好。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.app {
  width: 100%;
  height: 100vh;
  background-image: url(./assets/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heading {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  background-color: #eab229;
  color: black;
  border: 2px solid white;
  border-radius: 20px;
  text-align: center;
}

.heading h1 {
  font-size: 18px;
}

.lyrics-container {
  margin-top: 10px;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.input-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.track-input-box {
  margin: 7px;
  width: 500px;
  height: 30px;
  background-color: #363636;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow: hidden;
}

.track-input-box input {
  width: 480px;
  height: 30px;
  background-color: #363636;
  color: white;
  margin-left: 10px;
  outline: none;
  border: none;
}

.input-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.artist-input-box {
  margin: 7px;
  width: 400px;
  height: 30px;
  background-color: #363636;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow: hidden;
}

.artist-input-box input {
  width: 380px;
  height: 30px;
  margin-left: 10px;
  background-color: #363636;
  color: white;
  border: none;
  outline: none;
}

.search-btn {
  width: 100px;
  padding: 6px;
  border-radius: 7px;
  border: 1.5px solid white;
  background-color: #0e74ad;
  color: white;
  font-size: 16px;
}

.search-btn:hover {
  background-color: #15557a;
}

.output-container {
  background-color: black;
  width: 600px;
  height: 300px;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow-y: scroll;
  margin-block: 40px;
}

.output-container::-webkit-scrollbar {
  display: none;
}

.output-container p {
  margin: 30px;
  text-align: center;
  font-size: 16px;
}

.footer {
  font-size: 14px;
  color: white;
}

样式确保布局简洁，具有用户友好的视觉效果和响应式设计。

安装与使用

要开始此项目，请克隆存储库并安装依赖项：

git clone https://github.com/abhishekgurjar-in/lyrics-finder.git
cd lyrics-finder
npm install
npm start

这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。

现场演示

在此处查看歌词查找器的现场演示。

结论

Lyrics Finder 项目是练习集成 API 和在 React 中处理动态内容的绝佳方法。它提供了一个使用干净且交互式的用户界面构建有用的应用程序的实际示例。

制作人员

• 灵感：该项目的灵感来自于在听音乐时快速访问歌词的需求。

作者

Abhishek Gurjar 是一位 Web 开发人员，热衷于构建交互式且引人入胜的 Web 应用程序。您可以在 GitHub 上关注他的工作。

以上是使用 React 构建歌词查找器应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！