React Base Fiddle (JSX)

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

by pj_js15

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>

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

CSS

.the-thing {
    margin-top: 2em;
    font-size: 4em;
}

.thing-enter {
  opacity: 0.01;
  transition: opacity 2s ease-in;
}

.thing-enter.thing-enter-active {
  opacity: 1;
}

.thing-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.thing-leave.thing-leave-active {
  opacity: 0.01;
}

JavaScript 1.7

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var TheThing = React.createClass({
	render() {
        var component;
    	if (this.props.visible) {
        	component = <div className="the-thing">The Thing</div>;
        }
        
        return (
	        <ReactCSSTransitionGroup transitionName="thing">
		        {component}
            </ReactCSSTransitionGroup>
        )
    }
});

var Main = React.createClass({
    getInitialState() {
      return {thingIsVisible: false}
    },

	appear(visible) {
    	this.setState({thingIsVisible: visible});	
    },
    
    render: function() {
        return <div>
          <button onClick={this.appear.bind(null, true)}>Appear</button>
          <button onClick={this.appear.bind(null, false)}>Disappear</button>
          <TheThing visible={this.state.thingIsVisible} />
        </div>;
    }
});
 
React.render(<Main />, document.getElementById('container'));