BootTabs (Mobx + React)

by ramnathv

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <ul class="nav nav-tabs">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main {
  margin-top: 20px;
}

#root {
  margin-top: 30px;
}

.form-control {
  margin-bottom: 10px;
}

body {
  font-family: Helvetica;
}

#app textarea {
  resize: vertical;
}

Babel + JSX

const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component, Children} = React;
const {render} = ReactDOM

class Store {
  @observable activeIdx = 0
}

const store = new Store()

const App = (props) =>
  <div>
    {props.children[store.activeIdx]}
  </div>
  
const App2 = (props) => 
   <App>
    <h2>Hello</h2>
    <h4>World</h4>
    <h5>New</h5>
  </App>
                        
render(
  <App2 />,
  document.getElementById("app")
)