React Editor X

by ddrraaggaa

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-with-addons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/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;}
.list-group-item{
  border-radius: 0px !important;
}
.progress-custom {
  border-radius: 0px;
  margin-top: 10px;
  margin-bottom: 5px;
  height: 10px;
}
.btn-custom{
  border-radius: 0px;
}
body{
  font-family: "Open Sans";
  font-size: 12px;
}

Babel + JSX

// Rewrite this with Mobx + React
const {render} = ReactDOM

const ProgressBar = (props) => {
  return(
    <div className="progress progress-custom clearfix">
       <div className="progress-bar" role="progressbar"
          style={{width: props.value + "%"}}>
        </div>
    </div>  
  )
}

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>
      <ProgressBar value={props.value} />
    </li>
  )
}

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

let items = [
  {text: "Item 1", value: 30},
  {text: "Item 2", value: 40}
]

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


const App = React.createClass({
  getInitialState(){
    return {items: makeData()}
  },
  render(){
    return(
      <div>
        <ListGroup items={this.state.items} />
        <button className='btn btn-xs btn-primary btn-custom'
          onClick = {(e) => this.setState({items: makeData()})}>
          Update
        </button>
      </div>
    )
  }
})

render(
  <App />,
  document.getElementById("app")
)