# React + Babel 项目规范
用HTML+React+Babel做原型时必须遵守的技术规范。不遵守会炸。
## Pinned Script Tags（必须用这些版本）
在HTML的``里放这三个script tag，用**固定版本+integrity hash**：
```html
```
**不要**用`react@18`或`react@latest`这种unpinned版本——会出现版本漂移/缓存问题。
**不要**省略`integrity`——CDN一旦被劫持或篡改，这是防线。
## 文件结构
```
项目名/
├── index.html # 主HTML
├── components.jsx # 组件文件（type="text/babel"加载）
├── data.js # 数据文件
└── styles.css # 额外CSS（可选）
```
HTML里加载方式：
```html
```
**不要**用`type="module"`——会和Babel冲突。
## 三条不可违反的规矩
### 规矩1：styles 对象必须用唯一命名
**错误**（多组件时必炸）：
```jsx
// components.jsx
const styles = { button: {...}, card: {...} };
// pages.jsx ← 同名覆盖！
const styles = { container: {...}, header: {...} };
```
**正确**：每个组件文件的styles用唯一前缀。
```jsx
// terminal.jsx
const terminalStyles = {
screen: {...},
line: {...}
};
// sidebar.jsx
const sidebarStyles = {
container: {...},
item: {...}
};
```
**或者用inline styles**（小组件推荐）：
```jsx
...
```
这条是**非协商**的。每次写`const styles = {...}`都必须replace成specific命名，否则多组件加载时全栈报错。
### 规矩2：Scope 不共享，需手动export
**关键认知**：每个`