JSFiddle - React, Tailwind, and code Playground

by Thomas Heller

HTML

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

JavaScript 1.7

var state = {};

function stateInit(id) {
  state[id] = "dummy" // something more complex happening here
};

function stateSubscribe(id, channel, callback) {
  if (state[id] == null) {
    console.log("state doesn't exist yet", id);
  }
};

var Inner = React.createClass({
    componentDidMount: function() {
        console.log("inner did mount", this.props);
        stateSubscribe(this.props.con, this.props.channel, function(data) {});
    },
    render: function() {
        return <h1>hello world</h1>;
    }
});

var Outer = React.createClass({
    componentDidMount: function() {
        console.log("outer did mount", this.props);
        stateInit(this.props.con);
    },
    render: function() {
        return React.DOM.div(null,
          Inner({con: this.props.id, channel: "1"}),
          Inner({con: this.props.id, channel: "2"}),
          Inner({con: this.props.id, channel: "3"})
        );
    }
});

React.render(<Outer con="connect-id"/>, document.body);

// see console output