title: How to wait for in browser JSX compiler before call to render component
body: <p>(Using the in browser JSX Transformer) <strong>When calling a react component from plain javascript, i get an Uncaught ReferenceError</strong>.</p>
  
  <p>I try to call a React.js (0.12.2) component from my javascript app. I got a JQuery document.ready handler to do so.</p>
  
  <p>It seams, that the in browser JSX compiler needs some time before react's components are ready to use.</p>
  
  <p>Document.ready might not be an option in that case.</p>
  
  <p>See the example below:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;script src="jquery-2.1.3.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="react-0.12.2/JSXTransformer.js"&gt;&lt;/script&gt;
      &lt;script src="react-0.12.2/react.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/jsx" src="reactComponent.js"/&gt;
  
      &lt;script src="app.js"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="target"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>app.js:</p>
  
  <pre><code>$(function () {
          console.log("app.js: " + typeof MyComponent);
          init();
  });
  </code></pre>
  
  <p>component.js:</p>
  
  <pre><code>var MyComponent = React.createClass({
          render: function () {
              return (&lt;div&gt;works&lt;/div&gt;)
          }
  });
  
  function init() {
          console.log("init: " + typeof MyComponent);
          React.renderComponent(&lt;MyComponent/&gt;, document.getElementById("target"));
  }
  </code></pre>
  
  <p>Running this in the browser outputs in the log:</p>
  
  <pre><code>app.js: undefined
  app.js: Uncaught ReferenceError: init is not defined
  </code></pre>
  
  <p>But when I load the app.js through the jsx transformer, by adding <code>type="text/jsx"</code> in the script tag, it works:</p>
  
  <pre><code>app.js: function
  reactComponent.js: init: function
  </code></pre>
  
  <p>Is there an other way to wait for the JSX transformer to finish, instead of loading all js files with type <code>text/jsx</code>?
  And am I right, that this is really specific to the in browser JSX transformer</p>