为何浏览器不能直接解析 React的JSX?怎么解决？请说明原因与场景？

【概念释义】

浏览器只懂 HTML/CSS/JS，不懂 JSX。JSX 须经 Babel/SWC/esbuild 编译为 React.createElement 或 _jsx 调用。开发时用 Vite/Webpack dev server 即时编译；生产构建打包转译。也可用 @babel/standalone 在线编译。

【基础使用】

"qb-hl-comment">// 源码
const App = () => <h1>Hi</h1>;

"qb-hl-comment">// 编译后（简化）
const App = () => jsx('h1', { children: 'Hi' });