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/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-transition-group@2.0.2/dist/react-transition-group.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

CSS

.fade-enter,
.fade-appear,
.fade-exit {
  transition: all 500ms;
}

.fade-enter,
.fade-appear {
  opacity: 0;
}

.fade-enter-active,
.fade-appear-active {
  opacity: 1
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0
}

JavaScript 1.7

let { CSSTransition, TransitionGroup } = ReactTransitionGroup

class Example extends React.Component {
	constructor(props, context) {
    super(props, context);

    this.count = 0;
    this.state = { items: [] };
  }
	handleAddItem() {
    this.setState(({ items }) => ({
      items: [
        ...items,
        `Item number: ${++this.count}`,
      ],
    }));
  }
  
  handleRemoveItem(item) {
    this.setState(({ items }) => ({
      items: items.filter(i => i !== item),
    }));
  }
  
  render() {
    return (
      <div>
        <button onClick={() => this.handleAddItem()}>
        Add Item
        </button>
        <TransitionGroup>
					{this.state.items.map(item => (
            <CSSTransition key={item} timeout={500} classNames="fade">
            	<div>
                {item}
                <button onClick={() => this.handleRemoveItem(item)}>
                  &times;
                </button>
              </div>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </div>
     );
  }
};

ReactDOM.render(
  <Example />,
  document.getElementById('container')
);