JSX構文を理解する

参考：
JSX in Depth | React
reactjs - React.jsのJSXを使ってみる - Qiita
jsx(Reactのほう)に慣れる - こおろぎと蛞蝓

特にJSX in Depth | Reactを用いながら理解を進めていきましょう。

なんでJSXを使うの？

Reactとともに用いるとき、プレーンなJavaScriptでも問題ありません。
しかし、より簡潔で使い慣れた構文であるJSXのほうが、書きやすく読みやすいというメリットがあります。これを糖衣構文と呼びます。

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);