Menu
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?
681
At the top of your JSX file you should have the comment:
/** @jsx React.DOM */
I'm guessing you mistyped it as react.DOM.
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
