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://raw.githubusercontent.com/ghosthoughts/react-cdn/master/ReactRouter.js"></script>
<script src="https://raw.githubusercontent.com/ghosthoughts/react-cdn/master/History.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id='content'> </div>

CSS

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

.fade {
    opacity: 0;
}

JavaScript 1.7

var ReactTransitionGroup = React.addons.TransitionGroup;
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var Redirect = ReactRouter.Redirect;


var App = React.createClass({
    render: function() {
        var key = this.props.location.pathname;
        return (
            <div>
                <h1> App </h1>
                <Link to='/hello'> Hello </Link>
                &nbsp;
                <Link to='/world'> World </Link>
                <ReactTransitionGroup component='div'>
                    {React.cloneElement(this.props.children || <div />, { key: key })}
                </ReactTransitionGroup>
            </div>
        )
    }
});


var Hello = React.createClass({
    componentWillLeave: function(callback) {
        console.log('Hello will leave');
        React.findDOMNode(this.refs.header).className += ' fade';
        setTimeout(callback, 1000);
    },
    render: function() {
        return (
            <div>
                <h1 ref='header' className='fadable'> Hello </h1>
            </div>
        )
    }
});

var World = React.createClass({
    componentWillEnter: function(callback) {
        console.log('World will enter');
        callback();
    },
    render: function() {
        return (
            <div>
                <h1> World </h1>
            </div>
        )
    }
});


React.render((
    <Router>
        <Route path='/' component={App}>
            <Route path='hello' component={Hello} />
            <Route path='world' component={World} />
        </Route>
    </Router>
), document.getElementById('content'));