当前位置：首页 > news >正文

【保姆级教程】手把手教你开发第一个Web3全栈应用：从Solidity合约到React前端，这一篇就够了！

news 2026/7/9 0:30:37

1. 前言：打破Web3开发的神秘感

痛点切入：很多人听过区块链，但不知道代码怎么写。
本文目标：不讲废话理论，直接带你用 30 分钟写出一个可以在以太坊测试网运行的 DApp（去中心化应用）。
涉及技术栈：Hardhat, Solidity, React, Ethers.js, MetaMask。

2. 环境搭建（极速版）

安装 Node.js 和 Hardhat。
初始化项目的标准命令：
```
npx hardhat init
```

3. 核心后端：编写你的第一个智能合约

场景设定：做一个简单的“许愿墙”或“众筹合约”（比Hello World有趣，比DeFi简单）。

代码展示（Solidity）：

展示核心逻辑，例如struct定义许愿内容，mapping存储数据，以及event事件触发。

// SPDX-License-Identifier: MIT pragma solidity ^0.8.19; contract WishWall { event NewWish(address indexed from, uint256 timestamp, string message); struct Wish { address wisher; string message; uint256 timestamp; } Wish[] public wishes; function makeWish(string memory _message) public { wishes.push(Wish(msg.sender, _message, block.timestamp)); emit NewWish(msg.sender, block.timestamp, _message); } }

关键点讲解：解释 Gas 费的概念和public关键字的作用。

4. 部署与验证：上链实操

配置hardhat.config.js连接 Sepolia 测试网。
如何领取测试币（附带水龙头链接，增加文章实用性）。
编写部署脚本并运行，获取合约地址。

5. 核心前端：连接钱包与交互

使用 React + Vite 快速搭建脚手架。

连接钱包逻辑（核心代码）：

const connectWallet = async () => { try { const { ethereum } = window; if (!ethereum) { alert("请安装MetaMask!"); return; } const accounts = await ethereum.request({ method: "eth_requestAccounts" }); console.log("Connected", accounts[0]); } catch (error) { console.log(error); } }