利用者:嶋田印刷/JSX (JavaScript構文拡張)

JSX（JavaScript Syntax Extension）とはJavaScriptXMLと呼ばれることもある、JavaScriptの機能を全て備えた構文の拡張である。JSXは多くの開発者に馴染みのある構文を使用して、コンポーネントレンダリングを構造化する方法を提供する。外観はHTMLに似ている。

概要

JSXはJavaScriptライブラリのReactの「要素」 を生成する。Reactコンポーネントは通常JSXを使用して記述されるが、コンポーネントは純粋なJavaScriptで記述される場合もあるため、そうである必要はない。 JSXはXHPと呼ばれるPHP用にMeta （以前のFacebook ）によって作成された別の拡張構文に似ている。

マークアップ

JSXコードの例：

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

ネストされた要素

同じレベルの複数の要素は、上記の<div>要素、 <Fragment>またはその省略形<>で表されるフラグメントなど、単一のReact要素でラップするか、配列として返す必要がある。

属性

JSXは、HTMLによって提供されるものを反映するように設計された一連の要素属性を提供する。カスタム属性をコンポーネントに渡すこともできる。すべての属性は、コンポーネントによってpropsとして受け取られる。

JavaScript式

JavaScript式（ステートメントではない）は、中括弧{}を使用してJSX内で使用できる。

 <h1>{10+1}</h1>

上記の例では、次のようにレンダリングされる：

 <h1>11</h1>

条件文

If–elseステートメントはJSX内では使用できないが、代わりに条件式を使用できる。以下の例では、 { i === 1 ? 'true' : 'false' }文字列'true'としてiは1に等しいため。

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

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

上記はレンダリングされる：

<div>
 <h1>true</h1>
</div>

関数とJSXは、条件文で使用できる。

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>
  );
}

上記はレンダリングされる：

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

JSXで記述されたコードは、Webブラウザーで理解する前に、Babelなどのツールを使用して変換する必要がある。この処理は通常、アプリケーションが展開される前のソフトウェアビルドプロセス中に実行される。

参照

• XML用ECMAScript

外部リンク

• GitHub
• Draft: JSX Specification