r2d2 a new api for defining react components

1.App.js

import Immutable from 'immutable';
import {makeComponent} from 'r2d2';
import TodoList from './TodoList.js';

makeComponent('TodoList')
.state('items', Immutable.List([]))
.render(({state, utils}) => {
  return (
    <div>
      <h1>Todo</h1>
      <TodoList items={state.items} onChange={utils.state.onChange('items')} />
    </div>
  )
})

2.TodoList.js

import {makeComponent} from 'r2d2';
import TodoItem from './TodoItem.js';

const NEW_TODO = Immutable.fromJS({
  text: '',
  done: false,
});

makeComponent('TodoList')
.controlled('items', 'onChange')
.render(({props, utils}) => (
  <div>
    {props.items.map((x, i) => (
      <TodoItem item={x} onChange={utils.controlled.items((items, x) => items.set(i, x))} />
    )).toArray()}
    <button onClick={() => {
      utils.controlled.items((items, x) => items.push(x))(NEW_TODO);
    })>Add Todo</button>
  </div>
);

3.TodoItem.js

import {makeComponent} from 'r2d2';
import TextInput from './TextInput';

export default makeComponent('TodoItem')
.controlled('item', 'onChange')
.render(({props, utils}) => (
  <div>
    <input
      type="checkbox"
      onChange={utils.controlled.item((item) => item.set('done', !item.get('done')))}
    />
    <TextInput
      value={props.item.get('text')}
      onChange={utils.controlled.item((item, text) => item.set('text', text))}
    />
  </div>
);

4.TextInput.js

import {makeComponent} from 'r2d2';

export default makeComponent('TextInput')
.ref('input', ({props}, ref) => {
  if (props.autoSelect) {
    ref.select();
  }
})
.render(({props, utils}) => (
  <input 
    {...props}
    ref={utils.refs('input')}
    value={props.value}
    onChange={(e) => props.onChange(e.currentTarget.value)}
  />
));