如何使用React Web应用程序部署智能合约？

Question

为了部署智能合约，我到目前为止使用了混音IDE。但是现在，我需要创建一个允许仅点击按钮的智能合约的网站？我可以做吗？

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
interface AnotherContract {
    function walletOfOwner(address owner) external view returns (uint256[] memory);
}

contract Demo{
    uint public similarity;
    uint256 public hasRedPill;
    constructor(
    string memory _name,
    string memory _symbol,
    string memory _initBaseURI
  )  {
     
    // some code
  }
    function test() public view returns(uint256  ){
       AnotherContract anotherContract = AnotherContract(address(0x116486FD64Ba04F7B789278B239E2e5A1e2f7b39));
      return anotherContract.walletOfOwner(msg.sender).length;
    }
}

假设我想使用我的React JS Web应用程序部署此演示合同。在这里，我必须首先发送构造函数参数，然后部署合同。作为回报，我需要合同的字节代码，ABI和地址。

有什么办法吗？我有可能的感觉，因为混音IDE还提供了UI来部署合同。 我是新手。请帮忙。

Answer 1

您问题的答案将是一个很长的问题。萨加尔的建议是一个很好的领导，尽管这里需要涵盖很多。

我建议您观看下面链接的速成课程，以使您位于位置。本课程将帮助您逐步介绍很多细节（这极大地帮助了我）。我看到您已经有了一些后端知识，因此要覆盖前端，建议您跳过第10课，其中涵盖了NextJ/React。

链接到指南：

Answer 2

1. 设置 Truffle

npm install -g truffle

2. 制作一个空的存储库，cd，然后

truffle init

3. 配置本地网络以及truffle.config.js中的提供商

，在模块内添加以下片段。Exports：

module.exports = {
  networks: {
    development: {
     host: "127.0.0.1",
     port: 7545,
     network_id: "*",
    },
  },
  compilers: {
    solc: {
      version: "0.8.0",
      settings: {
       optimizer: {
         enabled: false,
         runs: 200
       }
      }
    }
  }
};

4. 现在编译智能合约

truffle compile

5. 迁移智能合约

truffle migrate

，它应该创建abi Array 合同地址在.json文件中