JSFiddle - React, Tailwind, and code Playground

by index

HTML

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <div id="render-here"></div>

    <script type="text/jsx">
      var Parent = React.createClass({
        getInitialState: function () {
          return { 
            showPreference: false,
            childComponents: 0
          };
        },
        shouldComponentUpdate: function() {
          console.log('parent should update');
          return true;
        },
        _click: function() {
          this.setState({childComponents: this.state.childComponents + 1});
        },
        _showPreference: function() {
          this.setState({showPreference: true})
        },
        _hidePreference: function() {
          this.setState({showPreference: false})
        },
        render: function() {
          var childComponents = [];

          _.times(this.state.childComponents, function(n) {
            if (n % 2)
              childComponents.push(<Child key={'foobar'+n} showPreference={this._showPreference} />)
            else
              childComponents.push(<Child2 key={'foobar'+n} showPreference={this._showPreference} />)
          }.bind(this));

          return(
            <div style={{height:'100%', width:'100%', border:'1px solid blue'}} onClick={this._hidePreference}>
              {this.state.showPreference ? <Preference /> : null}
              <div onClick={this._click}>Add components</div>
              {childComponents}
            </div>
          )
        }
      });

      var Preference = React.createClass({
        shouldComponentUpdate: function() {
          console.log('preference should update');
          return true;
    ...