title: Unable to render a component from other component in react
body: <p>I am trying to render a component from other component, but failing miserable, Can someone please help me with code and help me understand what i am doing wrong? 
  Also, using the following example, can someone help me understand when to use type=text/jsx or type=text/babel?</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;Flask React&lt;/h1&gt;
    &lt;br&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- scripts --&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"&gt;&lt;/script&gt;
  &lt;script type="text/jsx"&gt;
  
    /*** @jsx React.DOM */
  
    var realPython = React.createClass({
      render: function() {
        return (&lt;realPython1 /&gt;);
      }
    });
  
    var realPython1 = React.createClass({
      render: function() {
        return (&lt;h2&gt;Greetings, from Real Python!&lt;/h2&gt;);
      }
    });
  
  
    ReactDOM.render(
      React.createElement(realPython, null),
      document.getElementById('content')
    );
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>