요즘 암호화폐가 대세이며, 사용 가능한 코인이 너무 많기 때문에 암호화폐에 대한 세부 정보를 쉽게 검색하고 볼 수 있는 도구를 갖는 것이 필수적입니다. Crypto Finder 앱이 바로 그런 일을 합니다. React로 구축된 이 앱은 사용자가 암호화폐 세부정보를 검색, 필터링 및 볼 수 있는 원활한 환경을 제공합니다.
Crypto Finder 앱은 다음으로 구성됩니다:
다음은 프로젝트 구조에 대한 간략한 개요입니다.
Crypto Finder 앱을 시작하려면 다음 단계를 따르세요.
git clone https://github.com/abhishekgurjar-in/Crypto-Finder cd crypto-finder
npm install
npm start
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.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를 사용하여 Crypto Finder 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
