如何写react项目
创建React项目
使用Create React App（CRA）快速初始化项目，这是官方推荐的脚手架工具。运行以下命令生成项目结构：
npx create-react-app my-app
cd my-app
npm start项目结构组织
典型React项目目录建议如下：
src/
├── components/ # 可复用UI组件
├── pages/ # 页面级组件
├── hooks/ # 自定义Hook
├── utils/ # 工具函数
├── styles/ # 全局样式
├── assets/ # 静态资源
└── App.js # 根组件组件开发
函数组件示例：
import React from 'react';
const Button = ({ onClick, children }) => {
return (
<button
className="primary-btn"
onClick={onClick}
>
{children}
</button>
);
};
export default Button;状态管理
使用React Hooks管理组件状态：
import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}路由配置
使用React Router实现页面导航：
npm install react-router-dom基本路由设置：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</Router>
);
}样式处理
CSS模块化方案（文件名需包含.module.css后缀）：
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Click</button>;
}API调用
使用fetch或axios进行数据请求：
import { useState, useEffect } from 'react';
import axios from 'axios';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get('/api/users')
.then(response => setUsers(response.data));
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}构建与部署
生成生产环境构建包：
npm run build部署到静态服务器如Netlify或Vercel，或通过nginx配置：
server {
listen 80;
location / {
root /path/to/build;
try_files $uri /index.html;
}
}性能优化
代码分割实现懒加载：
const LazyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
);
}测试策略
使用Jest和React Testing Library编写测试：
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();
});
