React を使用して歌詞ファインダーアプリを構築する-jsチュートリアル-php.cn

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 コンポーネントは 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 コンポーネントは、ユーザーが曲のタイトルとアーティスト名を入力するためのフォームを提供します。

このコンポーネントは、曲のタイトルとアーティストに関するユーザー入力を受け取り、検索機能をトリガーします。

アプリコンポーネント

App コンポーネントはレイアウトを管理し、LyricsFinder コンポーネントをレンダリングします。

このコンポーネントはヘッダーを提供し、中央に LyricsFinder コンポーネントをレンダリングします。

CSS スタイル

CSS はアプリケーションをスタイル設定して、クリーンでユーザーフレンドリーなインターフェイスを保証します。