-_-#【React】

React Native
用于构建用户界面的JAVASCRIPT库 | React
React 入门实例教程
 颠覆式前端UI开发框架：React
zhihu1
zhihu2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
        /** @jsx React.DOM */

        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({
            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(<ProductCategoryRow category={product.category} key={product.category} />);
                    }
                    rows.push(<ProductRow product={product} key={product.name} />);
                    lastCategory = product.category;
                }.bind(this));
                return (
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>{rows}</tbody>
                    </table>
                );
            }
        });

        var SearchBar = React.createClass({
            handleChange: function() {
                this.props.onUserInput(
                    this.refs.filterTextInput.getDOMNode().value,
                    this.refs.inStockOnlyInput.getDOMNode().checked
                );
            },
            render: function() {
                return (
                    <form>
                        <input
                            type="text"
                            placeholder="Search..."
                            value={this.props.filterText}
                            ref="filterTextInput"
                            onChange={this.handleChange}
                        />
                        <p>
                            <input
                                type="checkbox"
                                value={this.props.inStockOnly}
                                ref="inStockOnlyInput"
                                onChange={this.handleChange}
                            />
                            Only show products in stock
                        </p>
                    </form>
                );
            }
        });

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

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

            render: function() {
                return (
                    <div>
                        <SearchBar
                            filterText={this.state.filterText}
                            inStockOnly={this.state.inStockOnly}
                            onUserInput={this.handleUserInput}
                        />
                        <ProductTable
                            products={this.props.products}
                            filterText={this.state.filterText}
                            inStockOnly={this.state.inStockOnly}
                        />
                    </div>
                );
            }
        });


        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.renderComponent(<FilterableProductTable products={PRODUCTS} />, document.body);
    </script>
</body>
</html>

相关阅读:
systick运用
 stm32的systick原理与应用
 PID算法知识点博文收藏记录
 关于STM32驱动DS1302实时时钟的一点思考
 什么是同步？什么是互斥？
C语言小笔记（1）
typedef 复杂函数指针
 获取窗口句柄
 GetWindowRect和GetClientRect的区别详解
 RepositionBars的用法和参数的意义（引用别人的）
原文地址：https://www.cnblogs.com/jzm17173/p/4182365.html