5

私はFacebook の React チュートリアル http://facebook.github.io/react/docs/getting-started.htmlを大まかにフォローしていますが、別の html ファイルに適用しています。

これは、react スターター キットに基づく私の html ファイルです。

<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="build/comment.js"></script>
  </body>
</html>

「jsx --watch src/build/」を実行すると、react-toolsをインストールしました

このスニペットを変換しています：

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

このスニペットに：

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      react.DOM.div( {className:"commentBox"}, 
        " Hello, world! I am a CommentBox. "
      )
    );
  }
});
React.renderComponent(
  CommentBox(null ),
  document.getElementById('content')
);

ただし、チュートリアルには次のスニペットが示されています。

// tutorial1-raw.js
var CommentBox = React.createClass({
  render: function() {
    return (
      React.DOM.div({
        className: 'commentBox',
        children: 'Hello, world! I am a CommentBox.'
      })
    );
  }
});
React.renderComponent(
  CommentBox({}),
  document.getElementById('content')
);

小文字の 'r' が原因で、Web ページは「react が定義されていません」というエラーをスローします。これは本当です。クロムのコンソールから、「react」ではなく「React」が定義されていることを確認できます。

チュートリアルで説明されているように、jsx で正しい出力を作成するにはどうすればよいですか?

4

1 に答える 1