JSFiddle - React, Tailwind, and code Playground

by zpao

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */
var id = 0;
var CountdownView = React.createClass({
    getInitialState: function() { return {id: id++}; },
    interval: function() {
        console.log('timeout', this.state.id, this.getDOMNode().parentNode);
        this.forceUpdate();
    },
    componentDidMount: function() {
        this.timeout = setInterval(this.interval, 1000);
        console.log('didmount');
    },

    componentWillUnmount: function() {
        clearTimeout(this.timeout);
        console.log('unmount');
    },

    render: function() {
        return <div onClick={rerender}>{Date.now()}</div>;
    }
});

function rerender() {
  document.body.innerHTML = '<div id="container' + id +'"></div>';
  console.log(Date.now());
  React.renderComponent(
    <CountdownView key={Date.now()}/>,
    document.getElementById('container' + id)
  );
}

rerender();