React.jsのチュートリアルでつまらないひっかかり方をした

React.jsのチュートリアルをやってみようと読み進めながら写経していたらわずか3ステップ目(tutorial3.js)の段階で次のエラーがChrome Javascript Consoleで出ました。

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

ググっても情報でないし、ソースをコピペしても解決しないし、
でもうReact.jsの体験はしばらく見送ろうと思った矢先にふと「もしかしたら」とダメ元でtutorial2.jsをtutorail1.js(tutorial3.js)の前に書いたらあっさり解決しました。

正しく動いた方(text/jsx内のみ記載）

<script type="text/jsx">
  var CommentList = React.createClass({
    render: function() {
      return (
        <div className="commentList">
          Hello, world! I am a CommentList.
        </div>
      );
    }
  });

  var CommentForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });

  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          <h1>Comments</h1>
          <CommentList />
          <CommentForm />
        </div>
      );
    }
  });
  React.render(
    <CommentBox />,
    document.getElementById('content')
  );
</script>

ダメな例

<script type="text/jsx">
  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          <h1>Comments</h1>
          <CommentList />
          <CommentForm />
        </div>
      );
    }
  });
  React.render(
    <CommentBox />,
    document.getElementById('content')
  );

  // ここから下はCommentBoxの前に定義しないとダメ
  var CommentList = React.createClass({
    render: function() {
      return (
        <div className="commentList">
          Hello, world! I am a CommentList.
        </div>
      );
    }
  });

  var CommentForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });
</script>