React Base Fiddle (JSX)

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

by BinaryMuse

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="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<!-- this html rendred by React.renderToString -->
<div id="container"></div>

JavaScript 1.7

var App = React.createClass({
  getInitialState: function() {
    return {
      active: true
    };
  },
  
  render: function() {
    return (
      <div>
        <button onClick={this.handleToggleClick}>Toggle</button>
        {this.renderInner()}
      </div>
    );
  },
  
  renderInner: function() {
    if (this.state.active) {
      return (
        <StaggerIn delay={100}>
          <div key="one">One</div>
          <div key="two">Two</div>
          <div key="three">Three</div>
          <div key="four">Four</div>
          <div key="five">Five</div>
          <div key="six">Six</div>
          <div key="seven">Seven</div>
        </StaggerIn>
      );
    } else {
      return <StaggerIn delay={100} />;
    }
  },
  
  handleToggleClick: function() {
    this.setState({active: !this.state.active});
  }
});

var StaggerIn = React.createClass({
  render: function() {
    var childCount = React.Children.count(this.props.children);
    var children = React.Children.map(this.props.children, function(child, idx) {
      var inDelay = this.props.delay * idx;
      var outDelay = this.props.delay * (childCount - idx - 1);
      return (
        <StaggeringChild key={child.key}
                         animateInDelay={inDelay}
                         animateOutDelay={outDelay}>
          {child}
       </StaggeringChild>
      );
    }.bind(this));

    return (
      <React.addons.TransitionGroup>
        {children}
      </React.addons.TransitionGroup>
    );
  }
});

var StaggeringChild = React.createClass({
  getDefaultProps: function() {
    return {
      tag: "div"
    };
  },
  
  componentWillAppear: function(callback) {
    this._animateIn(callback);
  },
  
  componentWillEnter: function(callback) {
    this._animateIn(callback);
  },
  
  componentWillLeave: function(callback) {
    this._animateOut(callback);
  },
  
  _animateIn(callback) {
    var el = React.findDOMNode(this);
    TweenLite.set(el, {opacity: 0});
    setTimeout(function() {
     ...