React class is not defined (text/babel) - babeljs

Question

I have commentBox.jsx file, with following code:
var CommentBox = React.createClass( {
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
</div>
);
}
});
In index.html, I want to render this component:
<div id="content"></div>
<script type="text/babel" src="scripts/commentBox.jsx"></script>
<script type="text/babel">
ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>
But I'm getting error: "CommentBox is not defined"; Why this is not working?
If I will place all code in one file(commentBox.js) - it will work.

Answer 1

You need to declare var CommentBox; in its own script block above the other two. The scope of your variables is not shared between your script imports.
<div id="content"></div>
<script>
var CommentBox;
</script>
<script type="text/babel" src="scripts/commentBox.jsx"></script>
<script type="text/babel">
ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>
You can also remove the var from your jsx file.

Answer 2

CommentBox is not declared. If you want it that way, then your codes should go like this:
<script type="text/babel">
var CommentBox = React.createClass( {
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
</div>
);
}
});
ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>