# React + Babel 版本锁定规范

> 在 HTML 里写 React 组件时必须用下面这套固定 CDN，**严禁随手升级**。

## 必须用的 CDN

```html
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
```

**禁用**：
- ❌ react@18（未锁 patch version）
- ❌ 省略 `integrity` hash
- ❌ 使用 `type="module"`

---

## Styles 对象命名强制规则

**严禁**用 `const styles = { ... }` 这种通用名。当同一页引入多个 Babel 文件时，全局作用域的 styles 对象会互相覆盖，导致 UI 神秘崩溃。

```jsx
// ❌ 错
const styles = { container: { ... } };

// ✅ 对 —— 用组件名前缀
const terminalStyles = { container: { ... } };
const cardStyles = { container: { ... } };

// 或者用内联 style 直接写
<div style={{ padding: 16 }}>...</div>
```

---

## 跨 Babel 文件共享组件

每个 `<script type="text/babel">` 被 transpile 后进入**独立作用域**。想在文件 A 定义、文件 B 使用：

```jsx
// components.jsx 末尾：
Object.assign(window, {
  Terminal, Line, Spacer,
  Gray, Blue, Green, Bold,
});
```

之后 `scenes.jsx` 里可以直接用 `<Terminal />`。

---

## 常见报错对照

| 症状 | 原因 | 修复 |
|------|-----|------|
| "Cannot read property X of undefined" + 偶发 | 多个 styles 对象互相覆盖 | 给每个 styles 加组件名前缀 |
| React 组件未定义 | 跨 Babel 文件未 export 到 window | 在源文件末尾 `Object.assign(window, {...})` |
| Integrity check failed | CDN 升级导致 hash 不匹配 | 锁 patch version，不要用 react@18 |
