title: ReactJS and RequireJS -> How to use multiple classes returned from one module?
body: <p>I've got a RequireJS module that returns multiple ReactJS classes that I'd like to be immediately available to the JSX scope.</p>
  
  <p>e.g.</p>
  
  <pre><code>define(["require"], function (require) {
  
    var SimpleClass = React.createClass({displayName: 'SimpleClass',
      render: function() {
        return &lt;div&gt;HELLO DUDE {this.props.name}&lt;/div&gt;;
      }
    });
    var AnotherSimpleClass = React.createClass({displayName: 'AnotherSimpleClass',
      render: function() {
        return &lt;div&gt;SUPER DUDE {this.props.name}&lt;/div&gt;;
      }
    });
  
  
    var result = 
    {
      AnotherSimpleClass: AnotherSimpleClass,
      SimpleClass: SimpleClass
    };
  
    return result;
  });
  </code></pre>
  
  <p>I'd like to be able to use these in React/JSX like so (pseudocode):</p>
  
  <pre><code>define(["require","jsx!app/my_classes"], function (require, MyClasses) {
  
    React.renderComponent(
      &lt;div&gt;
        &lt;MyClasses.SimpleClass name="Test" /&gt;
        &lt;MyClasses.AnotherSimpleClass name="John" /&gt;
      &lt;/div&gt;
    , this.el);
  
  });
  </code></pre>
  
  <p>when I do, React fails to find my module classes. It only works if I expose the classes to the scope, ie:</p>
  
  <pre><code>define(["require","jsx!app/my_classes"], function (require, MyClasses) {
  
    var SimpleClass = MyClasses.SimpleClass;
    var AnotherSimpleClass = MyClasses.AnotherSimpleClass;
  
    React.renderComponent(
      &lt;div&gt;
        &lt;SimpleClass name="Test" /&gt;
        &lt;AnotherSimpleClass name="John" /&gt;
      &lt;/div&gt;
    , this.el);
  
  });
  </code></pre>
  
  <p>How can I do this? I know I can extract them to the current scope one by one, or extract them to the global scope, but it seems I should be able to use them from JSX without modification. Thanks!</p>
  
  <p>Note that I know I could just expose them to the global scope with a function like so:</p>
  
  <pre><code>  function exposeClasses(obj){
      for (var prop in obj)
      {
        window[prop] = obj[prop];
      }
    }
  
    exposeClasses(MyClasses);
  </code></pre>
  
  <p>but I'd prefer to leave them in their namespaces if possible. Note that this is <a href="https://stackoverflow.com/questions/23653616/react-js-is-it-possible-to-namespace-child-components-while-still-using-jsx-to">similar to this question being asked here on StackOverflow</a></p>