JSFiddle - React, Tailwind, and code Playground

by brico

HTML

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

JavaScript 1.7

/** @jsx React.DOM */
var data = [
  {name: "Steinbeck", title: "Grapes of Wrath"},
  {name: "P.T. Barnum", title: "Circus"}
];

var SearchHeader = React.createClass({
    render: function() {
        return <h1>Search for term {this.props.query}</h1>;
    }
});
var SearchForm = React.createClass({
    render: function () {
        return <form> 
            <input type="text" name="query" placeholder={this.props.query} />
            <input type="submit" value="go" />
        </form>
    }
});
var SearchResults = React.createClass({
    render: function () {
    var items = this.props.data.map(function (item) {
      return <SearchResult name={item.name}/>;
    });
        return <ul>
                {items}
             </ul>
    }
});
var SearchResult = React.createClass({
    render: function () {
        return <li>{this.props.name}</li>
        }
        });
        
var SearchBox = React.createClass({
    render: function () {
        return <div class="box">
            <SearchHeader query={this.props.query} />
            <SearchForm query={this.props.query} />
            <SearchResults data={data}/>
            </div>
        }
    });
    
        
 
React.renderComponent(<SearchBox query="authors"/>, document.body);