如何用react做项目
搭建开发环境
安装Node.js和npm/yarn，确保开发环境具备基础工具链。通过官方脚手架创建React项目：
npx create-react-app my-app
cd my-app
npm start项目结构规划
典型React项目结构示例：
src/
├── components/ # 可复用UI组件
├── pages/ # 页面级组件
├── hooks/ # 自定义Hook
├── utils/ # 工具函数
├── styles/ # 全局样式
├── App.js # 根组件
└── index.js # 入口文件组件开发
使用函数组件与Hooks编写UI逻辑，例如计数器组件：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</div>
);
}状态管理
复杂场景使用Redux或Context API管理全局状态。Redux基础配置示例：
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';
export default configureStore({
reducer: {
counter: counterReducer
}
});路由配置
通过React Router实现页面导航：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</BrowserRouter>
);
}样式方案
可选CSS Modules、Styled-components或TailwindCSS：
// Button.module.css
.error { background: red; }
// Button.js
import styles from './Button.module.css';
function Button() {
return <button className={styles.error}>Submit</button>;
}数据获取
使用fetch或axios进行API交互，配合useEffect Hook：
useEffect(() => {
const fetchData = async () => {
const res = await axios.get('/api/data');
setData(res.data);
};
fetchData();
}, []);构建与部署
生产环境构建命令：
npm run build部署产物可托管在Vercel、Netlify或静态服务器。
