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

React.js编程思想

<!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>

-_-#【React】的更多相关文章

  1. Linu下的Mysql学习详解_【all】

    Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库    2.关系型数据库:mysql(主流用5.5,5.6), oracle        本质:二维表   ...

  2. Mysql 系统学习梳理_【All】

    0.Linux学习---CentOS 7编译安装MySQL 8.0 1.Mysql学习---SQL语言的四大分类 2.Mysql学习---基础操作学习 3.Mysql学习---基础操作学习2 4.My ...

  3. 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  4. 【react】关于react框架使用的一些细节要点的思考

    ( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的)   这篇文章主要是写关于学习react中的一些自己的思考:   1.set ...

  5. 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  6. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  7. 【React】react学习笔记03-React组件对象的三大属性-state

    今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...

  8. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  9. 【React】学习笔记（二）——组件的生命周期、React脚手架使用

    原教程视频:ttps://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.组件的生命周期 1.1.生命周 ...

随机推荐

  1. 小胖学PHP总结1-----PHP的数据类型

    PHP一共支持8种原始类型.包含4中标量类型,即:boolean(布尔型).integer(整形).float/double(浮点型)和string(字符串型):两种复合类型,即:array(数组)和 ...

  2. mysql 加入�列，改动列，删除列。

    MySQL 加入�列,改动列,删除列 ALTER TABLE:加入�,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to ...

  3. url编码解码-js编码、C#编码

    JS编码解码 函数一定义和用法encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 U ...

  4. MyBatis 学习总结（一）

    1.原生JDBC(Java database connectity)操作数据库(以MySQL数据为例)步骤 1.1 加载驱动 Class.forName("com.mysql.jdbc.Dr ...

  5. Lambda表达式 简介 语法 示例

    Lambda 表达式也称为闭包,是匿名类的简短形式.Lambda 表达式简化了[单一抽象方法声明接口]的使用,因此 lambda 表达式也称为功能接口. 在 Java SE 7 中,单一方法接口可使用 ...

  6. 获取外网IP地址

    public static string GetRealIP(){            string result = String.Empty;            result = HttpC ...

  7. EXCEL表格常用函数使用的难点

    1.  INDIRECT(ref_text,逻辑值) 返回由文本字符串指定的引用.此函数立即对引用进行计算,并显示其内容.ref_text,文本引用说明, (1) A1-样式的引用(逻辑值,T,缺省) ...

  8. MVC中给TextBoxFor设置默认值和属性

    例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value=" ...

  9. （转）织梦DedeCMSv5.7安装体验数据包的方法

    1.先安装一个全新的DedeCMS v5.7 GBK系统,这里以DedeCMS v5.7 GBK系统为例. 2.下载数据体验包: 如果是gbk则下载:http://www.dedecms.com/de ...

  10. 如何修改mtk android 默认拍照size

    [DESCRIPTION] 修改默认拍照size [SOLUTION] 修改默认的capture size,改变camera feature table的FID_CAP_SIZE default值不起 ...