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. 从Delphi 7升级到Delphi XE

    Delphi 7和XE中间有好几个版本号,可都不太流行,一是由于Delphi有些边缘化,二是7在XP环境下是近乎完美的版本号.市场上关于delphi的书越来越少,提供从7升级到XE介绍的资料差点儿没用 ...

  2. const中的一些tricky的地方

    1. 为了逻辑上的优化需要,const成员函数可能想修改某些成员变量,把这些成员变量定义为mutable可以绕过const的检查 2. 调用const和non-const的参数的函数可以重载 3. s ...

  3. VB 中ListView 某一列的颜色添加不上去的解决方法

    做过VB,对添加某一行中的某一列的背景颜色 ,和文字颜色,来表明某种意义的时候,会有添加不上去的情况 abc = Nothing abc = New ListViewItem.ListViewSubI ...

  4. MD5加密相关

    demo效果

  5. get the text value of a selected option.

    <select id="myselect"> <option value="1">Mr</option> <optio ...

  6. UIView之常用方法

    UIView之常用方法 将一个视图添加为子视图,并使之在最上面显示 -(void)addSubView:(UIView *)view; 将指定子视图移动到顶部 -(void)bringSubViewT ...

  7. SWT/RAP计算器

    /** *2.测试 */ public class NofTest extends AbstractEntryPoint {        Text text,text2;    RemoteObje ...

  8. locate 不能使用

    当需要查找一个文件,只知道文件名不知道路径,我们通常用locate,由于公司的服务器使用最小化安装的所以当locate 文件名,报错,提 示-bash: locate: command not fou ...

  9. Activiti 工作流得到最后一次批注的时间

    我们有时候在工作流开发中可能会遇到这样的需求,就是已经审批结束的流程,可能我们还是仍然需要修改业务表的结果,而且我们需要一个时间期限,比如:在5天内可以进行修改 ,这个时候我们就需要得到我们最后一步审 ...

  10. 字符串截取slice() substring() substr()的区别？

    获取子字符串 slice()        substr()    substring() 不会修改字符串本身,他们只是返回一个基本类型的字符串值 var str='abcdefghijklmn'; ...