React JSX

JSX 是 React 推出的 JavaScript 语法扩展：允许在 JavaScript 代码里直接书写类似 HTML 的标签，用来描述界面长什么样。它是写 React 组件的"通用语言"，学会 JSX 是入门 React 的第一步。

为什么用 JSX

React 认为界面结构与逻辑天然耦合，JSX 把两者写在一起，让代码直观易读：

// 不用 JSX：层层调用 createElement，冗长难读（需 import React from 'react'）
const el = React.createElement('h1', null, '你好')

// 使用 JSX：一目了然，写法像 HTML
const el2 = <h1>你好</h1>

JSX 既不是字符串也不是 HTML，编译后会被转换成上面的 createElement 调用，最终生成真实的 DOM。

JSX 中嵌入表达式

用一对花括号 { } 可以嵌入任意 JavaScript 表达式：变量、运算、函数调用都可以，但放 if、for 这类语句会报错：

const name = '小明'
const element = <p>你好，{name}，你今年 {3 + 2} 岁</p>
// 输出：你好，小明，你今年 5 岁

属性与 className

JSX 标签同样可以带属性。因为 class 是 JavaScript 保留字，CSS 类名必须写成 className，属性名统一用驼峰式：

const url = 'https://react.dev'
const link = <a className="out" href={url} target="_blank">React 官网</a>

JSX 也是表达式

编译后 JSX 是普通 JavaScript 对象，可以赋给变量、放进数组、作为函数的返回值，所以能和 map、if 等语法自由组合：

const fruits = ['苹果', '香蕉', '橙子']
const list = <ul>{fruits.map(f => <li key={f}>{f}</li>)}</ul>

上面这段会把三种水果渲染成一组列表项。

注释与顶层结构

JSX 里不能写 HTML 注释，注释要写在花括号内；返回多个并列标签时必须用一个根标签包住，常用 <>...</> 空片段，避免多包一层无用的 div：

function App() {
  return (
    <>
      {/* 这是 JSX 注释 */}
      <h1>标题</h1>
      <p>正文</p>
    </>
  )
}

小结：JSX 把 HTML 语法与 JavaScript 表达式合二为一，记住三个约定即可流畅书写：表达式用 { } 包裹、类名写 className、注释写进花括号。