React Base Fiddle (JSX)

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

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 ReactTransitionGroup = React.addons.CSSTransitionGroup;
var AnimatedForEach = React.createClass({
    render: function () {
        return <ReactTransitionGroup component={this.props.is} transitionName="fade">{
            this.props.models.map(this.props.children)
        }</ReactTransitionGroup>;
    }
});

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

var block = function (person, i) {
  return <li key={person.name}>{i} {person.name}</li > ;
};

var list = React.render(
<AnimatedForEach is="ul" models={people}>{block}</AnimatedForEach>
,document.getElementById('container'));

setTimeout(function () {
  people = people.concat([{name:'baz'}]);
  var tmp = people[0];
  people[0] = people[1];
  people[1] = tmp;
  list.setProps({models:people});
},1000);