当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 React 构建加密货币查找器应用程序

使用 React 构建加密货币查找器应用程序

来源：dev.to 2024-09-13 18:39:54 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《使用 React 构建加密货币查找器应用程序》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

介绍

加密货币如今风靡一时，随着可用硬币的数量过多，有一个工具可以轻松搜索和查看它们的详细信息是至关重要的。 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 应用程序，请按照以下步骤操作：

克隆存储库

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

安装依赖项

   npm install

启动开发服务器

   npm start

打开浏览器并导航到 http://localhost:3000 以查看正在运行的应用程序。

用法

搜索加密货币：在搜索框中输入内容并单击“搜索”以过滤加密货币列表。
查看详细信息：点击加密货币卡可查看详细信息。

代码说明

应用程序组件

app.js 组件设置路由并包含导航栏和页脚组件。

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 组件

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">
        &lt;input
          type=&quot;text&quot;
          value={search}
          onchange={(e) =&gt; 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.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