React を使用した Crypto Finder アプリの構築

導入

最近、暗号通貨が大流行しており、大量のコインが利用できるため、それらの詳細を簡単に検索して表示できるツールが不可欠です。 Crypto Finder アプリはまさにそれを行います。 React で構築されたこのアプリは、ユーザーが仮想通貨の詳細を検索、フィルター、表示できるシームレスなエクスペリエンスを提供します。

プロジェクト概要

Crypto Finder アプリは以下で構成されます:

• 検索インターフェイス: ユーザーは名前で暗号通貨を検索できます。
• 暗号通貨のリスト: 基本情報を示すカードとして表示されます。
• 詳細ビュー: 暗号通貨カードをクリックすると、そのコインに関する詳細情報が表示されます。

特徴

• 検索機能: 仮想通貨を名前でフィルターします。
• 動的ルーティング: 選択した暗号通貨の詳細情報を表示します。
• レスポンシブ デザイン: アプリがさまざまな画面サイズでも適切に表示されるようにします。
• 読み込みインジケーター: データのフェッチ中にローダーを表示します。

使用されている技術

• React: ユーザー インターフェイスの構築用。
• Axios: HTTP リクエストを行うため。
• React Router: ルーティングとナビゲーション用。
• CoinGecko API: 暗号通貨データを取得するため。

プロジェクトの構造

プロジェクト構造の概要を次に示します:

• ソース/
  • コンポーネント/
  • CryptoFinder.js
  • CryptoDetails.js
  • Navbar.js
  • フッター.js
  • App.js
  • App.css

インストール

Crypto Finder アプリの使用を開始するには、次の手順に従います:

1. リポジトリのクローンを作成します

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

1. 依存関係をインストールする

   npm install

1. 開発サーバーを起動します

   npm start

1. ブラウザを開いて http://localhost:3000 に移動し、アプリの動作を確認します。

使用法

• 暗号通貨の検索: 検索ボックスに入力し、「検索」をクリックして暗号通貨のリストをフィルターします。
• 詳細の表示: 暗号通貨カードをクリックして詳細情報を表示します。

コードの説明

アプリコンポーネント

App.js コンポーネントはルーティングを設定し、Navbar コンポーネントと 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;

クリプトファインダーコンポーネント

CryptoFinder.js コンポーネントは、暗号通貨のリストの取得と表示を処理します。結果をフィルタリングするための検索バーが含まれています。

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;

CryptoDetails コンポーネント

CryptoDetails.js コンポーネントは、選択した暗号通貨に関する詳細情報を取得して表示します。

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;

ナビゲーションバーコンポーネント

Navbar.js コンポーネントはアプリのヘッダーを提供します。

import React from 'react'

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

export default Navbar

フッターコンポーネント

Footer.js コンポーネントはアプリのフッターを提供します。

import React from 'react'

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

export default Footer

ライブデモ

ここで Crypto Finder アプリのライブデモをご覧いただけます。

結論

Crypto Finder アプリの構築は楽しくて勉強になりました。 React を使用してデータの取得と表示、ルーティングの処理、応答性の高いユーザーフレンドリーなインターフェイスの作成を行う方法を示します。このプロジェクトがお役に立ち、React を使用して独自のアプリケーションを作成するきっかけになれば幸いです!

クレジット

• React ドキュメント: React ドキュメント
• CoinGecko API: CoinGecko
• Axios ドキュメント: Axios ドキュメント

著者

アビシェク・グルジャル

---

好みや実装した追加機能に基づいて、自由に詳細を調整または追加してください。

以上がReact を使用した Crypto Finder アプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。