【Truffle系列第03篇】3分钟玩转一个简单的React DApp(上)

课程目标

1. react-box 项目构建
2. 项目编译、部署到Ganache网络
3. Metamask钱包链接Ganache网络
4. Metamask钱包导入Ganache第一个钱包的私钥
5. 运行DAPP

Demo效果图

1. react-box 项目构建

localhost:ReactDapp liyuechun$ truffle unbox react-box

Starting unbox...
=================

✔ Preparing to download box
✖ Downloading
Unbox failed!
RequestError: Error: connect ECONNREFUSED 0.0.0.0:443
    at new RequestError (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request-promise-core/lib/errors.js:14:1)
    at Request.plumbing.callback (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request-promise-core/lib/plumbing.js:87:1)
    at Request.RP$callback [as _callback] (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request-promise-core/lib/plumbing.js:46:1)
    at self.callback (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request/request.js:185:1)
    at Request.emit (events.js:189:13)
    at Request.onRequestError (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request/request.js:881:1)
    at ClientRequest.emit (events.js:189:13)
    at TLSSocket.socketErrorListener (_http_client.js:392:9)
    at TLSSocket.emit (events.js:189:13)
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)
Truffle v5.1.29 (core: 5.1.29)
Node v10.15.3

如上所示，有时执行unbox命令时会报错，解决办法如下：

1. 打开https://github.com/googlehosts/hosts链接，下载demo，拷贝解压文件夹里面的hosts文件。
2. 打开终端，输入open /etc
3. 将hosts粘贴到etc文件夹，替换掉原来的hosts文件。

localhost:ReactDapp liyuechun$ truffle unbox react-box

Starting 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

2. 项目编译、部署到Ganache网络

• 第一步：打开Ganache私有链
• 编译

  localhost:ReactDapp liyuechun$ truffle compile
  Compiling your contracts...
  ===========================
  > Compiling ./contracts/Migrations.sol
  > Compiling ./contracts/SimpleStorage.sol
  > Artifacts written to /Users/liyuechun/Desktop/demo/ReactDapp/client/src/contracts
  > Compiled successfully using:
  - solc: 0.5.16+commit.9c3226ce.Emscripten.clang

• 将合约部署到Ganache私有网络

localhost:ReactDapp liyuechun$ truffle migrate
Starting migrations...
======================
> Network name:    'ganache'
> Network id:      5777
> Block gas limit: 6721975 (0x6691b7)

1_initial_migration.js
======================

   Deploying 'Migrations'
   ----------------------
   > transaction hash:    0x90d4600102a388b768aff520f9addc189e3e02d66e735bc5595bae176e0698ae
   > Blocks: 0            Seconds: 0
   > contract address:    0xCA6B936fd9f3CF0bE4187e1fBec9Dc5eBd48fDA1
   > block number:        6
   > block timestamp:     1593833525
   > account:             0xB4375CC6E33B2823008fF0e5884d97dcB4488755
   > balance:             99.98928758
   > gas used:            164163 (0x28143)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00328326 ETH

   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00328326 ETH

2_deploy_contracts.js
=====================

   Deploying 'SimpleStorage'
   -------------------------
   > transaction hash:    0x65b79e14b446fe337d2e84e34e839989fef4b7f02e3b802ef63b4429eb98d44f
   > Blocks: 0            Seconds: 0
   > contract address:    0xF83Bb3a9Ceb47bC536E2f6f4C243b8dC994cF7cB
   > block number:        8
   > block timestamp:     1593833525
   > account:             0xB4375CC6E33B2823008fF0e5884d97dcB4488755
   > balance:             99.98651698
   > gas used:            96189 (0x177bd)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00192378 ETH

   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00192378 ETH

Summary
=======
> Total deployments:   2
> Final cost:          0.00520704 ETH

3. Metamask钱包链接到Ganache网络

• （1）Metamask里面选择自定义RPC
• （2）网络名称：Ganache网络
• （3）新增 RPC URL：http://127.0.0.1:7545
• （4）保存即可

4. Metamask钱包导入Ganache第一个钱包的私钥

如上所示，拷贝钱包私钥，导入账号即可。

5. 运行DAPP

localhost:client liyuechun$ npm run start

Compiled successfully!

You can now view client in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.106:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.