React.js

Functional Reactive Programing

https://qiita.com/M-ISO
https://github.com/kenmori

/** @jsx React.DOM */

var ProductCategoryRow = React.createClass({
render: function() {
return (

{this.props.category}

);
}
});

var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :

{this.props.product.name}
;
return (

{name} {this.props.product.price}

);
}
});

var ProductTable = React.createClass({
render: function() {
console.log(this.props);
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push();
}
rows.push();
lastCategory = product.category;
}.bind(this));
return (

{rows}
Name Price

);
}
});

var SearchBar = React.createClass({
handleChange: function() {
this.props.onUserInput(
this.refs.filterTextInput.getDOMNode().value,
this.refs.inStockOnlyInput.getDOMNode().checked
);
},
render: function() {
return (


{' '}
Only show products in stock

);
}
});

var FilterableProductTable = React.createClass({
getInitialState: function() {
return {
filterText: '',
inStockOnly: false
};
},

handleUserInput: function(filterText, inStockOnly) {
this.setState({
filterText: filterText,
inStockOnly: inStockOnly
});
},

render: function() {
return (


);
}
});

var PRODUCTS = [
{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'}
];

React.render(, document.body);