Solidity React，构建去中心化应用（DApp）全栈教程
10172025-03-27 06:45:31
- 引言
- 1. 什么是DApp？
- 2. 环境准备
- 4" title="3. 编写Solidity智能合约">3. 编写Solidity智能合约
- React前端">4. 构建React前端
- 测试">5. 完整DApp测试
- 优化">6. 进阶优化
- 7. 总结
随着区块链技术的快速发展，去中心化应用（DApp）已成为Web3生态的重要组成部分，DApp的核心在于智能合约与前端界面的结合，而Solidity和React分别是最流行的智能合约编程语言和前端框架之一，本教程将带你从零开始，使用Solidity编写智能合约,并结合React构建一个完整的DApp。
什么是DApp？
DApp（Decentralized Application）是运行在区块链上的应用程序,其核心特点包括：
- 去中心化：数据存储在区块链上,而非单一服务器。
- 智能合约驱动：业务逻辑由智能合约执行,确保透明和不可篡改。
- 前端交互：用户通过Web界面与智能合约交互。
典型的DApp架构包括：
环境准备
在开始之前,确保安装以下工具：
- 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测试
- MetaMask连接：确保钱包切换到正确的网络（如Localhost 8545）。
- 投票功能：点击候选人按钮,MetaMask会弹出交易确认。
- 查看投票结果：刷新页面或调用
getVotes函数。
进阶优化
- 使用IPFS存储前端：实现完全去中心化托管。
- 添加事件监听：实时更新UI（如
Voted事件）。 - 集成The Graph：优化链上数据查询。
本教程涵盖了：
- Solidity智能合约开发（投票合约）。
- Hardhat部署（本地测试网络）。
- React前端集成（MetaMask + Ethers.js）。
通过这个示例，你可以进一步扩展功能,如：
- 添加管理员权限。
- 实现代币投票机制。
- 结合NFT进行身份验证。
希望本教程能帮助你入门DApp开发！🚀
（全文约1500字）
-
喜欢（0）
-
不喜欢（0）
