react如何上手
安装与环境搭建
使用 create-react-app 快速初始化项目，需提前安装 Node.js（建议版本 16+）。运行以下命令创建项目：
npx create-react-app my-app
cd my-app
npm start项目启动后默认在 http://localhost:3000 运行。
核心概念学习
组件：React 的核心是组件化开发。函数组件是推荐方式，例如：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}状态管理：使用 useState Hook 管理局部状态：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}数据传递与事件处理
通过 props 向子组件传递数据，子组件通过回调函数与父组件通信：
function Parent() {
const handleClick = () => console.log("Clicked");
return <Child onClick={handleClick} />;
}
function Child({ onClick }) {
return <button onClick={onClick}>Click Me</button>;
}生命周期与副作用
使用 useEffect 处理副作用（如数据请求）：
import { useEffect } from 'react';
function DataFetcher() {
useEffect(() => {
fetch('api/data').then(response => response.json());
}, []); // 空依赖数组表示仅运行一次
}路由配置
通过 react-router-dom 实现多页面导航：
npm install react-router-dom配置示例：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}进阶工具链
- 状态管理库：Redux 或 Context API 适用于全局状态。
- 构建优化：了解
vite或next.js提升开发体验。 - UI 库：Material-UI 或 Ant Design 加速界面开发。
官方文档（react.dev）提供交互式教程，建议结合实践项目（如 Todo List）巩固知识。
