Membina Apl Pencari Kripto dengan React-tutorial css-php.cn

Building a Crypto Finder App with 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:

Klon Repositori

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

Salin selepas log masuk

Pasang Ketergantungan

   npm install

Salin selepas log masuk

Mulakan Pelayan Pembangunan

   npm start

Salin selepas log masuk

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!