使用 ReactJS 构建一个简单的 Song Lyrics Finder 应用程序

React 是一个非常棒的前端库，我们可以使用它来构建用户界面。在本文中，我们将构建一个简单的应用程序来查找任何歌曲的歌词。对于初学者来说，这是一个完美的项目，因为它将教您如何使用 API 获取信息并相应地显示该信息。

先决条件：该项目的先决条件是：

• React.js 的基础知识

由于我们正在构建一个歌词查找器应用程序，我们需要两条信息，即歌曲名称和艺术家姓名。为此，在 UI 中，我们将有两个用户输入部分。在获得这些输入后，我们将调用 API 来获取所需的歌词并相应地显示它们。

创建一个 React 应用程序并安装一些 npm 包：

第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

npx create-react-app lyrics-finder

第2步：现在，通过运行以下命令进入项目文件夹，即歌词查找器：

cd lyrics-finder

第 3 步：让我们安装此项目所需的一些 npm 包：

npm install axios

项目结构：它看起来像这样：

示例：让我们构建应用程序。

• App.js ：这是唯一包含整个应用程序逻辑的组件。我们将使用一个名为useState的 React 钩子来管理功能组件中的状态。首先，我们声明两个状态变量来存储歌曲和艺术家的名字。接下来，我们将创建一个名为“searchLyrics”的函数。每当用户单击搜索按钮时，它都会触发“searchLyrics”函数，该函数将使用所需参数调用 API，并将结果存储在另一个名为“lyrics”的状态变量中。我们将使用开源 API 来获取歌词。

Javascript

import './App.css';
import Axios from 'axios';
import { useState } from 'react';
  
function App() {
    const [artist, setArtist] = useState("");
    const [song, setSong] = useState("");
    const [lyrics, setLyrics] = useState("");
  
    function searchLyrics() {
        if (artist === "" || song === "") {
            return;
        }
        Axios.get(
`https://api.lyrics.ovh/v1/${artist}/${song}`).then(res => {
            console.log(res.data.lyrics);
            setLyrics(res.data.lyrics);
        })
    }
  
    return (
        

            
Lyrics Finder ????
  
             { setArtist(e.target.value) }} />
             { setSong(e.target.value) }} />
             searchLyrics()}>
                    ???? Search
            

            
{lyrics}
        
    );
}
  
export default App;

• App.css：现在让我们编辑名为 App.css 的文件来为我们的应用设置样式。

CSS

@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat&display=swap");
.App {
    min-height: 100vh;
    height: auto;
    text-align: center;
    font-family: "Montserrat", sans-serif;
}
  
h1 {
    font-family: "Fredoka One", cursive;
    color: #ff7a8a;
}
  
pre {
    font-size: 24px;
    color: #113a5d;
}
  
hr {
    margin-top: 20px;
    width: 60%;
}
  
.inp {
    width: 200px;
    height: 40px;
    border: 2px solid #113a5d;
    margin: 0px 10px;
    padding-left: 6px;
    font-size: 22px;
}
  
.btn {
    width: 90px;
    height: 40px;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：