icaromh/app.js

## app.js
// Code goes here

 angular.module('fasterAngular', []).
  controller('mycontroller', ['$scope', function($scope){
      $scope.framework = 'ReactJs';
      $scope.data = {
        cols: [],
        rows: []
      };


      function geraColunas(x){
        var columns = [];

        for (var i = 0; i < x; i++) {
          columns.push({"name":"lorem"});
        };

        return columns;
      }

      function geraLinhas(col, x){
        var rows = [];
        for (var i = 0; i < x; i++) {
          var row = [];
          for (var j = 0; j < col; j++) {
            row.push(Math.random(10));
          }
          rows.push(row);
        }
        return rows;
      }

      $scope.refresh = function(){

        function geraResults(x, y){
          var columns = geraColunas(y);
          var rows    = geraLinhas(y, x);

          $scope.data = {
            "cols": columns,
            "rows": rows
          };

        }

        geraResults(300, 100);

      }
      $scope.refresh();

  }]).directive('fastRepeat', function(){
      return{
          restrict: 'E',
          scope:{
              data: '='
          },
          link:function(scope, el, attrs){
              scope.$watchCollection('data', function(newValue, oldValue){
                  React.renderComponent(
                      MYLIST(newValue),
                      el[0]
                  );
              })
          }
      }
  })

## component.js
var MYLIST = React.createClass({

    render: function render() {
        var _self = this;

        var thead = React.DOM.thead({},
            React.DOM.tr({},
                this.props.cols.map(function (col) {
                    return React.DOM.th({}, col);
            })));

        var tbody = this.props.rows.map(function (row) {
            return React.DOM.tr({},
            _self.props.cols.map(function (col, i) {
                return React.DOM.td({}, row[i] || "");
            }));
        });

        return React.DOM.table({}, [thead, tbody]);
    }

});

## index.html
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="react@*" data-semver="0.10.0" src="http://fb.me/react-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="MYCOMPONENT.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="fasterAngular">
    <h1>Faster Rendering With ReactJs</h1>
    <div ng-controller="mycontroller">
        <button ng-click="refresh()">Refresh Data</button>
        <fast-repeat data="data"></fast-repeat>
    </div>
  </body>
</html>
	// Code goes here

	angular.module('fasterAngular', []).
	controller('mycontroller', ['$scope', function($scope){
	$scope.framework = 'ReactJs';
	$scope.data = {
	cols: [],
	rows: []
	};


	function geraColunas(x){
	var columns = [];

	for (var i = 0; i < x; i++) {
	columns.push({"name":"lorem"});
	};

	return columns;
	}

	function geraLinhas(col, x){
	var rows = [];
	for (var i = 0; i < x; i++) {
	var row = [];
	for (var j = 0; j < col; j++) {
	row.push(Math.random(10));
	}
	rows.push(row);
	}
	return rows;
	}

	$scope.refresh = function(){

	function geraResults(x, y){
	var columns = geraColunas(y);
	var rows = geraLinhas(y, x);

	$scope.data = {
	"cols": columns,
	"rows": rows
	};

	}

	geraResults(300, 100);

	}
	$scope.refresh();

	}]).directive('fastRepeat', function(){
	return{
	restrict: 'E',
	scope:{
	data: '='
	},
	link:function(scope, el, attrs){
	scope.$watchCollection('data', function(newValue, oldValue){
	React.renderComponent(
	MYLIST(newValue),
	el[0]
	);
	})
	}
	}
	})
	var MYLIST = React.createClass({

	render: function render() {
	var _self = this;

	var thead = React.DOM.thead({},
	React.DOM.tr({},
	this.props.cols.map(function (col) {
	return React.DOM.th({}, col);
	})));

	var tbody = this.props.rows.map(function (row) {
	return React.DOM.tr({},
	_self.props.cols.map(function (col, i) {
	return React.DOM.td({}, row[i] \|\| "");
	}));
	});

	return React.DOM.table({}, [thead, tbody]);
	}

	});
	<!DOCTYPE html>
	<html>

	<head>
	<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
	<script data-require="react@*" data-semver="0.10.0" src="http://fb.me/react-0.10.0.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script src="MYCOMPONENT.js"></script>
	<script src="script.js"></script>
	</head>

	<body ng-app="fasterAngular">
	<h1>Faster Rendering With ReactJs</h1>
	<div ng-controller="mycontroller">
	<button ng-click="refresh()">Refresh Data</button>
	<fast-repeat data="data"></fast-repeat>
	</div>
	</body>
	</html>