react完整网站实现
React 完整网站实现指南
项目初始化与基础配置
使用 create-react-app 快速初始化项目：
npx create-react-app my-website
cd my-website
npm start安装常用依赖库：
npm install react-router-dom axios styled-components配置 jsconfig.json 简化路径引用：
{
"compilerOptions": {
"baseUrl": "src"
}
}路由系统搭建
创建基本路由结构（src/App.js）：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}组件化开发
创建可复用按钮组件（src/components/Button.js）：
import styled from 'styled-components';
const StyledButton = styled.button`
background: ${props => props.primary ? 'blue' : 'white'};
color: ${props => props.primary ? 'white' : 'black'};
padding: 10px 20px;
border-radius: 4px;
`;
export default function Button({ children, ...props }) {
return <StyledButton {...props}>{children}</StyledButton>;
}状态管理方案
使用 Context API 实现全局状态（src/context/AuthContext.js）：
import { createContext, useState } from 'react';
export const AuthContext = createContext();
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = (userData) => setUser(userData);
const logout = () => setUser(null);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
}API 数据交互
创建 API 服务模块（src/api/index.js）：
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
export const fetchPosts = () => api.get('/posts');
export const createPost = (data) => api.post('/posts', data);样式解决方案
使用 CSS Modules（src/components/Header.module.css）：
.header {
display: flex;
padding: 20px;
background: #f8f9fa;
}对应组件：
import styles from './Header.module.css';
function Header() {
return <header className={styles.header}>...</header>;
}性能优化技巧
实现代码分割（src/App.js）：
import { lazy, Suspense } from 'react';
const LazyAbout = lazy(() => import('./pages/About'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyAbout />
</Suspense>
);
}部署生产环境
构建并部署到 Netlify：
npm run build配置 netlify.toml：
[build]
command = "npm run build"
publish = "build"测试策略
安装测试工具：
npm install --save-dev @testing-library/react jest-axe编写组件测试（src/components/Button.test.js）：
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('renders button with text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText(/click me/i)).toBeInTheDocument();
});持续集成配置
GitHub Actions 示例（.github/workflows/ci.yml）：
name: CI
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm ci
- run: npm test
