Erstellen einer Crypto Finder-App mit React

Einführung

Kryptowährungen liegen heutzutage voll im Trend, und angesichts der Fülle an verfügbaren Münzen ist es wichtig, über ein Tool zu verfügen, mit dem man einfach suchen und Details dazu anzeigen kann. Die Crypto Finder-App macht genau das. Diese mit React erstellte App bietet Benutzern ein nahtloses Erlebnis zum Suchen, Filtern und Anzeigen von Kryptowährungsdetails.

Projektübersicht

Die Crypto Finder-App besteht aus:

• Eine Suchoberfläche: Benutzer können nach Namen nach Kryptowährungen suchen.
• Eine Liste von Kryptowährungen: Wird als Karten angezeigt und zeigt grundlegende Informationen.
• Detaillierte Ansicht: Wenn Sie auf eine Kryptowährungskarte klicken, werden detailliertere Informationen zu dieser Münze angezeigt.

Merkmale

• Suchfunktion: Kryptowährungen nach Namen filtern.
• Dynamisches Routing: Detaillierte Informationen zu einer ausgewählten Kryptowährung anzeigen.
• Responsive Design: Stellt sicher, dass die App auf verschiedenen Bildschirmgrößen gut aussieht.
• Ladeanzeigen: Zeigt einen Lader an, während Daten abgerufen werden.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche.
• Axios: Zum Senden von HTTP-Anfragen.
• React Router: Für Routing und Navigation.
• CoinGecko API: Zum Abrufen von Kryptowährungsdaten.

Projektstruktur

Hier ein kurzer Überblick über die Projektstruktur:

• src/
  • Komponenten/
  • CryptoFinder.js
  • CryptoDetails.js
  • Navbar.js
  • Footer.js
  • App.js
  • App.css

Installation

Um mit der Crypto Finder-App zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository

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

1. Abhängigkeiten installieren

   npm install

1. Starten Sie den Entwicklungsserver

   npm start

1. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000, um die App in Aktion zu sehen.

Verwendung

• Nach Kryptowährungen suchen: Geben Sie etwas in das Suchfeld ein und klicken Sie auf „Suchen“, um die Liste der Kryptowährungen zu filtern.
• Details anzeigen: Klicken Sie auf eine Kryptowährungskarte, um detaillierte Informationen anzuzeigen.

Code-Erklärung

App-Komponente

Die App.js-Komponente richtet das Routing ein und enthält die Navbar- und Footer-Komponenten.

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-Komponente

Die Komponente CryptoFinder.js übernimmt das Abrufen und Anzeigen der Liste der Kryptowährungen. Es enthält eine Suchleiste zum Filtern von Ergebnissen.

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-Komponente

Die Komponente CryptoDetails.js ruft detaillierte Informationen zu einer ausgewählten Kryptowährung ab und zeigt sie an.

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-Komponente

Die Navbar.js-Komponente stellt einen Header für die App bereit.

import React from 'react'

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

export default Navbar

Fußzeilenkomponente

Die Footer.js-Komponente stellt eine Fußzeile für die App bereit.

import React from 'react'

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

export default Footer

Live-Demo

Die Live-Demo der Crypto Finder-App können Sie hier ansehen.

Abschluss

Das Erstellen der Crypto Finder-App war eine unterhaltsame und lehrreiche Erfahrung. Es zeigt, wie man React zum Abrufen und Anzeigen von Daten, zum Verwalten des Routings und zum Erstellen einer reaktionsfähigen und benutzerfreundlichen Oberfläche verwendet. Ich hoffe, dass Sie dieses Projekt hilfreich finden und dass es Sie dazu inspiriert, Ihre eigenen Anwendungen mit React!

zu erstellen

Credits

• React-Dokumentation: React-Dokumente
• CoinGecko-API: CoinGecko
• Axios-Dokumentation: Axios-Dokumentation

Autor

Abhishek Gurjar

---

Sie können jederzeit weitere Details anpassen oder hinzufügen, basierend auf Ihren Vorlieben oder zusätzlichen Funktionen, die Sie möglicherweise implementiert haben.

Das obige ist der detaillierte Inhalt vonErstellen einer Crypto Finder-App mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!