280-TruffleReactBox入门

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
成功了