title: structure of a Backbone and React single page app
body: <p>I've been using <code>backbone.js</code> for most of my frontend JavaScript projects so far, but after hearing about Facebook's <code>react.js</code> I got interested and started poking around.</p>
  
  <p>I'm wondering whether or not I'm supposed to use the <code>Backbone.View</code> class anymore or replace every "view" with a react "component" - even the "base-view" that's layouting the page ...</p>
  
  <p>I found some posts in the interwebs that still used <code>Backbone.View</code>s - others I stumbled upon only created React-classes.</p>
  
  <ul>
  <li><a href="http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html" rel="noreferrer">http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html</a></li>
  <li><a href="https://usepropeller.com/blog/posts/from-backbone-to-react/" rel="noreferrer">https://usepropeller.com/blog/posts/from-backbone-to-react/</a></li>
  <li><a href="http://blog.mayflower.de/3937-Backbone-React.html" rel="noreferrer">http://blog.mayflower.de/3937-Backbone-React.html</a></li>
  <li><a href="https://medium.com/react-tutorials" rel="noreferrer">https://medium.com/react-tutorials</a></li>
  </ul>
  
  <p>Maybe someone can point me in the right direction ... what to use when and how to best implement multiple "pages/states" in single page app and not just the usual (I can stand it anymore) TODO example.</p>
  
  <p>Here some code that I came up with:</p>
  
  <p>Backbone init stuff:</p>
  
  <pre><code>require(
    [
      "jsx!app/view/base",
      "react",
      "app/router",
      "backbone"
    ],
    function (BaseView, React, Router, Backbone) {
      "use strict";
  
      var router = new Router();
      var base = new BaseView({router: router});
  
      React.renderComponent(base, document.getElementById("page"));
  
      router.on("route", function(action) {
        base.setProps({path: action});
      });
  
      Backbone.history.start({pushState: true});
    }
  );
  </code></pre>
  
  <hr>
  
  <p><code>app/router</code>:</p>
  
  <pre><code>define(function(require) {
  
    "use strict";
  
    var Backbone = require("backbone");
  
    /**
     *
     */
    var Router = Backbone.Router.extend({
      routes: {
        "": "home",
        "test": "test",
        "*error": "404"
      }
    }); // end Router
  
  
    return Router;
  });
  </code></pre>
  
  <hr>
  
  <p><code>app/view/base.jsx</code>:</p>
  
  <pre><code>define(function(require) {
  
    "use strict";
  
    var React = require("react");
  
    var mixins = require("app/utils/mixins");
  
    var Header = require("jsx!app/view/header");
    var ContentHome = require("jsx!app/view/content_home");
    var ContentTest = require("jsx!app/view/content_test");
    var ContentLogin = require("jsx!app/view/content_login");
  
    /**
     *
     */
    var BaseView = React.createClass({
  
      render: function() {
        var content;
  
        switch (this.props.path) {
          case "home":
            content = &lt;ContentHome /&gt;
            break;
          case "test":
            content = &lt;ContentTest /&gt;
            break;
          case "login":
            content = &lt;ContentLogin /&gt;
            break;
  
          case "404":
          default:
            content = "Error, page not found";
            break;
        } 
  
        return (
          &lt;div id="base" onClick={this.onClick}&gt;
            &lt;Header /&gt;
            {content}
          &lt;/div&gt;
        );
      },
  
      onClick: function(event) {
        if (event.target.tagName.toLowerCase() === "a" &amp;&amp;
            event.target.className === "main") {
          event.preventDefault();
          this.props.router.navigate(event.target.pathname, {trigger: true});
        }
      }
  
    }); // end BaseView
  
    return BaseView;
  });
  </code></pre>
  
  <hr>
  
  <p>But I'm not completely pleased with this setup. Any input is welcome.</p>