react如何构建单页应用
安装 React 脚手架工具
使用 Create React App (CRA) 快速初始化项目，这是官方推荐的脚手架工具。运行以下命令创建新项目：
npx create-react-app my-spa
cd my-spa
npm start配置路由系统
安装 React Router 实现单页应用的路由功能：
npm install react-router-dom在 src/App.js 中配置基本路由：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}创建页面组件
在 src/pages 目录下组织页面组件。例如创建 Home.js：
export default function Home() {
return <h1>Home Page</h1>;
}状态管理方案
对于复杂状态管理，可选用 Redux 或 Context API。安装 Redux 基础包：
npm install @reduxjs/toolkit react-redux创建 store 和 slice：
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';
export default configureStore({
reducer: {
counter: counterReducer
}
});构建优化
运行生产构建命令生成优化后的静态文件：
npm run build生成的 build 目录可直接部署到静态服务器。考虑使用代码分割提升性能：
import { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./components/HeavyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}部署配置
在 package.json 中添加 homepage 字段支持子路径部署：
{
"homepage": "https://yourusername.github.io/my-spa"
}使用 HashRouter 替代 BrowserRouter 可避免服务器配置要求：
import { HashRouter } from 'react-router-dom';
