L22. 前端入门：用 v0.dev + React 降维打击

Vibe Coding 宣言：前端很难？那是对写代码的人来说。对指挥代码的人来说，前端就是拼积木。

0. 为什么这一课至关重要？ (Why It Matters)

• Streamlit 的局限：它只能做数据看板。如果你想做一个像淘宝一样的电商网站，还得是 React。
• v0.dev 的神力：这是 Vercel 出的 AI 前端生成器。你说句话，它给你生成 React 代码。
• Tailwind CSS：不用写 CSS 文件，直接在 class 里写样式。这是现代前端的标配。

1. 目标 (Goal)

利用 v0.dev 生成界面代码，并用 Vite + React 搭建一个现代化的前端项目。

2. 核心概念/装备/指令 (The Core)

2.1 React (The Framework)

• Component (组件)：一切皆组件。按钮是组件，导航栏是组件，页面也是组件。
• Props (属性)：父组件传给子组件的数据。
• State (状态)：组件内部的数据（比如输入框里的字）。

2.2 v0.dev (The Generator)

一个网站。你在对话框里输入“我要一个黑色主题的登陆页面”，它给你生成代码。

3. 实战演练 (Action)

Step 1: 初始化 React 项目

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Step 2: 使用 v0.dev 生成界面

1. 打开 v0.dev。
2. 输入：A modern product card with image, title, price, and a buy button. Dark mode style.
3. 它会生成一段代码（通常是基于 shadcn/ui 和 Tailwind）。
4. 点击右上角 Code，复制。

Step 3: 粘贴代码

把生成的代码粘贴到 src/App.jsx 里。 注：可能需要安装一些依赖（如 lucide-react, tailwindcss），看 v0 的提示。

Step 4: 修改内容

找到代码里的文字，换成你的真实数据。

<Card title="iPhone 15" price="$799" />

4. 常见问题 (FAQ - Vibe Style)

Q: 这一课有点难？ A: 确实。 前端生态很乱。如果搞不定，先回退到 Streamlit。只要能展示数据就行，不寒碜。

Q: 为什么生成的代码报错？ A: 缺依赖。 看报错信息，缺啥装啥 (npm install xxx)。或者直接把报错甩给 Claude。

Q: HTML 和 JSX 是一回事吗？ A: 差不多，但有坑。 class 要写成 className。标签必须闭合。

5. 验收标准 (Definition of Done)

1. 成功运行 npm run dev。
2. 浏览器里展示了一个不是默认样式的页面（哪怕只是个按钮）。
3. 修改代码里的文字，网页能自动更新。

---

Next Mission: L23. 配置化改造：把死代码变活