当前位置：首页 > React

如何用react编写智能合约

2026-03-11 11:33:48React

使用React编写智能合约的步骤

React本身不能直接编写智能合约，但可以与智能合约开发工具（如Solidity、Hardhat、Truffle）结合，通过前端界面与区块链交互。以下是具体方法：

安装必要工具

确保系统已安装Node.js（≥12.0.0）和npm/yarn。全局安装Hardhat或Truffle：

npm install -g hardhat

创建React项目

使用Create React App初始化项目：

npx create-react-app dapp-frontend
cd dapp-frontend

设置智能合约开发环境

在项目根目录初始化Hardhat：

npx hardhat init

选择JavaScript模板，生成contracts/和scripts/目录。

编写智能合约

在contracts/目录下创建Solidity文件（如Counter.sol）：

如何用react编写智能合约

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Counter {
    uint256 public count;

    function increment() public {
        count += 1;
    }
}

编译和部署合约

安装依赖：

npm install @nomiclabs/hardhat-ethers ethers

修改hardhat.config.js配置网络。使用以下脚本部署：

const hre = require("hardhat");

async function main() {
  const Counter = await hre.ethers.getContractFactory("Counter");
  const counter = await Counter.deploy();
  await counter.deployed();
  console.log("Counter deployed to:", counter.address);
}

连接React前端

安装Web3依赖：

npm install web3 @metamask/detect-provider

在React组件中连接合约：

如何用react编写智能合约

import { useEffect, useState } from 'react';
import Web3 from 'web3';

function App() {
  const [count, setCount] = useState(0);
  const [contract, setContract] = useState(null);

  useEffect(() => {
    const loadBlockchainData = async () => {
      const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = Counter.networks[networkId];
      const instance = new web3.eth.Contract(
        Counter.abi,
        deployedNetwork && deployedNetwork.address
      );
      setContract(instance);
    };
    loadBlockchainData();
  }, []);

  const increment = async () => {
    await contract.methods.increment().send({ from: window.ethereum.selectedAddress });
    const updatedCount = await contract.methods.count().call();
    setCount(updatedCount);
  };
}