React Editor X2

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} = 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>
  )
}
function seq(N){
  var result = [];
  for (var i = 1; i != N; ++i) result.push(i)
  return result
}



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


const App = observer((props) => {
  console.log(props.state.N)
  return(
     <div>
       <ListGroup items={props.state.items} />
       <div className='btn-group'>
       <button 
          className='btn btn-xs btn-primary btn-custom'
          onClick={(e) => {props.state.N += 1}}
       >
         Add
       </button>
       <button 
          className='btn btn-xs btn-primary btn-custom'
          onClick={(e) => {props.state.N -= 1}}
       >
         Delete
       </button>
     </div>
  )
})

let state = observable({
  N: 3,
  items: function(){return makeData(this.N)}
})


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

/*
let temp = observable({})
mobx.extendObservable(temp, {
    firstName: "Ram",
    lastName: "Vaid"
});

console.log(temp)

class Todo {
    id = Math.random();
    @observable title;
    @observable finished = false;
    constructor(title) {
        this.title = title;
    }
}

class TodoList {
    @observable todos = [];
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
}

@observer
class TodoListView extends...