React Base Fiddle (JSX, latest)

Starting point for creating JSFiddles with React. This uses React with Addons and the latest build from the master branch)

HTML

<script src="http://react.zpao.com/builds/master/latest/react-with-addons.js"></script>
<script src="http://react.zpao.com/builds/master/latest/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="http://react.zpao.com/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855,...

JavaScript 1.7

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var TodoList = React.createClass({
  getInitialState: function() {
      var todos = [  {text: "Init Todo1"}  ,  {text: "Init Todo2"}   ];
      return {todos: todos}; 
  },
  
  add: function() {
      var todos = this.state.todos;
      todos.push({text: "New!"});
      this.setState({todos: todos});
  },
  remove: function() {
      var todos = this.state.todos;
      todos.pop();
      this.setState({todos: todos});
  },
  
  render: function() {
    var todos = this.state.todos.map(function(todo, index) {
      return <Todo key={index} todo={todo}/>
    });
    return (
        <div>
            <div onClick={this.add}>Add</div>
            <div onClick={this.remove}>Remove</div>
            <br/>
            <div>
                <ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>
                    {todos}
                </ReactCSSTransitionGroup>
            </div>
        </div>
    );
  }
});

var Todo = React.createClass({
  render: function() {
    return <div>{this.props.todo.text}</div>;
  }
});
React.render(<TodoList />, document.body);
 
React.render(
	<TodoList />,
    document.getElementById('container')
);