## 📚 技术栈背景 | Tech Stack & Context
- 列出所有的相关技术栈和使用的语言
- [[React]]
- 主题：一句话总结这张卡片讲解了什么？
- 新建一个 React 项目时，从设计稿和数据结构出发，如何一步步构建功能完整的组件结构和交互逻辑。
- 相关文档：[Thinking in React – React](https://react.dev/learn/thinking-in-react)
## 🧩 相关场景 | Context
- 契机：为什么现在写它？
-
- 作用：它解决了什么问题？
- 明确每一步该做什么，先建静态版本还是先写 state，props 如何设计，避免混乱或返工。
- 应用场景：你未来会在什么地方用到它？
- 接到新页面的 UI 设计图，准备从 0 开始构建页面功能时
## 🔑 基本概念 | Key
- 组件（Component）：React 中最基本的 UI 构建单元，可以是[[React-函数式vs类式|函数组件或类组件]]。
- props：父组件传给子组件的数据，是只读的。
- state：组件内部的状态，用于描述交互过程中的可变数据。
- callback：子组件通过调用父组件传入的函数来“反向传值”。
- 单向数据流：React 的数据流向是由上到下的，状态通常保存在更高层的组件中。
## 🔄 工作流程 | Flow
### 总体流程
### 详细步骤
#### 0. 设计阶段
- 设计师负责提供：原型图/设计图（Figma）
- 后端负责提供：JSON 数据结构 / API 文档
#### 1. 将 UI 拆解为组件层级结构
- 仔细看图，标出有哪些可以复用的组件，形成一个大纲结构
在原型图中辨认出组件，并且转化为层级结构，写成大纲形式
例如：
 
- `FilterableProductTable`
- `SearchBar`
- `ProductTable`
- `ProductCategoryRow`
- `ProductRow`
#### 2. 构建静态版本（Stateless）
- 创建 components，并且复用其他 components
- 你可以从上到下构建，也可以从下到上构建，不过现实中其实是结合的
- 使用 `props` 把数据一层层传下去，暂时不引入任何 `state`
```bash
src/
├── components/
│ ├── FilterableProductTable/
│ ├── SearchBar/
│ ├── ProductTable/
│ └── ProductRow/
```
#### 3. 加入 state（useState）
1. 首先找出什么应该是 [[React - 状态管理 State, setState, useState|state]]
2. 其次判断 state 应该放在哪个 component 里 [[React如何判断该把数据放在哪里]]
1. 找出所有需要用到这个 state 的 components
1. 如果有多个，就放入共同 parent 里
2. 如果只有一个，就放进这个里
#### 4. 增加逆向数据流（callback）
增加逆向数据流：callback [[👾 代码库/草稿/React中上下层组件的交互：Props和Callbacks]]
## 🤔 常见问题 / 提示 | Tips