React를 사용하여 Crypto Finder 앱 구축-CSS 튜토리얼-php.cn

Building a Crypto Finder App with 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 구성 요소는 라우팅을 설정하고 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 구성 요소

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를 사용하여 자신만의 애플리케이션을 만드는 데 영감을 주기를 바랍니다!