(function() {

  var ScrollDown = React.createClass({
    getInitialState: function() {
      return { from: 0, length: 10 };
    },
    render: function() {
      var up = this.state.from;
      var to = this.state.from + this.state.length;
      return React.DOM.ul(null, _.range(up, to).map(function(i) {
        return React.DOM.li({ className: 'item', onClick: _.bind(this.onClick, this) }, 'item' + i);
      }, this));
    },
    onClick: function() {
      this.setState({ from: this.state.from + 1 });
    }
  });

  document.addEventListener('DOMContentLoaded', function() {
    React.renderComponent(ScrollDown(), document.getElementById('main'));
    new Mickey(document.getElementById('main')).init();
  });

})();

@@ -3,19 +3,236 @@
 unction(
-) %7B
+React, Mickey) %7B%0A%0A  var d = React.DOM;%0A  var mouse;%0A%0A  var App = React.createClass(%7B%0A    render: function() %7B%0A      return d.div(null, %5B%0A        d.h1(null, %22foo%22),%0A        ScrollDown(%7B length: 15 %7D)%0A      %5D);%0A    %7D%0A  %7D);
 %0A%0A  var 
@@ -324,20 +324,8 @@
 m: 0
-, length: 10
  %7D;%0A
@@ -430,44 +430,247 @@
 his.
-state.length;%0A      return React.DOM
+props.length;%0A      var range = _.range(up, to);%0A      return d.div(%7B %22data-nav-area%22: %22.item,#go-up,#go-down%22 %7D, _.flatten(%5B%0A        d.p(%7B id: %22go-up%22, %22data-nav-limit%22: %22top%22, onClick: _.bind(this.scroll, this, -1) %7D, %22go up%22),%0A        d
 .ul(
@@ -681,87 +681,149 @@
 , _.
+map(
 range
-(up, to).map(function(i) %7B%0A        return React.DOM.li(%7B className: 'item'
+, function(i) %7B return d.li(%7B className: 'item', key: i %7D, 'item' + i); %7D)),%0A        d.p(%7B id: %22go-down%22, %22data-nav-limit%22: %22bottom%22
 , on
@@ -845,52 +845,48 @@
 his.
-onClick
+scroll
 , this
+, +1
 ) %7D, 
-'item' + i);%0A      %7D, this
+%22go down%22),%0A      %5D
 ));%0A
@@ -896,23 +896,22 @@
  %7D,%0A    
-onClick
+scroll
 : functi
@@ -905,32 +905,35 @@
 croll: function(
+dir
 ) %7B%0A      this.s
@@ -970,11 +970,86 @@
 m + 
-1 %7D
+(dir %7C%7C 1) %7D);%0A    %7D,%0A    componentDidUpdate: function() %7B%0A      mouse.update(
 );%0A 
@@ -1147,26 +1147,19 @@
 mponent(
-ScrollDown
+App
 (), docu
@@ -1191,16 +1191,24 @@
 '));%0A   
+ mouse =
  new Mic
@@ -1246,27 +1246,76 @@
 in')
-).init();%0A  %7D);%0A%0A%7D)(
+, %7B observer: _.noop %7D).init();%0A  %7D);%0A%0A%7D)(window.React, window.Mickey
 );%0A

improve react example