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 コンポーネントは 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 のライブデモをチェックしてください。

結論

Lyrics Finder プロジェクトは、API の統合と React での動的コンテンツの処理を練習するための優れた方法です。これは、クリーンでインタラクティブなユーザー インターフェイスを備えた便利なアプリケーションを構築する実践的な例を示しています。

クレジット

• インスピレーション: このプロジェクトは、音楽を聴きながら歌詞に素早くアクセスしたいというニーズからインスピレーションを受けています。

著者

Abhishek Gurjar は、インタラクティブで魅力的な Web アプリケーションの構築に情熱を注ぐ Web 開発者です。彼の作品は GitHub でフォローできます。

以上がReact を使用して歌詞ファインダー アプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。