为 ethereum solidity 智能合约构建 React 前端

Question

我是 React 和 Solidity 的新手，但是我正在做一个项目只是为了学习，但我无法理解如何创建 Solidity 项目的 React 前端。

pragma solidity^0.5.0;
pragma experimental ABIEncoderV2;

contract I2Chain {

     event FileChained(string checksum, 
     address indexed user, 
     uint timestamp,
     uint fileSize, 
     uint fileTimestamp, 
     string fileType, 
     string fileName);

    event FileShared(string checksum, 
    address indexed user,  
    address indexed recipient,
    uint attributes, 
    uint tenure, 
    uint timestamp);

event FileRead(string checksum, address indexed user, uint timestamp);

event FileDeleted(string checksum, 
address indexed user,
uint timestamp);

event PubKeyUpdate(address indexed user, string pubKey);

mapping(address => string) public publicKeys;

function PublishFile(string memory _checksum,
uint _fileSize,
uint _fileTimestamp, 
string memory _fileType,
string memory _fileName) 
public {

 emit FileChained(_checksum, msg.sender, now, 
 _fileSize,_fileTimestamp, _fileType, _fileName);
}

function ShareFile(string memory _checksum, address _recipient, 
uint _attributes, 
uint _tenure) public {

emit FileShared(_checksum, msg.sender, _recipient, _attributes, 
_tenure, now);
}

function ReadFile(string memory _checksum) public {
    emit FileRead(_checksum, msg.sender, now);
}

function DeleteFile(string memory _checksum) public {
    emit FileDeleted(_checksum, msg.sender, now);
}

function setPublicKey(string memory _pubKey) public {
    publicKeys[msg.sender] = _pubKey;
    emit PubKeyUpdate(msg.sender, _pubKey);
}

function getPublicKey(address _user) 
view public returns(string memory)  {

return publicKeys[_user];
  }
}

我已经将合约部署到 truffle 中并生成了合约的 ABI，但是我不明白如何使用这个 ABI 创建前端。 Note:p 当我部署到 remix IDE 时，我得到了所有功能接口（请参阅附件 enter image description here

请建议并帮助我如何为这个合约创建 UI 所有功能，以便用户可以完整地使用我的智能合约和区块链？

Answer 1

如果您对两者都不熟悉，我认为您应该按照本教程进行操作，他们使用 drizzel 将区块链与前端连接起来。

https://truffleframework.com/tutorials/getting-started-with-drizzle-and-react

为 ethereum solidity 智能合约构建 React 前端

Building React front end for etherum solidity smart contract

reactjs

solidity

truffle

web3js