仅需70行代码即可实现加密追踪器！
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
🏗 设置项目
让我们从设置 React 项目和安装所需的软件包开始。
npx create-react-app cryptotracker
cd cryptotracker
npm i ez-react-table
🤑 创建追踪器
用你最喜欢的编辑器打开文件src/App.js，然后删除里面的所有内容。我们从头开始。
调用 CoinGecko API
import React, { useState, useEffect } from "react";
import EzReactTable from 'ez-react-table'
export default function App() {
const [coins, setCoins] = useState([]);
const fetchCoins = async () => {
try {
const res = await fetch(
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
);
const data = await res.json();
setCoins(data);
} catch (e) {
alert("Api error");
}
};
useEffect(() => {
fetchCoins();
}, []);
...
我们正在设置一个默认为空数组的币种状态。App 组件挂载后，我们会运行该fetchCoins函数。该fetchCoins函数会调用Coin Gecko API 并将coins币种数组赋值给它。
配置列
接下来，让我们配置要传递给函数的 columns 变量ez-react-table，并告诉它如何将币种状态渲染到表格中。
...
const columns = [
{
title: "Name",
key: "name",
width: 200,
render: (value, object) => {
return (
<div style={{ display: "flex", alignItems: "center" }}>
<img height="20px" width="20px" src={object?.image} alt="coin" />
<span style={{ marginLeft: "10px" }}>{object?.name}</span>
</div>
);
},
},
{
title: "Symbol",
center: true,
key: "symbol",
width: 120,
render: (value, object) => <div>{value.toUpperCase()}</div>,
},
{
title: "Price",
key: "current_price",
width: 100,
render: (value, object) => <div>{`$${value}`}</div>,
},
{
title: "Change",
key: "price_change_percentage_24h",
width: 100,
render: (value, object) => {
return (
<div style={{ color: /-/i.test(value) ? "#ff0374" : "#06a847" }}>
{value}%
</div>
);
},
},
];
...
以上代码有几点值得注意。columns变量是一个列对象数组。每个对象定义了列的标题和宽度，键名对应于我们要映射到列的对象属性，而 render 方法接收一个组件，该组件接收两个参数：当前属性的值和行的对象。该组件返回应该渲染到行单元格的内容。请注意，您可以完全省略 render 属性，ez-react-table直接将值渲染到单元格中。
综合起来
...
return (
<EzReactTable
cols={columns}
data={coins}
darkMode
title="Crypto Tracker"
defaultSort="name"
accentColor="#ffbc03"
tableHeight={300}
/>
);
};
终于！返回 EzReactTable 组件。`cols` 属性接收我们定义的 `columns` 变量。`data` 属性接收要渲染的币种状态。`defaultSort` 属性是 `columns` 变量中定义的一个键，我们希望表格默认按该键排序。此外还有一些不言自明的属性。
👟 快跑！
代码写完了！让我们npm start在项目目录下运行并导航到localhost:3000.来测试一下。
尽情享受吧！虚拟行、全局搜索输入、列排序和样式设置几乎无需任何操作！
如果您想查看代码，这是 git仓库。
🔮接下来是什么？
本文的秘诀在于ez-react-table。这个包的设计宗旨是简单易用且功能强大。
在你的下一个项目中尝试一下ez-react-table！
感谢参与编程！
文章来源：https://dev.to/rowlinsonmike/cryptotracker-in-70-lines-of-code-4jh9