【react】基础教程
目录
一、React 简介
二、环境搭建
1. 创建 React 项目
2. 项目结构
三、核心概念
1. JSX 语法
2. 组件 (Component)
3. 状态 (State) 与属性 (Props)
4. 事件处理
5. 条件渲染
6. 列表渲染
四、Hooks（函数组件的核心）
1. useState
2. useEffect
3. 其他常用 Hooks
五、组件通信
1. 父传子：通过 Props
2. 子传父：通过回调函数
六、路由管理（使用 React Router）
1. 安装
2. 基础配置
七、状态管理（使用 Context API）
1. 创建 Context
八、进阶学习方向
九、官方资源
一、React 简介
React 是一个用于构建用户界面的 JavaScript 库（专注于视图层），由 Facebook 开发。其核心特性包括：
组件化：将 UI 拆分为独立可复用的组件。
虚拟 DOM：高效更新界面，优化性能。
声明式编程：通过描述 UI 的最终状态，而非具体操作步骤。
二、环境搭建
1. 创建 React 项目
使用官方脚手架工具 create-react-app 快速初始化项目：
npx create-react-app my-app
cd my-app
npm start2. 项目结构
my-app/
├── public/ # 静态资源
├── src/ # 源代码
│ ├── App.js # 根组件
│ └── index.js # 入口文件
└── package.json # 依赖配置三、核心概念
1. JSX 语法
JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的结构：
const element = <h1>Hello, React!</h1>;2. 组件 (Component)
函数组件（推荐）：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}类组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}3. 状态 (State) 与属性 (Props)
Props：父组件传递给子组件的数据（只读）。
State：组件内部管理的动态数据（通过 useState 或 setState 更新）。
function Counter() {
const [count, setCount] = useState(0); // 使用 useState Hook
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}4. 事件处理
<button onClick={() => alert('Clicked!')}>Click Me</button>5. 条件渲染
function Greeting({ isLoggedIn }) {
return isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Login.</h1>;
}6. 列表渲染
使用 map() 和 key 属性：
function TodoList() {
const todos = ['Learn React', 'Build a Project', 'Deploy'];
return (
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
);
}四、Hooks（函数组件的核心）
1. useState
管理组件状态：
const [state, setState] = useState(initialValue);2. useEffect
处理副作用（如数据请求、DOM 操作）：
useEffect(() => {
// 组件挂载或更新时执行
fetchData();
return () => {
// 组件卸载时清理（如取消订阅）
};
}, [dependencies]); // 依赖数组控制执行时机3. 其他常用 Hooks
useContext：访问 React 上下文。
useRef：获取 DOM 引用或保存可变值。
useReducer：复杂状态管理。
五、组件通信
1. 父传子：通过 Props
function Parent() {
return <Child message="Hello from Parent" />;
}
function Child({ message }) {
return <p>{message}</p>;
}2. 子传父：通过回调函数
function Parent() {
const handleChildClick = (data) => {
console.log('Child sent:', data);
};
return <Child onClick={handleChildClick} />;
}
function Child({ onClick }) {
return <button onClick={() => onClick('Data from Child')}>Click</button>;
}六、路由管理（使用 React Router）
1. 安装
npm install react-router-dom2. 基础配置
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}七、状态管理（使用 Context API）
1. 创建 Context
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <ThemedButton />;
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button style={{ background: theme }}>Themed Button</button>;
}八、进阶学习方向
-
性能优化：
React.memo,useMemo,useCallback -
状态管理库：Redux, MobX
-
服务端渲染：Next.js
-
UI 库：Material-UI, Ant Design
九、官方资源
-
React 官方文档
-
React 中文文档
-
Create React App 指南
通过实践小项目（如 Todo List、博客系统）巩固知识，逐步深入复杂应用开发！
码字不易，欢迎各位大佬点赞