.jsx
Code
JSX(JavaScript XML — React)
JSX 是 JavaScript 的语法扩展,允许在 JavaScript 代码中编写类 HTML 标记。它是在最流行的前端库 React 中定义 UI 组件的标准方式。
MIME 类型
text/jsx
类型
文本
压缩
无损
优点
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
缺点
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
何时使用 .JSX
在 React 组件文件中使用 JSX;搭配 TypeScript 时使用 .tsx。
技术细节
JSX 不是有效的 JavaScript — 它必须通过 Babel 或 SWC 转译为 React.createElement() 调用或 JSX 运行时转换。JSX 表达式可以在花括号内包含 JavaScript 逻辑。
历史
Facebook 于 2013 年随 React 一起推出了 JSX。最初因混合 HTML 和 JavaScript 而备受争议,但 JSX 已被广泛接受,如今被数百万开发者在 React、Preact 和 SolidJS 中使用。