手把手使用Hardhat和Truffle进行React项目设置

在开发智能合约时，使用开发环境非常重要。本文将探讨Truffle和Hardhat的命令翻译，以及如何通过在React中创建一个小项目来适应它们。

什么是Truffle和Hardhat?

Truffle和Hardhat都是在以太坊区块链上编写智能合约的开发环境。这些工具允许开发者:

• 编译合约

• 测试合约

• 部署合约

• 调试合约

项目设置

第一步是在我们开始编写智能合约之前用React建立一个项目。

• 转到项目所在的文件夹

Truffle的设置方法

npx create-react-app 

输出应该是这样的:

npx create-react-app truffle-example

Creating a new React app in /Examples/truffle-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

Created git commit.

Success! Created truffle-example at /Examples/truffle-example
Inside that directory, you can run several commands:

yarn start

    Starts the development server.

yarn build
    Bundles the app into static files for production.

yarn test
    Starts the test runner.

yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd truffle-example
  yarn start
  
Happy hacking!

然后到刚才创建的文件夹。

cd 

另一个选择是使用Truffle盒，你可以使用React创建Truffle盒。

如果没有全局安装Truffle。

npx truffle unbox react

如果是全局安装了Truffle。

truffle unbox react

你应该会得到如下类似的输出:

truffle unbox reactStarting unbox...
=================✔ Preparing to download box
✔ Downloading
✔ Cleaning up temporary files
✔ Setting up box

Unbox successful, sweet!

Commands:

Compile:                truffle compile
  Migrate:              truffle migrate
  Test contracts:       truffle test
  Test dapp:            cd client && npm test
  Run dev server:       cd client && npm run start
  Build for production: cd client && npm run build

Hardhat的设置方法

因为hardhat是一个更轻量级的工具，它更多地利用插件，所以它可以作为一个依赖项安装在项目中。

npx create-react-app。

现在我们应该看到这样的结果:

npx create-react-app hardhat-example

Creating a new React app in /Examples/hardhat-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

Created git commit.

Success! Created hardhat-example at /Examples/hardhat-example
Inside that directory, you can run several commands:

yarn start
    Starts the development server.
    
yarn build
    Bundles the app into static files for production.
    
yarn test
    Starts the test runner.
    
yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
    
We suggest that you begin by typing:

cd hardhat-example
  yarn start
  
Happy hacking!

然后移动到刚才创建的文件夹中。

cd

我们刚刚完成了将Truffle/Hardhat添加到React项目的过程，接下来我们将初始化它们。

安装

现在文件夹已经设置好了，让我们安装开发工具。

Truffle的安装方法

在刚刚创建的项目文件夹中，安装truffle。

这只是在你没有打开Truffle盒子的情况下!如果已经使用Truffle拆盒，就可以跳过这一步，因为拆盒会执行这一步。

truffle init

应该会得到类似如下的输出：

Starting init...

================> 

Copying project files to /Examples/truffle-example

Init successful, sweet!

Hardhat的安装方法

进入项目文件夹并将安装 hardhat 作为项目的依赖项。

npm i hardhat

现在安装Hardhat。

npx hardhat

应该会在终端得到这个:

888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

👷 Welcome to Hardhat v2.6.1 👷‍? 

What do you want to do? …
❯ Create a basic sample project
  Create an advanced sample project
  Create an empty hardhat.config.js

让我们选择:

Create a basic sample project

然后设置你的项目根目录:

✔ What do you want to do? · Create a basic sample project?

Hardhat project root: › /Examples/hardhat-example

因为React已经有了一个.gitingnore 文件，所以选择 no。

? Do you want to add a .gitignore? (Y/n) › n

由于Hardhat依赖于其他依赖项，我们需要安装它们，但是为了使比较尽可能接近，我们将自己安装它们。

Hardhat通常使用ether .js，但由于Truffle使用web3.js，我们也将使用web3.js和Hardhat。

? Do you want to install this sample project dependencies with yarn (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)? (Y/n) › n

在此安装过程中，可能会看到一些警告，但只要获得创建项目的确认，目前应该没有问题。

✨ Done in 47.89s.

✨ Project created

✨See the README.txt file for some example tasks you can run.

Hardhat的依赖项

稍后我们将需要web3.js与我们项目中的区块链交互。

这使得hardhat可以与web3.js库交互。

npm i @nomiclabs/hardhat-web3

hardhat可以与web3.js库交互。

npm i web3

我们现在已经知道了如何使用Truffle和Hardhat完全建立和安装React项目。

Source：https://medium.com/coinmonks/react-project-setup-using-hardhat-truffle-part-1-20a596865e