JSFiddle - React, Tailwind, and code Playground

by Florian

HTML

<script src="http://fb.me/react-0.5.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.5.0.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">
<script src="//fb.me/react-js-fiddle-integration.js"></script>
<script src="https://rawgit.com/spoike/refluxjs/master/dist/reflux.min.js"></script>

CSS

body {
    padding: 20px;
}

JavaScript 1.7

/** @jsx React.DOM */
var ProductStore = Reflux.createStore({
getInitialState: function() {
       return [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

 }
});
console.log(Reflux.connect(ProductStore));
var App = React.createClass({                                                                        
    componentDidUpdate: function() {
        console.log("componentDidUpdate");
    },
    componentWillUpdate: function() {
        console.log("componentWillUpdate");
    },
    render: function() {
        return (
            <FilterableProductTable />
           );
    }
});

var ProductCategoryRow = React.createClass({
    render: function() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
    }
});

var ProductRow = React.createClass({
    render: function() {
        var name = this.props.product.stocked ?
            this.props.product.name :
            <span style={{color: 'red'}}>
                {this.props.product.name}
            </span>;
        return (
            <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
            </tr>
        );
    }
});

var ProductTable = React.createClass({
    mixins: [Reflux.connect(ProductStore,"products")],
    render: function() {
        console.log("ProductTable::render");
        var rows = [];
        var lastCategory = null;
        this.state.products.forEach(function(product) {
            if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
       ...