Error with basic React Example: Uncaught TypeError: undefined is not a function
I'm trying to get react connected into my app. Its a rails app using rails-react (though I don't think that's part of the problem). I'm currently using a very simple 1 component setup:
// react_admin.js.jsx
/** @jsx React.DOM */
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
My html file contains:
<body>
<div id="content"></div>
<script src="/assets/react.js?body=1"></script>
<script src="/assets/react_admin.js?body=1"></script>
</body>
I can see that rails-react is converting my react_admin.js.jsx into react_admin.js as follows:
/** @jsx React.DOM */
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.DOM.div({className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
React.render(
CommentBox(null),
document.getElementById('content')
);
However chrome is raising an ''Uncaught TypeError: undefined is not a function'' in the Render.react() call, which it shows between "(" and "CommentBox(null)"
Can someone tell me what I'm doing wrong?
Answer
After 0.14 React moved to ReactDOM.render(), so if you update React, your code should be:
ReactDOM.render(
<CommentBox />, document.getElementById('content'));
But make sure to include both react.js and react-dom.js in your project since those are now separated.