使用React创建一个web3的前端

简介

本教程将告诉你如何：

1. 让用户将他们的Metamask钱包连接到网站上
2. 允许用户调用一个合约函数，进行支付，并铸造一个NFT。

在本教程结束时，你将拥有一个用React构建的功能齐全的web3前端。你也将获得构建任何通用的web3前端所需的基础知识（除了NFT minter）。

前提

本教程假设你已经开发并部署了智能合约到Rinkeby测试网络。如果你还没有，我们强烈建议你通过本教程。为了继续学习本教程，你将需要以下东西。

1. 智能合约的ABI文件（可在你的项目的artifacts文件夹中找到）。
2. 智能合约的地址。

我们还假设你有一些使用React和Javascript的经验。如果没有，强烈建议你先看一下React网站的官方教程。

设置项目

让我们从使用create-react-app创建一个React项目开始。打开终端，运行以下命令：

npx create-react-app nft-collectible-frontend

安装过程将需要2-10分钟。一旦完成后，通过运行以下命令检查一切是否正常。

cd nft-collectible-frontend
npm start

如果一切顺利，你应该看到浏览器在localhost://3000打开了一个新的标签，屏幕如下。很标准的 React 内容:

现在让我们做一些清理工作。

进入public/index.html，修改网站的标题和元描述(这一步是可选的)。

接下来，进入src文件夹，删除App.test.js、logo.svg和setupTests.js文件。在本教程中，我们将不需要这些文件。

进入App.js文件，用以下模板替换其内容。

import './App.css';

function App() {
    return (
        <h1>Hello World</h1>
    );
}

export default App;

同时删除App.css的所有内容。但是，不要删除这个文件。在后面的章节中，我们将提供一些基本的风格设计，对这个演示项目来说应该是足够好了。

如果你回到localhost，你应该看到一个屏幕，上面写着Hello World。我们现在有了一个基本的react项目，可以开始了。

获取合约ABI和地址

为了使我们的React前端能够与智能合约连接和通信，它需要合约的ABI和地址。

ABI(应用二进制接口)是一个JSON文件，在合约编译过程中自动生成。我们部署到区块链上是以字节码的形式存储智能合约。为了在其上调用函数，传递正确的参数，并使用高级语言解析返回值，我们需要向前端指定有关函数和合约的细节(如名称、参数、类型等)。这正是ABI文件的作用。为了了解更多关于ABI的信息，建议你阅读：如何理解以太坊ABI。

要找到你的ABI文件，请进入你的hardhat项目并导航到artifacts/contracts/NFTCollectible.sol/NFTCollectible.json。