title: Using reactjs with requirejs
body: <p>Recently, I started using <code>reactjs</code> along with a <code>backbonejs</code> router to build an application.</p>
  
  <p>I usually use use <code>requirejs</code> for dependency and code management. But, problem arises when I try to include files that contain <code>jsx</code> syntax.</p>
  
  <p>This is what I have so far as my <code>router.js</code>:</p>
  
  <pre><code>define(["backbone", "react"], function(Backbone, React) {
  
    var IndexComponent = React.createClass({
      render : function() {
        return (
          &lt;div&gt;
          Some Stuff goes here
          &lt;/div&gt;
          );
      }
    });
  
  
  
    return Backbone.Router.extend({
      routes : {
        "": "index"
      },
      index : function() {
        React.renderComponent(&lt;IndexComponent /&gt;, document.getElementById('index'));
      }
    });
  });
  </code></pre>
  
  <p>How do I put IndexComponent in its own file and call it in this file ? I have tried the usual method (the same that I have used with backbone and react) but got an error due to <code>jsx</code> syntax.</p>