Bar Chart (Mobx + React)

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mobx/2.4.3/mobx.umd.min.js"></script>
<script src="//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="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css">
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.progress-custom{
  margin-top: 10px;
  margin-bottom: 0px;
}

Babel + JSX

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

class Store {
  @observable text="Ramnath"
}

const ProgressBar = (props) => {
  return (
    <div className="progress progress-custom">
      <div className="progress-bar" role="progressbar" 
        aria-valuenow={props.value}
        aria-valuemin="0" 
        aria-valuemax="100" 
        style={{width: props.value + "%"}}>
        <span className="sr-only">10% Complete</span>
      </div>
    </div>
  )
}

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

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


const makeData = () => {
  return (
    [0, 1, 2, 3, 4].map((d, i) => {
      return {
        text: `Item ${d}`, 
        key: i, 
        value: Math.round(Math.random()*100)
      }
    })
  )
}
 
const data = makeData()

@observer
class App extends Component {
  render(){
    return (
      <div>
      	<ListGroup data={data} />
        <button className='btn btn-sm btn-primary'
          onClick={() => console.log("clicked")}
        >
          Update
        </button>
      </div>
    )
  }
}

const store = new Store()
render(
  <App store={ store } />,
  document.querySelector("#app")
)

const changeText = () => {
  store.text = "Jane Doe"
}

setTimeout(changeText, 1000)