🍋
Menu
.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 中使用。

从 .JSX 转换

转换为 .JSX

相关格式