第2回 簡単なReact.jsの使い方 （2/8）

２）簡単なJSXの使い方を理解する

JSX とはJavaScriptを拡張した言語です。React.jsはJSX の使用を前提として作られているため、ぜひ利用しましょう。

例えば、JSX を利用した場合と、利用しなかった場合でどのように違うのかを見てみましょう。以下のソースコードはJSX を利用して記述しています。

var SimpleComponent = React.createClass({
  render: function() {
    return (
      <div>
        <div className="hoge">fuga</div>
        <ul>
          <li>あいうえお</li>
        </ul>
      </div>
    );
  }
});
 
React.render(<SimpleComponent />, document.getElementById('react-container'));

SimpleComponentというクラスをReact.createClassで定義し、それをReact.renderで#react-containerにレンダリングしています。renderメソッドで定義されたHTMLが描画されるのだと予想がつきます。

JSX を使わずにJavaScriptで記述する場合には次のように書きます。

var SimpleComponent = React.createClass({displayName: "SimpleComponent",
  render: function() {
    return (
      React.createElement("div", null,
        React.createElement("div", {className: "hoge"}, "fuga"),
        React.createElement("ul", null,
          React.createElement("li", null, "あいうえお")
        )
      )
    );
  }
});
 
React.render(React.createElement(SimpleComponent, null), document.getElementById('react-container'));

これらを見比べると、JSX を使った方が明らかに簡潔ですし、直感的です。できるだけJSX を利用することをお勧めします。