React Tabs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://fb.me/react-0.14.7.js"></script>
  <script src="https://fb.me/react-dom-0.14.7.js"></script>
  

<body>
  
<div id="app"></div>
  
</body>

CSS

.nav {
  padding: 10px 10px 0;
  background: #f68621;
}

.nav a {
  color:#fff;
}
.nav a:hover {
  color:#999;
}
section {
  margin: 20px;
}
h2, p {
  margin: 0;
}

Babel + JSX

var tabData = [
  { name: 'Your Change', isActive: true },
  { name: 'Targets', isActive: false },
  { name: 'History', isActive: false }
];
var Tabs = React.createClass({
  render: function() {
    return (
      <ul className="nav nav-tabs">
        {tabData.map(function(tab){
          return (
            <Tab data={tab} isActive={this.props.activeTab === tab} handleClick={this.props.changeTab.bind(this,tab)} />
          );
        }.bind(this))}      
      </ul>
    );
  }
});
var Tab = React.createClass({
  render: function() {
    return (
      <li onClick={this.props.handleClick} className={this.props.isActive ? "active" : null}>
        <a href="#">{this.props.data.name}</a>
      </li>
    );
  }
});
var Content = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.activeTab.name === 'Your Change' ? 
        <section className="panel panel-danger">
          <h2 className="panel-heading">Your change</h2>
          <p className="panel-body">This is where you will find information about the change(s) that you have committed to.</p>
          <p className="panel-body">Aliquam scelerisque enim nec sollicitudin ullamcorper. Vestibulum ut nulla ut elit consequat auctor. Maecenas elit nibh, varius vel turpis id, finibus tincidunt erat. Morbi tincidunt suscipit turpis vel blandit. Phasellus vulputate malesuada felis, in molestie felis ultricies ut. Nulla maximus, nulla a lacinia pellentesque, lectus erat sollicitudin nisl, vel eleifend ligula nulla quis massa. Suspendisse eu sem at metus tristique condimentum. Vivamus id mauris quis purus porttitor pellentesque. Sed in sagittis eros. Nulla facilisi. Mauris rutrum sapien a odio pretium, quis tincidunt erat hendrerit. Mauris nisl felis, ornare eget lobortis nec, tincidunt ac leo. Mauris congue pellentesque enim, sed euismod ipsum pulvinar nec.</p>
         </section>
        :null} 
        {this.props.activeTab.name === 'Targets' ? 
        <section className="panel...