JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var SearchBox = React.createClass({
        getInitialState: function () {
            return {
                query: this.props.query
            };
        },

        componentWillMount: function() {
           this.handleSearchDebounced = debounce(function () {
             this.props.handleSearch.apply(this, [this.state.query]);
           }, 500);
        },
    
        onChange: function () {
          this.setState({query: this.refs.searchBox.getDOMNode().value});
          this.handleSearchDebounced();
        },
    
        render: function () {
          return (
            <input type="search"
                   ref="searchBox"
                   value={this.state.query}
                   onChange={this.onChange} />
          );
        }
    });
    
    
    var Search = React.createClass({
        getInitialState: function () {
            return {
                result: this.props.query
            };
        },
    
        handleSearch: function (query) {
            this.setState({result: query});
        },
    
        render: function () {
          return (
            <div id="search">
              <SearchBox query={this.state.result}
                         handleSearch={this.handleSearch} />
              <p>You searched for: <strong>{this.state.result}</strong></p>
            </div>
          );
        }
    });
    
    React.render(<Search query="Initial query" />, document.body);

    
function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}