你可能会说
在 JavaScript 里写 HTML 标签，这语法合法吗？看着好奇怪。
JSX 是 JavaScript 的语法扩展——让你在 JS 代码中直接写类 HTML 标签，最终编译为函数调用。
在 JavaScript 里直接写 HTML 标签的语法。看起来像 HTML，但其实是 JS 表达式，可以嵌入变量和逻辑。
生活类比
像在作文里直接画插图——文字和图画混在一起写，比分开写更直观。
🎮 动手试试
👇 修改变量看 JSX 动态渲染
关于「JSX」，以下哪个描述最准确？
你可以这样告诉 AI
帮我写一个 JSX 组件：条件渲染（三元表达式）、列表渲染（map + key）、事件绑定（onClick），样式用 className。
JSX 看起来像 HTML 但本质是 JS：用 className 不是 class，用 {} 嵌入表达式，必须闭合标签。
模板字符串是纯文本拼接，JSX 生成虚拟 DOM 对象（有类型、可 Diff）。
React 组件开发
在 JS 中直接写类 HTML 标签，用 {} 嵌入变量和逻辑，条件渲染和列表渲染比模板字符串更直观。
和 AI 协作时
想让 AI 写 JSX 时，直接说「条件渲染用三元、列表用 map 加 key、事件绑定用 onClick，样式用 className」。
Vue/Angular 项目
Vue 用 template 模板语法，Angular 用 @Component 装饰器 + 模板，不需要 JSX。
与服务端渲染分离
纯后端或 CLI 项目不涉及视图层，不需要 JSX 语法。
在 JavaScript 里直接写 HTML 标签的语法。看起来像 HTML，但其实是 JS 表达式
像在作文里直接画插图——文字和图画混在一起写，比分开写更直观。
看到 .tsx/.jsx 文件里 return 后面写的 `<div></div>` 就是 J