Solidity React，構(gòu)建去中心化應(yīng)用（DApp）全棧教程
本文目錄導(dǎo)讀：
- 引言
- 1. 什么是DApp？
- 2. 環(huán)境準(zhǔn)備
- 3. 編寫Solidity智能合約
- 4. 構(gòu)建React前端
- 5. 完整DApp測(cè)試
- 6. 進(jìn)階優(yōu)化
- 7. 總結(jié)
隨著區(qū)塊鏈技術(shù)的快速發(fā)展，去中心化應(yīng)用（DApp）已成為Web3生態(tài)的重要組成部分，DApp的核心在于智能合約與前端界面的結(jié)合，而Solidity和React分別是最流行的智能合約編程語(yǔ)言和前端框架之一，本教程將帶你從零開始，使用Solidity編寫智能合約,并結(jié)合React構(gòu)建一個(gè)完整的DApp。
什么是DApp？
DApp（Decentralized Application）是運(yùn)行在區(qū)塊鏈上的應(yīng)用程序,其核心特點(diǎn)包括：
- 去中心化：數(shù)據(jù)存儲(chǔ)在區(qū)塊鏈上,而非單一服務(wù)器。
- 智能合約驅(qū)動(dòng)：業(yè)務(wù)邏輯由智能合約執(zhí)行,確保透明和不可篡改。
- 前端交互：用戶通過Web界面與智能合約交互。
典型的DApp架構(gòu)包括：
- 智能合約（Solidity編寫，部署在以太坊等區(qū)塊鏈上）。
- 前端（React/Vue等框架構(gòu)建的用戶界面）。
- 區(qū)塊鏈節(jié)點(diǎn)連接（如MetaMask、Web3.js或Ethers.js）。
環(huán)境準(zhǔn)備
在開始之前,確保安裝以下工具：
- Node.js（用于運(yùn)行React和開發(fā)工具）。
- MetaMask（瀏覽器錢包，用于與DApp交互）。
- Hardhat/Truffle（智能合約開發(fā)框架）。
- React（前端框架）。
安裝命令：
npm install -g hardhat npx create-react-app dapp-frontend
編寫Solidity智能合約
我們以一個(gè)簡(jiǎn)單的“投票DApp”為例,編寫一個(gè)智能合約：
1 創(chuàng)建Hardhat項(xiàng)目
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;
});
運(yùn)行部署：
npx hardhat run scripts/deploy.js --network localhost
構(gòu)建React前端
1 初始化React項(xiàng)目
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 運(yùn)行前端
npm start
訪問http://localhost:3000,連接MetaMask即可投票。
完整DApp測(cè)試
- MetaMask連接：確保錢包切換到正確的網(wǎng)絡(luò)（如Localhost 8545）。
- 投票功能：點(diǎn)擊候選人按鈕,MetaMask會(huì)彈出交易確認(rèn)。
- 查看投票結(jié)果：刷新頁(yè)面或調(diào)用
getVotes函數(shù)。
進(jìn)階優(yōu)化
- 使用IPFS存儲(chǔ)前端：實(shí)現(xiàn)完全去中心化托管。
- 添加事件監(jiān)聽：實(shí)時(shí)更新UI（如
Voted事件）。 - 集成The Graph：優(yōu)化鏈上數(shù)據(jù)查詢。
本教程涵蓋了：
- Solidity智能合約開發(fā)（投票合約）。
- Hardhat部署（本地測(cè)試網(wǎng)絡(luò)）。
- React前端集成（MetaMask + Ethers.js）。
通過這個(gè)示例，你可以進(jìn)一步擴(kuò)展功能,如：
- 添加管理員權(quán)限。
- 實(shí)現(xiàn)代幣投票機(jī)制。
- 結(jié)合NFT進(jìn)行身份驗(yàn)證。
希望本教程能幫助你入門DApp開發(fā)！??
（全文約1500字）
