JSX (JavaScript)

JSX (JavaScript XML, formally JavaScript Syntax eXtension) は、 JavaScript に XML のような文法が拡張された言語である。もともとReactで使用するためにFacebook（現Meta）によって作成されたJSXは、複数のWebフレームワークで使用されている。糖衣構文（シンタックスシュガー）であるJSXは通常、元のJSXと構造的に似ているJavaScriptの関数呼び出しによって作られたコードに変換される。

マークアップ JSXコードの例:

const App = () => { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> ); }

ネストされた要素同じ階層に複数の要素を配置する場合、<div>のような親要素か、配列が返され親要素が作られない<Fragment>(<>と短縮できる)を使って囲う必要がある。

属性 JSXは、HTMLによって提供される属性と同様な属性を使用できる。また、カスタム属性を定義し、コンポーネントに渡すこともできる。すべての属性は、コンポーネントにpropsとして渡される。

JavaScript式 JavaScript の式 (ただし文ではない)は、{}の JSX 内の中括弧に入れることができる。

Reactの場合、以下のようにレンダリングされる:

条件付き表現 If文は JSX 内で使用不可能だが、代わりに三項演算子を使用できる。

この例では 'true' という文字列がiが1のため選択される。

const App = () => { const i = 1;

return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); }

これはReactの場合以下のようにレンダリングされる:

同様に関数も使用できる:

const App = () => { const sections = [1, 2, 3];

return ( <div> {sections.map((n,i) => ( /* 'key' is used by React to keep track of list items and their changes */ /* Each 'key' must be unique */ <div key={"section-" + n}> Section {n} {i === 0 && <span>(first)</span>} </div> ))} </div> ); }

これはReactの場合以下のようにレンダリングされる:

<div> <div>Section 1<span>(first)</span></div> <div>Section 2</div> <div>Section 3</div> </div>

JSXは、ウェブブラウザで読み込まれる前に、Babelなどのツールで変換する必要がある。ほとんどの場合、このプロセスはデプロイ前のビルドで行われる。

JSX (JavaScript)

Źródło i licencja