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

StackOverflow https://stackoverflow.com/questions/21130374

  •  28-09-2022
  •  | 
  •  

Question

Im loosely following facebooks React tutorial here, http://facebook.github.io/react/docs/getting-started.html, but I am applying it to a different html file.

This is my html file, based on the react starter kit:

<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 installed react-tools, now when I run "jsx --watch src/ build/"

It is converting this snippet:

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

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

Because of the lowercase 'r', the webpage throws an error, "react is not defined". Which is true. From chrome's console I can confirm that "React", not "react" is defined.

How do I get jsx to build the correct output as described in the tutorial?

Was it helpful?

Solution

At the top of your JSX file you should have the comment:

/** @jsx React.DOM */

I'm guessing you mistyped it as react.DOM.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top