如何实操react
安装与初始化
通过npx create-react-app my-app创建新项目，cd my-app进入目录后运行npm start启动开发服务器。确保Node.js版本≥16，推荐使用npm或yarn作为包管理器。
组件开发
函数组件是推荐写法，结合Hooks管理状态。例如：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}状态管理
复杂场景可使用Context或Redux。Context示例：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}路由配置
安装react-router-dom：
npm install react-router-dom基础路由实现：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}样式处理
支持CSS Modules或Styled-components。CSS Modules示例：
import styles from './Button.module.css';
function Button() {
return <button className={styles.error}>Delete</button>;
}数据获取
使用useEffect配合异步请求：
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(data => setState(data));
}, []);性能优化
通过React.memo和useCallback减少渲染：
const MemoizedComponent = React.memo(ExpensiveComponent);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);构建与部署
运行npm run build生成优化后的生产包，使用serve -s build本地测试，或部署到Vercel/Netlify等平台。
