Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

4章JSX

ここまでのコードでは、render()関数の中で定義されるユーザーインタフェースはReact.createElement()やReact.DOM.*のメソッド群（React.DOM.span()など）を使って定義されていました。メソッド呼び出しの構造が複雑になり、閉じカッコを正しく記述するのが面倒という問題がありました。そこで、よりシンプルな記法としてJSXが用意されています。

JSXはReactとは独立したしくみのため、使わなくてもまったく問題ありません。実際に、3章までのコードではJSXを使っていません。JSXを一切使わないということも可能です。ただし、一度便利さを知るとメソッド呼び出しの世界には戻りにくくなるでしょう。

	JSXが何の略かは定かではありませんが、JavaScriptXMLまたはJavaScript Syntax eXtensionの略だとされることがよくあります。JSXはオープンソースプロジェクトで、ホームページはhttp://facebook.github.io/jsx/にあります。

4.1　ハロー、JSX

1章で取り上げたHello worldの例を思い出してみましょう。

<script src="react/build/react.js"></script> <script src="react/build/react-dom.js"></script> <script> ReactDOM.render( React.DOM.h1( {id: ...