第 01 章入门

Web3 前端开发入门

了解 Web3 前端开发的核心概念、技术栈和开发流程

5 课时2小时

概述

Web3 前端开发是连接用户与区块链的桥梁。本章将介绍 Web3 前端开发的核心概念和现代技术栈。

Web3 前端 vs 传统前端

Web3 前端开发与传统前端的核心区别在于： 1. **状态管理**: 链上状态替代部分服务器状态 2. **身份认证**: 钱包签名替代传统登录 3. **交易确认**: 需要处理区块确认和交易状态 4. **数据来源**: 链上数据 + IPFS + 传统 API

现代 Web3 技术栈

推荐的技术栈组合： - **框架**: Next.js 14+ (App Router) - **钱包连接**: wagmi v2 + viem - **UI 组件**: RainbowKit / ConnectKit - **状态管理**: TanStack Query - **样式**: Tailwind CSS + shadcn/ui

代码示例

项目初始化

使用 Next.js 和现代 Web3 库初始化项目

bash

1# 创建 Next.js 项目
2npx create-next-app@latest my-dapp --typescript --tailwind --app
3 
4# 安装 Web3 依赖
5npm install wagmi viem @tanstack/react-query
6npm install @rainbow-me/rainbowkit

基础配置结构

wagmi + RainbowKit 的标准配置模式

typescript

1// app/providers.tsx
2'use client'
3 
4import { WagmiProvider, createConfig, http } from 'wagmi'
5import { mainnet, polygon, arbitrum } from 'wagmi/chains'
6import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
7import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
8 
9const config = getDefaultConfig({
10  appName: 'My DApp',
11  projectId: 'YOUR_PROJECT_ID',
12  chains: [mainnet, polygon, arbitrum],
13  ssr: true,
14})
15 
16const queryClient = new QueryClient()
17 
18export function Providers({ children }: { children: React.ReactNode }) {
19  return (
20    <WagmiProvider config={config}>
21      <QueryClientProvider client={queryClient}>
22        <RainbowKitProvider>
23          {children}
24        </RainbowKitProvider>
25      </QueryClientProvider>
26    </WagmiProvider>
27  )
28}

相关资源

wagmi 官方文档 viem 文档 RainbowKit