Loading article…
JSX （ JavaScript XMLと呼ばれることもあります）は、JavaScript言語構文のXMLのような拡張機能です。 [ 2 ]元々はFacebookがReactで使用するために作成した JSX は、複数のWeb フレームワークに採用されています。[ 3 ] : 5 [ 4 ] : 11構文糖衣であるため、JSX は通常、元の JSX と構造的に類似したネストされた JavaScript 関数呼び出しにトランスパイルされます。
TypeScriptで使用する場合、ファイル拡張子は.tsxです。[ 5 ]
JSXで書かれたコードは、Webブラウザで理解できるようになる前に、Babelなどのツールで変換する必要があります。 [ 6 ] [ 3 ] : 5この処理は通常、アプリケーションがデプロイされる前のソフトウェアビルドプロセス中に実行されます。
トランスパイラ（Babelなど）は、JSXの使用の性質について仮定を置く必要があります。そうしないと、JSXタグを何に変換すればよいかわかりません。Babelの場合（下記参照）、タグがReactで使用されることを想定したモードで使用するため、JSXタグをReact JSX Runtimeへの関数呼び出しに変換し、これらのタグの内部表現に対応する値を返します。[ 7 ] は、BabelがJSXに使用するもので、および@babel/plugin-transform-react-jsxの役割を果たす代替プラグマを指定できるようにすることで、他のプラットフォームへの適応に柔軟性を提供します。[ 7 ]React.createElementReact.Fragment
以下の例には、React-JSX/TSXコードと、Babelによるトランスパイル後の出力の両方が含まれています。
Babel によって追加されたコメント/*#__PURE__*/は、タグ付けされた呼び出しが純粋関数へのものであることを示しており、これはツリー シェイキングなどの後続のステップに関連しています。[ 8 ]コードの動作には必要ないため、以下の例では読みやすくするためにこの注釈を削除しています。
上記のトランスパイラ出力は、React 17以降のバージョンからの出力を示しています。それ以前のバージョンでは、出力はより簡潔なものになります。
const App = () = > { return React.createElement ( "div" , null , React.createElement ( " p " , null , "Header" ), React.createElement ( " p" , null , "Content" ), React.createElement ( " p " , null , " Footer" )); } ; export default App ;従来のインターフェースは、React以外のJSXユーザーによって依然として広く利用されている。
同じレベルにある複数の要素は、上記に示した要素、または短縮形<div>で区切られたフラグメント、あるいは配列として返されるなど、単一の要素で囲む必要があります。[ 9 ] [ 10 ] [ 4 ]： 68-69<Fragment><>
JSX は、HTML が提供する属性を反映するように設計されたさまざまな要素属性を提供します。カスタム属性もコンポーネントに渡すことができます。[ 11 ]すべての属性は、コンポーネントによって props (プロパティ) として受け取られます。
有効な JSX 属性名は有効な JSX識別子(変数名) であり、ECMAScript 識別子との主な違いは、-先頭以外の位置に (ハイフンマイナス) 文字を追加で使用できる点です。これにより、やなどのダッシュを含む HTML 属性をdata-*簡単に使用できますaria-role。無効な文字を含む属性は、構文で表記できます{... spread}。[ 2 ]
カスタム「タグ」（コンポーネント）とは、特定の呼び出しスタイルを受け入れるJavaScript関数のことです。
ここではname="Connor"単なる選択肢となる{ name: "Connor" }。
childrenラップコンポーネントを含むコンポーネントは、トランスパイルされた出力ですでに確認した属性を使用して定義できます。
有効な JSX タグ名は有効な JSX識別子(変数名) であり、ハイフン付きの XML タグや HTML タグも問題なく使用できます。ただし、カスタム コンポーネントは ECMAScript 文法の制限によりハイフン付きの名前を持つことはできません。[ 2 ]
JavaScriptの式（ただしステートメントは除く）は、中括弧を使ってJSX内で使用できます{}。[ 4 ]： 14-16
上記の例では、以下のように表示されます。
<h1> 11 </h1>JSX内ではif-else文は使用できませんが、代わりに条件式を使用できます。以下の例では、が1に等しいため、文字列としてレンダリングされます。{i===1?'true':'false'}'true'i
上記を実行すると、以下の結果が表示されます。
<div> <h1> true </h1> </div> 関数とJSXは条件式で使用できます。[ 4 ]： 88-90
上記を実行すると、以下の結果が表示されます。
<div> <div>セクション1 <span> （最初）</span> </div> <div>セクション2 </div> <div>セクション3 </div> </div>Babelなどのトランスパイラは、React以外の関数呼び出しを対象とする機能を提供します。ここでは、Babelは次のように呼び出しtagますfrag。
tagとの異なるバージョンを使用することでfrag、入力の異なる表現を生成できます。
上記では、JSXからECMAScriptコードへの変換について説明しました。「pragma」セクションで示されているように、JSX由来のオブジェクトを受け取るECMAScriptコードは、これらのデータに対して自由に処理を行うことができます。
HTMLとXMLに関して言えば、最も一般的な相違点は、属性の扱い方と利用可能なコンポーネントの設定方法である。
JSX は属性の解析方法を定義し、Babel は他の ECMAScript コードへの伝達方法に関する規約を維持していますが、どちらもこれらの属性が実際の HTML および XML 属性にどのようにマッピングされるかを定義していません。たとえば、React は{... spread}構文の必要性を最小限に抑えるために次の規約を使用しています。[ 14 ]
data-*HTMLのハイフンで区切られた属性名は、`<img>`と`<img>`を除き、キャメルケースに変換されますaria-*。これはJavaScript DOM APIに準拠しています。xlink:*名はキャメルケースに変換されます。例:xink:hrefは になりますxlinkHref。React の DOM レンダラーには、認識している属性のプリセット リストがあります。これらの属性の中には HTML/XML への変換用のものもあれば、内部使用用のものもあります。本番 (開発以外) モードでは、出力タグが "svg" または "math" でない限り、これらの属性のみが使用可能です。[ 15 ]
HTML属性は、その属性を持つ要素にCSSstyleスタイルのコレクションを適用します。人間工学的な対策として、React-DOMは、この値を文字列形式で渡すだけでなく、JavaScriptオブジェクトとして渡すことも受け入れます。の代わりに、と記述できます。「style」関数の実装は、オブジェクトを正しい文字列形式に自動的に変換します。ハイフン付きの名前を持つスタイルの使用を簡素化するために、同様のキャメルケースへの名前変更操作が行われます。[ 16 ]<div style={"color:" + clr}><div style={{ color: clr }}>
React-DOMでは、イベントハンドラ属性の値として文字列の代わりにJavaScript関数を渡すこともできます。[ 16 ]
出力言語によっては、異なるコンポーネント（HTML/XMLの「タグ」のように見える）が利用できる場合があります。たとえば、ReactのHTMLタグはから取得されますがreact-dom、これは別の言語をターゲットにする場合は使用されません。ランタイムは、いくつかのコンポーネントを事前に定義することもあります。はその一例ですが、Babelの規約により普遍的になっています。[ 17 ]<Fragment>