为以太坊实体智能合约建立React前端

Question

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

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];
  }
}

我已经将合同部署到松露并生成合同的ABI，但我不明白如何用这个ABI创建前端。注意：p当我部署到remix IDE中时，我获得了所有功能界面（请参阅附件enter image description here

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

Answer 1

如果你是两个新手，我认为你应该按照本教程使用drizzel连接区块链和前端。

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