React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by rosenfeld

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<div id="react"></div>
<div id="ko">
  <div data-bind="foreach: data">
    <div data-bind="text: $data"></div>
  </div>
</div>

CSS

#react {background-color: yellow}
#ko {background-color: blue; left: 50px}
#react, #ko {position: absolute; top: 0; width: 40px;}

JavaScript 1.7

console.clear();
var data = [];
for (var i=0; i < 10000; i++) data.push(i);

var Hello = React.createClass({
  render: function() {
    var items = [];
    for (var i = 0; i < data.length; i++) items.push(React.createElement("div", {key: data[i]}, data[i]));
    return React.createElement("div", null, items);
  }
});

console.time('react')
ReactDOM.render(<Hello name="World" />, document.getElementById('react'));
console.timeEnd('react')

var model = { data: ko.observableArray(data.slice()) };
console.time('ko')
ko.applyBindings(model, document.getElementById('ko'));
console.timeEnd('ko')

console.time('react remove');
data.pop();
ReactDOM.render(<Hello name="World" />, document.getElementById('react'));
console.timeEnd('react remove');

console.time('ko remove');
model.data.pop();
console.timeEnd('ko remove');