锐客网

  1. 首页 > it技术 > >

truffle|280-TruffleReactBox入门

reacttruffle

TruffleReactBox入门我们创建一个目录 TruffleReactDemo然后执行 truffle unbox react 或者 sudo truffle unbox react如果不能下载或者下载失败的话 那么可以到官网去下载https://truffleframework.com/ 然后打开boxes 这里面都是样板项目,样板文件 然后选择react项目 然后下载完成之后 我们打开项目 来看下项目目录和文件 -client -contracts -migrations -test ---LICENSE ---truffle-config.js然后 client里面就是react工程 contracts 里面就是合约 migrations 里面就是合约部署配置 test里面就是测试文件然后我们进入client文件夹 cd client然后执行npm start然后显示的是 starting the development server 正在启动开发服务启动成功后 直接跳出了网页 localhost:3000 这是react的项目默认网页然后我们发现 报错了 说的是 Module not found: Can't resolve ....那么这是因为 这个样板项目 是react和truffle结合的 我们现在还没有编译部署合约 启动react也就会失败了那么现在我们来启动truffle sudo truffle develop 进入控制台然后编译合约 truffle(develop)> compile编译完成之后 我们发现 并没有生成build文件夹 那么我们可以在 client文件夹的src里的 contracts里面可以找到我们的合约json文件编译完成之后 react页面会自动跳出一个框框 显示的是 React App would like to connect to your account 也就是react连接账户 那么 我们点一下connect连接然后我们发现还是报错了 这是因为我们编译了合约 还没有进行部署呢那么我们来进行一下部署 truffle(develop)> migrate部署成功后 刷新一下react页面 我们发现现在成功了 显示的是Good to Go! Your Truffle Box is installed and ready.Smart Contract Example If your contracts compiled and migrated successfully, below will show a stored value of 5 (by default).Try changing the value stored on line 40 of App.js.The stored value is: 5这个页面是什么意思呢 翻译一下 准备好了! Truffle Box 已经安装并且准备完毕 如果合约编译部署成功,那么下面会显示一个默认值5 可以在App.js的40行去修改这个值 被存储的值是 5那么既然这个页面告诉我们可以修改这个值 那么我们来尝试一下注意, 如果我们使用了sudo命令 文件被锁住了 我们可以调用这个命令 sudo chown abc:abc * -R abc指的是我们的用户组完成之后我们来修改一下 打开App.js 找到40行 然后修改一下 // Stores a given value, 5 by default. await contract.methods.set(100).send({ from: accounts[0] }); 我们这里修改成了100 那么我们刷新一下 看一下能不能成功刷新页面 成功显示 Good to Go! Your Truffle Box is installed and ready.Smart Contract Example If your contracts compiled and migrated successfully, below will show a stored value of 5 (by default).Try changing the value stored on line 40 of App.js.The stored value is: 100 成功了

【truffle|280-TruffleReactBox入门】

    推荐阅读


    上一篇：Linux|Ubuntu上安装protobuf 和protobuf-c

    下一篇：leetcode 面试题46. 把数字翻译成字符串