Bootstrap Tabs, Backbone Router, and React.js

http://stackoverflow.com/a/22464668/368697

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<div class="container">
  <h5>Doing some nav</h5>
  <div id="application"></div>
</div>

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

JavaScript 1.7

/**
 * Using React 0.14.7
 *
 * - 2016-02-15: Update to React 0.14.7, ReactDOM, Babel
 * - 2015-04-28: Update from React 0.12 to 0.13.2
 * - 2015-04-14: Load all assets over SSL
 */

var Tab = React.createClass({
  propTypes: {
    onSelect: React.PropTypes.func.isRequired 
  },

  handleClick: function(event) {
    event.preventDefault();
    this.props.onSelect(this.props.uid);
  },

  render: function() {
    var className;
    if (this.props.active) {
      className = 'active';
    }
  
    return (
      <li className={className}>
        <a href={"#" + this.props.uid} onClick={this.handleClick}>
          {this.props.uid}
        </a>
      </li>
    );
  }
});


var TabMenu = React.createClass({  
  render: function() {
    var tabNodes = this.props.tabs.map(function(tab) {
      return (
        <Tab
          active={this.props.activeTabUid === tab.uid}
          key={tab.uid}
          onSelect={this.props.navigateToTab}
          uid={tab.uid} />
      );
    }, this);

    return (
      <ul className="nav nav-tabs">
        {tabNodes}
      </ul>
    );
  }
});

var navigateToTab = function(uid) {
  router.navigate(uid.toLowerCase(), {trigger: true});
};

var tabMenu = ReactDOM.render(
  <TabMenu
    navigateToTab={navigateToTab}
    tabs={[{uid: "Home"}, {uid: "Contact"}]} />,
  document.getElementById("application")
);

var Router = Backbone.Router.extend({
  routes: {
    "": "home",
    "home": "home",
    "contact": "contact"
  },

  contact: function() {
    tabMenu.setProps({activeTabUid: "Contact"});
  },

  home: function() {
    tabMenu.setProps({activeTabUid: "Home"});
  }
});
var router = new Router();
Backbone.history.start();