正文
React 是目前使用最广的前端框架之一，由 Facebook 开发，主打函数组件 + Hooks，生态非常完善。这篇带你从零学会 React 基础，看完就能写页面。
1. 创建 React 项目
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
2. 函数组件与 JSX
React 用 JSX 写视图，结构类似 HTML，但可以直接写 JS 表达式。
最简单组件：
function App() {
return <div>Hello React</div>
}
export default App
3. 状态管理：useState
React 用 useState 定义响应式数据：
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
4. 条件渲染 & 列表渲染
条件
{
isShow && <div>显示内容</div>
}
列表
const list = ['vue', 'react', 'angular']
return (
<ul>
{list.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)
5. 事件处理
function handleClick() {
alert('点击了')
}
return <button onClick={handleClick}>按钮</button>
6. 副作用 useEffect
相当于生命周期，常用于请求数据、定时器、监听窗口大小等。
import { useEffect } from 'react'
useEffect(() => {
// 进入执行
console.log('组件挂载或更新')
return () => {
// 销毁时执行
console.log('组件卸载')
}
}, []) // 空数组 = 只执行一次
7. 组件拆分与传值
父组件：
<Child name="React" />
子组件：
function Child(props) {
return <div>来自父组件：{props.name}</div>
}
8. 样式写法
- 行内样式：
style={{ color: 'red' }} - className：
<div className="box"> - CSS Modules / styled-components
总结
React 基础核心：
- 函数组件 + JSX
- useState 管理状态
- useEffect 处理副作用
- 组件拆分 + Props 传值
- 列表 & 条件渲染
学会这些，你已经可以独立完成简单项目和常见业务页面。
祝各位指尖飞码，bug 不沾。
个人观点 · 仅供参考
