React class is not defined (text/babel)

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.