JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://fooo.fr/~vjeux/fb/react/build/react.js"></script>
<script src="http://fooo.fr/~vjeux/fb/react/build/JSXTransformer.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var invariant = function(test, error) {
  if (!test) { throw error; }
}

var DOMContainer = React.createClass({

  isNode: function(node) {
    return true;
  },

  getDOMChild: function() {
    var node = this.props.children;
    invariant(this.isNode(node), 'DOMContainer child must be a DOM node.');
    return node;
  },
  
  componentShouldUpdate: function(nextProps, nextState) {
    return this.props.children !== nextProps.children;
  },

  componentDidMount: function() {
    this.getDOMNode().appendChild(this.getDOMChild());
  },

  componentDidUpdate: function() {
    // Clear the previous child and insert the new one instead
    var container = this.getDOMNode();
    container.innerHTML = '';
    container.appendChild(this.getDOMChild());
  },

  render: function() {
    return <span />;
  }

});


var RotateContainers = React.createClass({
    getInitialState: function() {
      var containers = [];
      for (var i = 0; i < 4; ++i) {
        var container = document.createElement('div');
        container.innerText = 'container ' + i;
        containers.push(container);
      }
      var frag = document.createDocumentFragment();
      var text = document.createElement('span');
      text.innerText = 'first';
      frag.appendChild(text);
      text = document.createElement('span');
      text.innerText = ', second';
      frag.appendChild(text);
      
      return {
        containers: containers,
        current: 0
      }
    },
    next: function() {
      this.setState({current: (this.state.current + 1) % 5});
    },
    componentDidMount: function() {
      setInterval(this.next, 500);
    },
    render: function() {
        return <DOMContainer>{this.state.containers[this.state.current]}</DOMContainer>;
    }
});
 
React.renderComponent(<RotateContainers />, document.body);