欢迎光临
黎跃春区块链技术博客

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

课程目标

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

Demo效果图

去中心化投票App

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.

去中心化投票App

赞(0) 打赏
未经允许不得转载:黎跃春区块链技术博客 » 【Truffle系列第03篇】3分钟玩转一个简单的React DApp(上)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

区块链在线课程、区块链职业技术水平认证考试一网打尽

区块链技术在线课程区块链技术职业认证

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏