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}"></searchform>
      {loading && <p>Loading...</p>}
      {error && <p classname="error">{error}</p>}
      {lyrics && <pre classname="lyrics">{lyrics}

}