如何在 ReactJS 中创建加密货币应用程序？

在本文中，我们将构建一个加密货币应用程序，列出市场上所有可用的加密货币。以下应用程序介绍了如何从 API 获取信息，然后以表格的形式将其显示给用户。

方法：我们的应用程序包含两个部分，一个用于搜索加密货币的名称，另一个用于显示市场上所有可用的加密货币。最初，我们将从 API 获取所有数据并将其存储在状态变量中。然后我们将映射所有数据并将其显示在表格中。每当用户搜索某些特定的加密货币时，我们都会对其进行过滤并仅显示匹配的结果。

先决条件：该项目的先决条件是：

• 反应
• 功能组件
• 反应钩子
• 反应 Axios 和 API
• Javascript ES6

创建 React 应用程序和模块安装：

第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

npx create-react-app crypto-app

第 2 步：现在，通过运行以下命令转到项目文件夹，即 crypto-app：

cd crypto-app

第 3 步：安装 Axios，它是一个 npm 包。它是用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端。

npm install axios

项目结构：它看起来像这样。

示例：它是我们应用程序中唯一包含所有应用程序逻辑的默认组件。在这里，我们将使用名为“CoinStats”的免费开源 API（无需身份验证）来获取所有必需的数据。我们的应用程序包含两个部分，一个用于搜索特定的加密货币，另一个用于以表格形式列出所有加密货币。现在在 App.js 文件中写下以下代码。

Javascript

import "./App.css";
import Axios from "axios";
import { useEffect, useState } from "react";
 
function App() {
 
  // Setting up the initial states using
  // react hook 'useState'
  const [search, setSearch] = useState("");
  const [crypto, setCrypto] = useState([]);
 
  // Fetching crypto data from the API only
  // once when the component is mounted
  useEffect(() => {
    Axios.get(
`https://api.coinstats.app/public/v1/coins?skip=0&limit=100¤cy=INR`
    ).then((res) => {
      setCrypto(res.data.coins);
    });
  }, []);
 
  return (
    

      
All Cryptocurrencies
       {
          setSearch(e.target.value);
        }}
      />
      
        
          
            
            
            
            
            
            
            
          
        
        {/* Mapping all the cryptos */}
        
          {/* Filtering to check for the searched crypto */}
          {crypto
            .filter((val) => {
              return val.name.toLowerCase().includes(search.toLowerCase());
            })
            .map((val, id) => {
              return (
                <>
                  
                    
                    
                    
                    
                    
                    
                    
                  
                
              );
            })}
        
      
Rank
Name
Symbol
Market Cap
Price
Available Supply
Volume(24hrs)
{val.rank}

                      
                        
                      
                       
{val.name}
 
                    
{val.symbol}
₹{val.marketCap}
₹{val.price.toFixed(2)}
{val.availableSupply}
{val.volume.toFixed(0)}
    
  );
}
 
export default App;

这里的文件名是 App.css

HTML

.App {
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 40px;
  font-size: 16px;
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
}
h1{
  color: forestgreen;
}
input{
  padding-left: 5px;
  font-size: 20px;
  width: 250px;
  height: 30px;
}
table{
  width: 1000px;
  border-collapse: separate;
  border-spacing: 0 1em;
}
thead{
  background-color: rgb(44, 44, 44);
  color: white;
  text-align: center;
}
tbody > tr{
  text-align: right;
}
.rank{
  text-align: center;
  font-weight: bold;
}
.logo{
  display: flex;
  justify-content: flex-start;
  padding-left: 10%;
  gap: 10px;
}
.symbol{
  text-align: center;
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：