React.js: how separate jsx es6

Question

i use client side rendering and faced with the following problem.

I have two components which are located in two different files

1. DefinitionNode

 class DefinitionNode extends BaseNode{ render() { return ( <div></div> ); } } 

2. BaseNode

 class BaseNode extends React.Component{ render() { return ( <div></div> ); } } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/baseNode.jsx"></script> <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/definitionNode.jsx"></script> 

After go to page i get an error: BaseNode is not defined

How do I make separate components is correctly?

Answer 1

Your jsx files were wrapped into closure during babel processing. If you want to share something between files, you have to export it. The simplest way is assign to the window:

class BaseNode extends React.Component {
  render() {
    return (
        <div></div>
    );
  }
}

window.BaseNode = BaseNode;

Here is working example in plunker: http://plnkr.co/edit/EgYBIzv9AboHftcyuWys?p=preview

But this way only for small applications and examples. If you are building something serious, use module system which will do this work for you, try SystemJS or Webpack , for example