JSXはReactと共に使うことを推奨されている、JavaScriptへ変換するためのXMLシンタックスです。

ReactとJSX

とJSXは独立した技術ですが、JSXは当初Reactを考慮して設計されたものです。JSXの効果的な用途は2つあります。

  • ReactのDOMコンポーネント(React.DOM.*)のインスタンスをコンストラクトする
  • React.CreateClass()を用いて複合コンポーネントのインスタンスをコンストラクトする

なぜJSXを使うのか

ReactはJSXなしでも動作します。単にReact.DOMにある関数を使ってマークアップを組み立てましょう。例えば、簡単なハイパーリンクを行う場合は以下のようになります。

var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');

JSXを使った時の利点は以下のとおりです。

  • の構造を視覚化するのが容易になる。
  • デザイナーが変更を加える際に、より具合が良い。
  • を使ったことのある人にわかりやすい。