react-boilerplate

// Весь стейт хранится в глобальной переменной. Можно использовать
// какие-нибудь классы, но мне кажется что хороший js-стиль - 
// просто массивы и хэши
function getInitialState(){ return {counter: 0}; }
var AppState = getInitialState();

// Бизнес-логика. Состоит из обычных функций.
// В реальной программе функции засунуты в модули.
function dec(state){
  state.counter--;
}
function inc(state){
  state.counter++;
}

// Хелпер, который берет функцию бизнес логики 
// (которая ничего не знает про реакт и глобальную 
// переменную со стейтом), и возвращает другую функцию, которая
// уже привязана к этой глобальной переменной, и при вызове так же
// вызывает рендер. Эту функцию уже можно сунуть как реакцию на
// какое-то действие пользователя (нажатие на кнопку например)
function makeHandler(fn){
  fn = fn.bind(null, AppState);
  return function(){
    fn.apply(null, arguments);
    render();
  };
}

// Так как эту функцию надо будет часто вызывать, 
// делаю дня нее короткий алиас
var h = makeHandler;

var div = React.createFactory('div');
var button = React.createFactory('button');

var Counter = React.createFactory(function Counter(){
	return div(null,
  	button({onClick: h(dec)}, '-'),
    AppState.counter,
  	button({onClick: h(inc)}, '+')    
  );
});

// Главный рендер, который ререндерит все целиком
function render(){
	ReactDOM.render(Counter(), document.getElementById('container'));
}

// первый рендер
render();