React Base Fiddle (JSX)

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

by krisselden

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.fade-enter {
    opacity: 0.01;
    transition: opacity .5s ease-in;
}
.fade-enter.fade-enter-active {
    opacity: 1;
}

JavaScript 1.7

var App = React.createClass({
    render: function () {
        var block = function (model, i) {
          return <li key={model.name}>{i} {model.name}</li > ;
        };
        return <ul>{this.props.model.map(block)}</ul>
    }
});

var people = [{name: 'foo'}, {name: 'bar'}];

var app = React.render(<App model={people}/>
,document.getElementById('container'));

setTimeout(function () {
  //people = people.concat([{name:'baz'}]);
  people.push({name:'baz'});
  app.setProps({model:people});
}, 1000);