Experiments with 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>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
 <div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}
.list-group-item:first-child, 
.list-group-item:last-child{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Babel + JSX

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

const ListGroup = (props) => {
  return(
    <ul className="list-group">
      {props.items.map((d, i) => {return(
         <ListItem key={d.text} {...d}></ListItem>
      )})}
    </ul>
  )
}

const ListItem = (props) => {
  return(
    <li className="list-group-item">
      <div className='clearfix'>
        <span className='pull-left'>{props.text}</span>
        <span className='pull-right'>{props.value}</span>
      </div>
    </li>
  )
}






const App_ = observer(({items}) => {
  return(
     <div>
       <ListGroup items={items} />
       <button
         className="btn btn-sm"
         onClick={(e) => {
           console.log(items[items.length - 1].value)
           items.addItem(30)
         }}
       >
         Add
       </button>
     </div>
  )
})

class Store {
  @observable items = []
}

const store = new Store()
store.items[0] = {text: 10, value: 20}

const items = observable([
  {text: "Item 1", value: 10},
  {text: "Item 2", value: 20}
])


@observer
class App extends Component {
  addToDo(){
    this.props.items.push({text: 20, value: 40})
  }
  render(){
    const items = this.props.items
    return(
       <div>
         <ListGroup items={items} />
         <button
           className="btn btn-sm"
           onClick={this.addToDo} 
         >
           Add
         </button>
     	</div>
    )
  }
}


render(
  <App items={items} />,
  document.getElementById("app")
)