Solidity React，构建去中心化应用（DApp）全栈教程

本文目录导读：

1. 引言
2. 1. 什么是DApp？
3. 2. 环境准备
4. 4" title="3. 编写Solidity智能合约">3. 编写Solidity智能合约
5. React前端">4. 构建React前端
6. 测试">5. 完整DApp测试
7. 优化">6. 进阶优化
8. 7. 总结

随着区块链技术的快速发展，去中心化应用（DApp）已成为Web3生态的重要组成部分，DApp的核心在于智能合约与前端界面的结合，而Solidity和React分别是最流行的智能合约编程语言和前端框架之一，本教程将带你从零开始，使用Solidity编写智能合约,并结合React构建一个完整的DApp。

什么是DApp？

DApp（Decentralized Application）是运行在区块链上的应用程序,其核心特点包括：

• 去中心化：数据存储在区块链上,而非单一服务器。
• 智能合约驱动：业务逻辑由智能合约执行,确保透明和不可篡改。
• 前端交互：用户通过Web界面与智能合约交互。

典型的DApp架构包括：

1. 智能合约（Solidity编写，部署在以太坊等区块链上）。
2. 前端（React/Vue等框架构建的用户界面）。
3. 区块链节点连接（如MetaMask、Web3.js或Ethers.js）。

环境准备

在开始之前,确保安装以下工具：

• Node.js（用于运行React和开发工具）。
• MetaMask（浏览器钱包，用于与DApp交互）。
• Hardhat/Truffle（智能合约开发框架）。
• React（前端框架）。

安装命令：

npm install -g hardhat
npx create-react-app dapp-frontend

编写Solidity智能合约

我们以一个简单的“投票DApp”为例,编写一个智能合约：

1 创建Hardhat项目

mkdir voting-dapp && cd voting-dapp
npx hardhat

选择“Create a basic sample project”并安装依赖。

2 编写投票合约

在contracts/Voting.sol中写入：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
    mapping(address => bool) public hasVoted;
    mapping(string => uint256) public votesReceived;
    string[] public candidateList;
    constructor(string[] memory candidateNames) {
        candidateList = candidateNames;
    }
    function vote(string memory candidate) public {
        require(!hasVoted[msg.sender], "Already voted");
        votesReceived[candidate]++;
        hasVoted[msg.sender] = true;
    }
    function getVotes(string memory candidate) public view returns (uint256) {
        return votesReceived[candidate];
    }
}

3 部署合约

在scripts/deploy.js中写入：

const hre = require("hardhat");
async function main() {
  const Voting = await hre.ethers.getContractFactory("Voting");
  const voting = await Voting.deploy(["Alice", "Bob", "Charlie"]);
  await voting.deployed();
  console.log("Voting deployed to:", voting.address);
}
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

运行部署：

npx hardhat run scripts/deploy.js --network localhost

构建React前端

1 初始化React项目

npx create-react-app dapp-frontend
cd dapp-frontend
npm install ethers

2 连接MetaMask

在src/App.js中：

import { useState, useEffect } from "react";
import { ethers } from "ethers";
function App() {
  const [account, setAccount] = useState("");
  const [contract, setContract] = useState(null);
  const [candidates, setCandidates] = useState([]);
  const contractAddress = "YOUR_CONTRACT_ADDRESS";
  const contractABI = [/* 粘贴合约ABI */];
  useEffect(() => {
    const loadBlockchainData = async () => {
      if (window.ethereum) {
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const signer = provider.getSigner();
        const contract = new ethers.Contract(contractAddress, contractABI, signer);
        setContract(contract);
        const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
        setAccount(accounts[0]);
        const candidateList = await contract.candidateList();
        setCandidates(candidateList);
      }
    };
    loadBlockchainData();
  }, []);
  const handleVote = async (candidate) => {
    await contract.vote(candidate);
    alert(`Voted for ${candidate}!`);
  };
  return (
    <div>
      <H1>Voting DApp</h1>
      <p>Connected Account: {account}</p>
      <h2>Candidates:</h2>
      <ul>
        {candidates.map((candidate, index) => (
          <li key={index}>
            {candidate} - <button onClick={() => handleVote(candidate)}>Vote</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

3 运行前端

npm start

访问http://localhost:3000,连接MetaMask即可投票。

完整DApp测试

1. MetaMask连接：确保钱包切换到正确的网络（如Localhost 8545）。
2. 投票功能：点击候选人按钮,MetaMask会弹出交易确认。
3. 查看投票结果：刷新页面或调用getVotes函数。

进阶优化

• 使用IPFS存储前端：实现完全去中心化托管。
• 添加事件监听：实时更新UI（如Voted事件）。
• 集成The Graph：优化链上数据查询。

本教程涵盖了：

1. Solidity智能合约开发（投票合约）。
2. Hardhat部署（本地测试网络）。
3. React前端集成（MetaMask + Ethers.js）。

通过这个示例，你可以进一步扩展功能,如：

• 添加管理员权限。
• 实现代币投票机制。
• 结合NFT进行身份验证。

希望本教程能帮助你入门DApp开发！🚀

（全文约1500字）

• 喜欢（0）
• 不喜欢（0）