Membina Apl Pencari Lirik dengan React

pengenalan

Dalam tutorial ini, kami akan mencipta aplikasi web Pencari Lirik menggunakan React. Projek ini sesuai untuk mereka yang ingin berlatih menyepadukan API, mengurus keadaan dan memaparkan kandungan dinamik.

Gambaran Keseluruhan Projek

Pencari Lirik membolehkan pengguna mencari lirik lagu dengan memasukkan tajuk lagu dan nama artis. Ia mengambil lirik daripada API awam dan memaparkannya pada skrin. Pengguna boleh mencari dan membaca lirik lagu kegemaran mereka dengan cepat.

Ciri-ciri

• Fungsi Carian: Pengguna boleh mencari lirik mengikut tajuk lagu dan nama artis.
• Penyatuan API: Mengambil lirik daripada API lirik awam.
• Kandungan Dinamik: Memaparkan lirik secara dinamik berdasarkan input pengguna.
• Antara Muka Mesra Pengguna: Antara muka yang bersih dan mudah digunakan untuk mencari dan melihat lirik.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna dan mengurus keadaan komponen.
• CSS: Untuk menggayakan aplikasi.
• JavaScript: Untuk mengendalikan permintaan API dan logik apl.

Struktur Projek

Projek ini dianjurkan seperti berikut:

├── public
├── src
│   ├── components
│   │   ├── LyricsFinder.jsx
│   │   ├── SearchForm.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Komponen Utama

• LyricsFinder.jsx: Mengurus logik carian dan memaparkan lirik yang diambil.
• SearchForm.jsx: Menyediakan borang untuk pengguna memasukkan tajuk lagu dan nama artis.
• App.jsx: Memaparkan reka letak utama dan komponen LyricsFinder.

Penerangan Kod

Komponen Pencari Lirik

Komponen LyricsFinder mengendalikan integrasi API dan mengurus hasil carian.

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;

Salin selepas log masuk

Komponen ini menguruskan keadaan untuk lirik, pemuatan dan mesej ralat. Ia mengambil lirik daripada API dan memaparkannya.

Komponen Borang Carian

Komponen SearchForm menyediakan borang untuk pengguna memasukkan tajuk lagu dan nama artis.

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;

Komponen ini mengambil input pengguna untuk tajuk lagu dan artis serta mencetuskan fungsi carian.

Komponen Apl

Komponen Apl mengurus reka letak dan memaparkan komponen Pencari Lirik.

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

Komponen ini menyediakan pengepala dan memaparkan komponen LyricsFinder di tengah.

Penggayaan CSS

CSS menggayakan aplikasi untuk memastikan antara muka yang bersih dan mesra pengguna.

* {
  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;
}

Penggayaan memastikan reka letak yang bersih dengan visual mesra pengguna dan reka bentuk responsif.

Pemasangan dan Penggunaan

Untuk memulakan projek ini, klon repositori dan pasang kebergantungan:

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

Ini akan memulakan pelayan pembangunan, dan aplikasi akan berjalan di http://localhost:3000.

Demo Langsung

Lihat demo langsung Pencari Lirik di sini.

Kesimpulan

Projek Pencari Lirik ialah cara terbaik untuk berlatih menyepadukan API dan mengendalikan kandungan dinamik dalam React. Ia menyediakan contoh praktikal membina aplikasi yang berguna dengan antara muka pengguna yang bersih dan interaktif.

Kredit

• Inspirasi: Projek ini diilhamkan oleh keperluan untuk akses pantas kepada lirik lagu sambil mendengar muzik.

Pengarang

Abhishek Gurjar ialah pembangun web yang bersemangat membina aplikasi web yang interaktif dan menarik. Anda boleh mengikuti karya beliau di GitHub.

Atas ialah kandungan terperinci Membina Apl Pencari Lirik dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!