Geek Answers Handbook

Jsx --watch converts jsx syntax to lowercase "react" instead of uppercase "React"

Im free to follow facebook. React here, http://facebook.imtqy.com/react/docs/getting-started.html , but I am applying it to another html file.

This is my html file based on a set of starter answers:

<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>

I have installed responsive tools, now when I run "jsx --watch src / build /"

It converts this fragment:

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

To this snippet:

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')
);

But this tutorial shows this snippet:

// 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')
);

Due to the lowercase letter "r", the webpage throws an error, "reaction not defined." What is the truth. From the chrome console, I can confirm that "Response" is defined, not "react."

jsx , ?

+4
1

JSX :

/** @jsx React.DOM */

, react.DOM.

+7

More articles:


All Articles