Header

Content

Footer

のように単一のコンテナ要素にラップするか、配列として返す必要がある。 属性 JSXはHTMLによって提供されるものを反映するように設計された要素属性の範囲を提供する。カスタム属性もコンポーネントに渡すことができる。全ての属性はコンポーネントによってpropsとして受け取られる。 JavaScriptの式 JavaScriptの式 (文ではない) は、{}を使うことによってJSXのコード内に記述することができる。

{10+1}

上記のコードは下記のように描画される。

11

条件文 if文はJSX内で使用することはできないが、条件式は使用することができる。以下の例の{ i === 1 ? 'true' : 'false' }では、iと1が等しいので、文字列'true'が描画される。 class App extends React.Component { render() { const i = 1; return ( ); }} 関数とJSXは条件式内で使用することができる。 class App extends React.Component { render() { const sections = [1, 2, 3]; return ( ); }} 上記は下記のように描画される。 JSXで書かれたコードはウェブブラウザで実行可能にするために、Babelなどのツールを利用して事前に変換する必要がある。この処理は通常はアプリケーションが配置されるよりも前の、ソフトウェアを構築している段階で実行される。

※この「JSX」の解説は、「React」の解説の一部です。
「JSX」を含む「React」の記事については、「React」の概要を参照ください。