Membina Apl Pencari Kripto dengan React

pengenalan

Mata wang kripto sangat popular hari ini, dan dengan banyaknya syiling yang tersedia, adalah penting untuk mempunyai alat untuk mencari dan melihat butiran tentangnya dengan mudah. Apl Crypto Finder melakukan perkara itu. Dibina dengan React, apl ini menyediakan pengalaman yang lancar untuk pengguna mencari, menapis dan melihat butiran mata wang kripto.

Gambaran Keseluruhan Projek

Apl Crypto Finder terdiri daripada:

• Antara Muka Carian: Pengguna boleh mencari mata wang kripto mengikut nama.
• Senarai Mata Wang Kripto: Dipaparkan sebagai kad, menunjukkan maklumat asas.
• Paparan Terperinci: Mengklik pada kad mata wang kripto menunjukkan maklumat yang lebih terperinci tentang syiling itu.

Ciri-ciri

• Fungsi Carian: Tapis mata wang kripto mengikut nama.
• Penghalaan Dinamik: Lihat maklumat terperinci mata wang kripto yang dipilih.
• Reka Bentuk Responsif: Memastikan apl kelihatan bagus pada saiz skrin yang berbeza.
• Petunjuk Pemuatan: Tunjukkan pemuat semasa data sedang diambil.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna.
• Axios: Untuk membuat permintaan HTTP.
• Penghala Reaksi: Untuk penghalaan dan navigasi.
• API CoinGecko: Untuk mengambil data mata wang kripto.

Struktur Projek

Berikut ialah gambaran keseluruhan ringkas tentang struktur projek:

• src/
  • komponen/
  • CryptoFinder.js
  • CryptoDetails.js
  • Navbar.js
  • Footer.js
  • App.js
  • App.css

Pemasangan

Untuk bermula dengan apl Crypto Finder, ikut langkah ini:

1. Klon Repositori

   git clone https://github.com/abhishekgurjar-in/Crypto-Finder
   cd crypto-finder

1. Pasang Ketergantungan

   npm install

1. Mulakan Pelayan Pembangunan

   npm start

1. Buka penyemak imbas anda dan navigasi ke http://localhost:3000 untuk melihat apl sedang beraksi.

Penggunaan

• Cari Mata Wang Kripto: Taip dalam kotak carian dan klik "Cari" untuk menapis senarai mata wang kripto.
• Lihat Butiran: Klik pada kad mata wang kripto untuk melihat maklumat terperinci.

Penerangan Kod

Komponen Apl

Komponen App.js menyediakan penghalaan dan termasuk komponen Navbar dan Footer.

import React from "react";
import CryptoFinder from "./components/CryptoFinder";
import "./App.css";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import {Route,Routes} from "react-router-dom"
import CryptoDetails from "./components/CryptoDetails";
const App = () => {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<CryptoFinder/>}/>
        <Route path="/details/:id" element={<CryptoDetails/>}/>
      </Routes>

      <Footer />
    </div>
  );
};

export default App;

Komponen CryptoFinder

Komponen CryptoFinder.js mengendalikan pengambilan dan memaparkan senarai mata wang kripto. Ia termasuk bar carian untuk menapis hasil.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

const CryptoFinder = () => {
  const [search, setSearch] = useState("");
  const [crypto, setCrypto] = useState([]);
  const [filteredCrypto, setFilteredCrypto] = useState([]);

  useEffect(() => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/markets`, {
        params: {
          vs_currency: "inr",
          order: "market_cap_desc",
          per_page: 100,
          page: 1,
          sparkline: false,
        },
      })
      .then((res) => {
        setCrypto(res.data);
        setFilteredCrypto(res.data);
      });
  }, []);

  const handleSearch = () => {
    const filteredData = crypto.filter((data) => {
      return data.name.toLowerCase().includes(search.toLowerCase());
    });
    setFilteredCrypto(filteredData);
  };

  if (crypto.length === 0) {
    return (
      <div className="loader-box">
        <div className="loader"></div>
      </div>
    );
  }

  return (
    <div className="crypto-finder">
      <div className="input-box">
        <input
          type="text"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          onKeyDown={handleSearch}
          placeholder="Search for a cryptocurrency"
        />
        <button onClick={handleSearch}>Search</button>
      </div>
      <div className="cards">
        {filteredCrypto.map((val, id) => (
          <div className="card" key={id}>
            <img src={val.image} alt={val.name} />
            <h1>{val.name}</h1>
            <h4>{val.symbol.toUpperCase()}</h4>
            <h4>₹{val.current_price.toFixed(2)}</h4>
            <Link to={`/details/${val.id}`}>
              <button>View Details</button>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CryptoFinder;

Komponen CryptoDetails

Komponen CryptoDetails.js mengambil dan memaparkan maklumat terperinci tentang mata wang kripto yang dipilih.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

const CryptoDetails = () => {
  const { id } = useParams();
  const [cryptoDetails, setCryptoDetails] = useState(null);

  useEffect(() => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/${id}`, {
        params: {
          localization: false,
        },
      })
      .then((res) => {
        setCryptoDetails(res.data);
      });
  }, [id]);

  if (!cryptoDetails) {
    return (
      <div className="loader-box">
        <div className="loader"></div>
      </div>
    );
  }

  return (
    <div className="crypto-details">
      <div className="basic-details-image-box">
        <div className="basic-details">
          <h1>{cryptoDetails.name}</h1>
          <h4>{cryptoDetails.symbol.toUpperCase()}</h4>
          <h4>
            Current Price: ₹
            {cryptoDetails.market_data.current_price.inr.toFixed(2)}
          </h4>
        </div>
        <div className="image-box">
          <img src={cryptoDetails.image.large} alt={cryptoDetails.name} />
        </div>
      </div>
      <div className="detail-desc">
      <h3>Description :</h3>
      <p >{cryptoDetails.description.en}</p>
      </div>


  <div className="market-and-additional">
  <div className="market-data">
        <h2>Market Data</h2>
        <p>
          <b>Market Cap: </b>₹
          {cryptoDetails.market_data.market_cap.inr.toLocaleString()}
        </p>
        <p>
          <b>Total Volume: </b>₹
          {cryptoDetails.market_data.total_volume.inr.toLocaleString()}
        </p>
        <p><b>24h High:</b> ₹{cryptoDetails.market_data.high_24h.inr}</p>
        <p><b>24h Low:</b> ₹{cryptoDetails.market_data.low_24h.inr}</p>
        <p>
         <b> Price Change (24h):</b> ₹
          {cryptoDetails.market_data.price_change_24h.toFixed(2)}
        </p>
        <p>
          <b>Price Change Percentage (24h):</b>{" "}
          {cryptoDetails.market_data.price_change_percentage_24h.toFixed(2)}%
        </p>
      </div>

      <div className="additional-info">
        <h2>Additional Information</h2>
        <p><b>Genesis Date:</b> {cryptoDetails.genesis_date || "N/A"}</p>
        <p>
          <b>Homepage:</b>{" "}
          <a
            href={cryptoDetails.links.homepage[0]}
            target="_blank"
            rel="noopener noreferrer"
          >
            {cryptoDetails.links.homepage[0]}
          </a>
        </p>
        <p>
         <b> Blockchain Site:</b>{" "}
          <a
            href={cryptoDetails.links.blockchain_site[0]}
            target="_blank"
            rel="noopener noreferrer"
          >
            {cryptoDetails.links.blockchain_site[0]}
          </a>
        </p>
      </div>
  </div>
    </div>
  );
};

export default CryptoDetails;

Komponen Navbar

Komponen Navbar.js menyediakan pengepala untuk apl.

import React from 'react'

const Navbar = () => {
  return (
    <div className="navbar">
    <h1>Crypto Finder</h1>
  </div>
  )
}

export default Navbar

Komponen Pengaki

Komponen Footer.js menyediakan pengaki untuk apl.

import React from 'react'

const Footer = () => {
  return (
    <div className="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
  )
}

export default Footer

Demo Langsung

Anda boleh melihat demo langsung apl Crypto Finder di sini.

Kesimpulan

Membina apl Crypto Finder merupakan pengalaman yang menyeronokkan dan pendidikan. Ia menunjukkan cara menggunakan React untuk mengambil dan memaparkan data, mengendalikan penghalaan dan mencipta antara muka yang responsif dan mesra pengguna. Saya harap anda mendapati projek ini membantu dan ia memberi inspirasi kepada anda untuk mencipta aplikasi anda sendiri dengan React!

Kredit

• Dokumentasi React: React Docs
• API CoinGecko: CoinGecko
• Dokumentasi Axios: Dokumen Axios

Pengarang

Abhishek Gurjar

---

Jangan ragu untuk melaraskan atau menambah lebih banyak butiran berdasarkan pilihan anda atau ciri tambahan yang mungkin telah anda laksanakan.

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