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

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

   npm install

   npm start

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 = () =&gt; {  return (    <div>      <navbar></navbar><routes><route path="/" element="{&lt;cryptofinder/">}/&gt;        <route path="/details/:id" element="{&lt;cryptodetails/">}/&gt;      </route></route></routes><footer></footer></div>  );};export default app;

import react, { useeffect, usestate } from "react";import axios from "axios";import { link } from "react-router-dom";const cryptofinder = () =&gt; {  const [search, setsearch] = usestate("");  const [crypto, setcrypto] = usestate([]);  const [filteredcrypto, setfilteredcrypto] = usestate([]);  useeffect(() =&gt; {    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) =&gt; {        setcrypto(res.data);        setfilteredcrypto(res.data);      });  }, []);  const handlesearch = () =&gt; {    const filtereddata = crypto.filter((data) =&gt; {      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"        /&gt;        <button onclick="{handlesearch}">search</button>      </div>      <div classname="cards">        {filteredcrypto.map((val, id) =&gt; (          <div classname="card" key="{id}">            @@##@@            <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>                      </div>        ))}      </div>    </div>  );};export default cryptofinder;

import react, { useeffect, usestate } from "react";import axios from "axios";import { useparams } from "react-router-dom";const cryptodetails = () =&gt; {  const { id } = useparams();  const [cryptodetails, setcryptodetails] = usestate(null);  useeffect(() =&gt; {    axios      .get(`https://api.coingecko.com/api/v3/coins/${id}`, {        params: {          localization: false,        },      })      .then((res) =&gt; {        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">          @@##@@        </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="%7Bcryptodetails.links.homepage%5B0%5D%7D" target="_blank" rel="noopener noreferrer">            {cryptodetails.links.homepage[0]}          </a>        </p>        <p>         <b> blockchain site:</b>{" "}          <a href="%7Bcryptodetails.links.blockchain_site%5B0%5D%7D" target="_blank" rel="noopener noreferrer">            {cryptodetails.links.blockchain_site[0]}          </a>        </p>      </div>  </div>    </div>  );};export default cryptodetails;

import react from 'react'const navbar = () =&gt; {  return (    <div classname="navbar">    <h1>crypto finder</h1>  </div>  )}export default navbar

import React from 'react'const Footer = () =&gt; {  return (    <div classname="footer">    <p>Made with ❤️ by Abhishek Gurjar</p>  </div>  )}export default Footer