React从基础入门到高级实战：React 实战项目 - 项目二：电商平台前端

React 实战项目：电商平台前端

欢迎来到本 React 开发教程专栏的第 27 篇！在前 26 篇文章中，我们从 React 的基础概念逐步深入到高级技巧，涵盖了组件、状态、路由、性能优化和设计模式等核心知识。这一次，我们将通过一个完整的实战项目——电商平台前端，将这些知识融会贯通，帮助您从理论走向实践。

本项目的目标是为中级开发者提供一个全面的 React 开发体验。通过这个项目，您将学习如何分析需求、选择技术栈、实现功能、优化性能并最终将应用部署到线上。无论您是希望提升项目经验的中级开发者，还是追求架构优化的高级开发者，这篇文章都将为您提供清晰的指引和丰富的代码示例。

---

引言

电商平台是现代 Web 开发中最具挑战性和普遍性的项目类型之一。它不仅需要处理复杂的用户交互和数据流，还要求高性能和良好的用户体验。在本项目中，我们将构建一个小型电商平台，支持商品展示、购物车、结账、用户认证、搜索和支付等功能。通过这个项目，您将掌握 React 在实际项目中的应用，理解状态管理的复杂性，并学习如何优化和部署一个生产级应用。

这个应用的目标非常明确：为用户提供一个流畅的购物体验，同时为开发者提供一个学习和实践 React 高级特性的平台。我们将从需求分析开始，逐步完成技术选型、代码实现、性能优化和部署上线，并在最后提供一个练习，帮助您进一步巩固所学内容。

通过这个项目，您将体验到：

• 需求分析：如何将业务需求转化为技术实现。
• 技术栈选择：如何根据项目需求选择合适的工具和库。
• 状态管理：如何使用 Redux Toolkit 管理复杂的应用状态。
• API 集成：如何使用 React Query 高效地处理数据请求。
• 性能优化：如何通过懒加载和虚拟滚动提升用户体验。
• 部署：如何将应用部署到 Vercel 并确保其稳定运行。

---

需求分析

在动手写代码之前，我们需要明确这个电商平台的前端需求。一个清晰的需求清单不仅能指导开发过程，还能帮助我们理解每个功能的意义。以下是我们项目的核心需求：

1. 商品展示
   • 显示商品列表，包括图片、名称、价格和描述。
   • 支持按类别筛选商品。
   • 支持搜索商品。
2. 购物车
   • 用户可以添加商品到购物车。
   • 用户可以查看购物车中的商品，修改数量或删除商品。
   • 显示购物车中的商品总价。
3. 结账
   • 用户可以从购物车进入结账流程。
   • 支持选择支付方式（如信用卡、PayPal）。
   • 显示订单确认页面。
4. 用户认证
   • 用户可以注册和登录。
   • 用户可以查看个人资料和订单历史。
   • 支持忘记密码和重置密码功能。
5. 搜索和支付
   • 用户可以通过关键词搜索商品。
   • 用户可以完成支付流程（模拟支付）。

为什么选择这些功能？

这些功能覆盖了电商平台的核心场景，同时也为学习 React 提供了丰富的实践机会：

• 商品展示和搜索涉及数据获取和过滤。
• 购物车和结账需要处理复杂的用户交互和状态管理。
• 用户认证引入了身份验证和权限控制。
• 支付（模拟）展示了与外部服务的集成。

此外，这些功能为性能优化（如懒加载和虚拟滚动）提供了实际场景，确保应用在处理大量数据时依然流畅。

---

技术栈选择

在开始实现之前，我们需要选择合适的技术栈。以下是本项目使用的工具和技术，以及选择它们的理由：

• React
  核心框架，用于构建用户界面。React 的组件化和声明式编程让开发过程更加直观。
• React Router
  用于实现页面导航和动态路由，支持多页面应用的开发。
• Redux Toolkit
  用于管理应用状态，特别是在处理购物车和用户认证等复杂场景时，Redux Toolkit 提供了简洁的 API 和最佳实践。
• React Query
  用于处理数据请求和缓存，简化与后端 API 的交互，提升性能。
• Vercel
  用于部署应用，提供快速、可靠的托管服务，支持自动部署和预览功能。

技术栈的优势

• React：生态丰富，社区活跃，是构建现代 Web 应用的首选。
• React Router：支持动态路由和参数传递，是多页面应用的理想选择。
• Redux Toolkit：简化了 Redux 的使用，减少了样板代码，同时保持了强大的状态管理能力。
• React Query：自动管理数据获取、缓存和同步，极大提升开发效率。
• Vercel：与 React 生态深度集成，提供一键部署和全球 CDN 支持。

这些工具的组合不仅易于上手，还能帮助您掌握现代 React 开发的精髓。

---

项目实现

现在，我们进入最核心的部分——代码实现。我们将从项目搭建开始，逐步完成组件拆分、路由设计、状态管理、API 集成和权限控制。

1. 项目搭建

首先，使用 Vite 创建一个新的 React 项目：

npm create vite@latest ecommerce-platform -- --template react
cd ecommerce-platform
npm install
npm run dev

安装必要的依赖：

npm install react-router-dom @reduxjs/toolkit react-redux react-query

这将启动一个基础的 React 项目，接下来我们将逐步实现功能。

2. 组件拆分

组件化是 React 的核心思想。通过将应用拆分为多个小组件，我们可以提高代码的可读性和复用性。

组件结构

• App：根组件，负责路由配置和整体布局。
• Header：导航栏，包含搜索框和用户菜单。
• ProductList：显示商品列表，支持筛选和搜索。
• ProductItem：展示单个商品信息。
• Cart：购物车页面，显示购物车中的商品和总价。
• Checkout：结账页面，支持选择支付方式。
• Login：登录页面。
• Register：注册页面。
• Profile：用户资料页面。
• OrderHistory：订单历史页面。

文件结构

src/
├── components/
│   ├── Header.jsx
│   ├── ProductList.jsx
│   ├── ProductItem.jsx
│   ├── Cart.jsx
│   ├── Checkout.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   ├── Profile.jsx
│   └── OrderHistory.jsx
├── features/
│   ├── auth/
│   │   └── authSlice.js
│   ├── cart/
│   │   └── cartSlice.js
│   └── products/
│       └── productsSlice.js
├── pages/
│   ├── Home.jsx
│   ├── ProductDetail.jsx
│   └── CartPage.jsx
├── App.jsx
└── main.jsx

3. 路由设计

我们将应用设计为多页面结构，使用 React Router 实现导航。

路由配置

• /：首页，显示商品列表。
• /product/:id：商品详情页面。
• /cart：购物车页面。
• /checkout：结账页面。
• /login：登录页面。
• /register：注册页面。
• /profile：用户资料页面。
• /orders：订单历史页面。

在 App.jsx 中配置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Home from './pages/Home';
import ProductDetail from './pages/ProductDetail';
import CartPage from './pages/CartPage';
import Checkout from './components/Checkout';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';
import OrderHistory from './components/OrderHistory';function App() {return (<Router><Header /><div className="container mx-auto p-4"><Routes><Route path="/" element={<Home />} /><Route path="/product/:id" element={<ProductDetail />} /><Route path="/cart" element={<CartPage />} /><Route path="/checkout" element={<Checkout />} /><Route path="/login" element={<Login />} /><Route path="/register" element={<Register />} /><Route path="/profile" element={<Profile />} /><Route path="/orders" element={<OrderHistory />} /></Routes></div></Router>);
}export default App;

导航链接

在 Header 中添加导航链接：

import { Link } from 'react-router-dom';function Header() {return (<header className="bg-blue-600 text-white p-4"><nav className="flex justify-between"><Link to="/" className="text-xl font-bold">电商平台</Link><div><Link to="/cart" className="mr-4">购物车</Link><Link to="/profile">个人中心</Link></div></nav></header>);
}export default Header;

4. 状态管理

我们使用 Redux Toolkit 管理应用状态，包括用户认证、购物车和商品数据。

用户认证

在 features/auth/authSlice.js 中：

import { createSlice } from '@reduxjs/toolkit';const initialState = {user: null,token: null,
};export const authSlice = createSlice({name: 'auth',initialState,reducers: {setUser: (state, action) => {state.user = action.payload.user;state.token = action.payload.token;},logout: (state) => {state.user = null;state.token = null;},},
});export const { setUser, logout } = authSlice.actions;
export default authSlice.reducer;

购物车

在 features/cart/cartSlice.js 中：

import { createSlice } from '@reduxjs/toolkit';const initialState = {items: [],
};export const cartSlice = createSlice({name: 'cart',initialState,reducers: {addToCart: (state, action) => {const item = action.payload;const existingItem = state.items.find(i => i.id === item.id);if (existingItem) {existingItem.quantity += 1;} else {state.items.push({ ...item, quantity: 1 });}},removeFromCart: (state, action) => {state.items = state.items.filter(i => i.id !== action.payload);},updateQuantity: (state, action) => {const { id, quantity } = action.payload;const item = state.items.find(i => i.id === id);if (item) item.quantity = quantity;},},
});export const { addToCart, removeFromCart, updateQuantity } = cartSlice.actions;
export default cartSlice.reducer;

商品数据

在 features/products/productsSlice.js 中：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {const response = await axios.get('/api/products');return response.data;
});export const productsSlice = createSlice({name: 'products',initialState: {items: [],status: 'idle',},reducers: {},extraReducers: (builder) => {builder.addCase(fetchProducts.pending, (state) => {state.status = 'loading';}).addCase(fetchProducts.fulfilled, (state, action) => {state.status = 'succeeded';state.items = action.payload;}).addCase(fetchProducts.rejected, (state) => {state.status = 'failed';});},
});export default productsSlice.reducer;

5. API 集成

我们使用 React Query 处理数据请求和缓存，提升性能和用户体验。

配置 React Query

在 main.jsx 中：

import { QueryClient, QueryClientProvider } from 'react-query';const queryClient = new QueryClient();ReactDOM.createRoot(document.getElementById('root')).render(<QueryClientProvider client={queryClient}><Provider store={store}><App /></Provider></QueryClientProvider>
);

获取商品数据

在 Home.jsx 中：

import { useQuery } from 'react-query';
import { fetchProducts } from '../features/products/productsSlice';function Home() {const { data: products, isLoading } = useQuery('products', fetchProducts);if (isLoading) return <div>加载中...</div>;return (<div><h1>商品列表</h1><ul>{products.map(product => (<li key={product.id}><Link to={`/product/${product.id}`}>{product.name}</Link></li>))}</ul></div>);
}export default Home;

6. 权限控制

我们使用 Redux 管理用户认证状态，并根据用户登录状态控制页面访问。

保护路由

创建 ProtectedRoute.jsx：

import { useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';function ProtectedRoute({ children }) {const user = useSelector((state) => state.auth.user);return user ? children : <Navigate to="/login" />;
}export default ProtectedRoute;

在 App.jsx 中使用：

<Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />

7. 优化

图片懒加载

使用 react-lazyload 实现图片懒加载：

npm install react-lazyload

在 ProductItem.jsx 中：

import LazyLoad from 'react-lazyload';function ProductItem({ product }) {return (<div><LazyLoad height={200} offset={100}><img src={product.image} alt={product.name} /></LazyLoad><h2>{product.name}</h2><p>{product.price}</p></div>);
}export default ProductItem;

虚拟滚动

对于长列表，使用 react-window 实现虚拟滚动：

npm install react-window

在 ProductList.jsx 中：

import { FixedSizeList } from 'react-window';function ProductList({ products }) {const Row = ({ index, style }) => (<div style={style}><ProductItem product={products[index]} /></div>);return (<FixedSizeListheight={600}itemCount={products.length}itemSize={200}width={800}>{Row}</FixedSizeList>);
}export default ProductList;

8. 部署

开发完成后，我们将应用部署到 Vercel，让它在线上运行。

1. 构建项目

运行以下命令生成静态文件：

npm run build

这会生成 dist 文件夹，包含应用的静态资源。

2. 部署到 Vercel

1. 注册 Vercel：访问 Vercel 官网 并创建账号。
2. 新建项目：在控制台选择“New Project”。
3. 导入仓库：将项目推送至 GitHub 并导入。
4. 配置构建：
   • 构建命令：npm run build
   • 输出目录：dist
5. 部署：点击“Deploy”，等待部署完成。

部署成功后，您将获得一个唯一的 URL，可以通过它访问您的电商平台。

---

练习：添加促销活动页面

为了帮助您巩固所学，我们设计了一个练习：为电商平台添加一个促销活动页面。

需求

• 促销页面：展示当前正在进行的促销活动。
• 活动详情：用户可以查看活动的详细信息和参与方式。
• 导航：在导航栏中添加“促销”链接。

实现步骤

1. 创建 Promos 组件
   在 components 文件夹中创建 Promos.jsx。
2. 添加路由
   在 App.jsx 中添加 /promos 路由。
3. 导航链接
   在 Header 中添加“促销”链接。
4. API 集成
   使用 React Query 获取促销数据。
5. 展示促销活动
   在 Promos 组件中展示活动列表。

示例代码

Promos 组件

import { useQuery } from 'react-query';function Promos() {const { data: promos, isLoading } = useQuery('promos', () => axios.get('/api/promos').then(res => res.data));if (isLoading) return <div>加载中...</div>;return (<div><h1>促销活动</h1><ul>{promos.map(promo => (<li key={promo.id}><h2>{promo.title}</h2><p>{promo.description}</p></li>))}</ul></div>);
}export default Promos;

添加路由

<Route path="/promos" element={<Promos />} />

导航链接

<Link to="/promos" className="mr-4">促销</Link>

练习目标

通过这个练习，您将学会如何扩展现有功能，提升对路由、API 集成和组件开发的理解。

---

注意事项

• 状态管理：电商平台的状态管理较为复杂，建议深入理解 Redux Toolkit 的使用。
• 性能优化：图片懒加载和虚拟滚动是提升用户体验的关键，建议在实际项目中实践。
• 安全：用户认证和支付功能需要特别注意安全性和隐私保护。
• 学习建议：建议您边阅读边动手实现，遇到问题时查阅 React 官方文档、Redux Toolkit 文档 和 React Query 文档。

---

结语

通过这个电商平台前端项目，您从需求分析到部署上线，完整地走过了一个 React 项目的开发流程。您学习了组件拆分、路由设计、状态管理、API 集成、权限控制、性能优化和部署等核心技能，这些知识将成为您未来开发更复杂应用的基础。