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

有志者，事竟成！如果你在学习文章，那么本文《使用 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 应用程序，请按照以下步骤操作：

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 组件设置路由并包含导航栏和页脚组件。

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">
        <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.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 构建加密货币查找器应用程序》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！