什么是JSX？为什么浏览器无法读取JSX？

什么是 JSX？

JSX (JavaScript XML) 是 React 中的一种语法扩展，它允许你在 JavaScript 中写类似 HTML 的代码。
它的本质是 语法糖，在构建时会被编译成 纯 JavaScript（React.createElement 调用）。

示例：

const element = <h1>Hello, JSX!</h1>;

实际上会被 Babel 编译成：

const element = React.createElement('h1', null, 'Hello, JSX!');

为什么浏览器无法直接读取 JSX？

浏览器只识别 HTML、CSS 和纯 JavaScript，而 JSX 并不是原生 JavaScript，它是 React 提供的一种语法糖。

所以浏览器会报错：

Uncaught SyntaxError: Unexpected token '<'

因为 <h1> 在 JavaScript 中是不合法的语法。

解决方法：

必须通过 构建工具（Babel + Webpack / Vite） 把 JSX 编译为标准 JavaScript，再交给浏览器执行。

JSX 的优点

• 写起来像 HTML，直观描述 UI。

• 具有 JavaScript 的逻辑能力（可以在花括号 {} 中写表达式）。

• 与 React 的虚拟 DOM 高度契合。