.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を使用するReactには.tsxを使用してください。
技術的詳細
JSXは有効なJavaScriptではないため、BabelやSWCによってReact.createElement()呼び出しまたはJSXランタイムトランスフォームにトランスパイルされる必要があります。JSX式には中括弧内にJavaScriptロジックを含めることができます。
歴史
Facebookは2013年にReactとともにJSXを発表しました。HTMLとJavaScriptを混在させることに当初は議論がありましたが、JSXは広く受け入れられ、現在React、Preact、SolidJSで何百万もの開発者に使用されています。