title: Basic setup for React with react-router and requirejs
body: <p>I'm trying to get the <a href="https://github.com/rackt/react-router" rel="nofollow">react-router</a> up and running, but somehow React is not defined within react-router and because of that fails with the error </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'createClass' of undefined
  </code></pre>
  
  <p>I'm also getting this error later:</p>
  
  <pre><code>Uncaught Error: Load timeout for modules: jsx!testapp_unnormalized2,jsx!testapp
  </code></pre>
  
  <p>Any idea of what I'm doing wrong here? I simply want to get the router working without concatenating all the files.</p>
  
  <p>This is how the app looks:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!-- ... --&gt;
  
      &lt;script data-main="../resources/js/init" src="../resources/bower_components/requirejs/require.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;!-- ... --&gt;
  </code></pre>
  
  <p><strong>init.js</strong></p>
  
  <pre><code>require.config({
  
    paths: {
      react: "/resources/bower_components/react/react-with-addons",
      JSXTransformer: "/resources/bower_components/jsx-requirejs-plugin/js/JSXTransformer",
      jsx: "/resources/bower_components/jsx-requirejs-plugin/js/jsx",
      jquery : "/resources/bower_components/jquery/dist/jquery",
      'react-router' : "/resources/bower_components/react-router/dist/react-router",
      'react-router-shim': 'react-router-shim'
    },
  
    shim : {
  
      'react-router': {
        deps:    ['react'],
        exports: 'Router'
      }
    },
  });
  
  require(['jsx!testapp'], function(App){
    var app = new App();
    app.init();
  });
  </code></pre>
  
  <p><strong>react-router-shim.js</strong></p>
  
  <pre><code>define(['react'], function(React) {
    "use strict";
  
    window.React = React;
  });
  </code></pre>
  
  <p><strong>testapp.js</strong></p>
  
  <pre><code>define(function(require){
    var React = require('react');
    var Router = require('react-router');
  
    var Route = Router.Route;
    var NotFoundRoute = Router.NotFoundRoute;
    var DefaultRoute = Router.DefaultRoute;
    var Link = Router.Link;
    var RouteHandler = Router.RouteHandler;
  
    var routes = (
      &lt;Route handler={Home} path="/"&gt;
        &lt;DefaultRoute handler={Home} /&gt;
      &lt;/Route&gt;
    );
  
    var Home = React.createClass({
      render: function() {
        return(
          &lt;p&gt;This is the mathias page&lt;/p&gt;
        );
      }
    });
  
    var App;
  
    App.init = function () {
      Router.run(routes, Router.HistoryLocation, function (Handler) {
        React.render(&lt;Handler/&gt;, document.getElementById('content'));
      });
    };
  
    return App;
  
  });
  </code></pre>