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. SpringMVC 学习笔记(一) Hello World

    springMVC概述: Spring MVC 是眼下最主流的MVC 框架之中的一个 Spring MVC 通过一套 MVC 注解.让 POJO 成为处理请 求的控制器,而无须实现不论什么接口. 支持 ...

  2. js事件防止冒泡

    原文连接:http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html 1. 事件目标 如今.事件处理程序中的变量event保存着 ...

  3. PHP安全编程：防止源代码的暴露(转)

    关于包含的一个重要问题是源代码的暴露.产生这个问题主要原因是下面的常见情况: 对包含文件使用.inc的扩展名 包含文件保存在网站主目录下 Apache未设定.inc文件的类型 Apache的默认文件类 ...

  4. 关于Xcode的Other Linker Flags

    背景 在ios开发过程中,有时候会用到第三方的静态库(.a文件),然后导入后发现编译正常但运行时会出现selector not recognized的错误,从而导致app闪退.接着仔细阅读库文件的说明 ...

  5. stl_alloc.h

    /* * Copyright (c) 1996-1997 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...

  6. Badge分析&如何逼死处女座

    Badge分析 所谓Badge,原本是iOS上的一个效果,但是被Android抄的多了,也就成了Android的标配.图就不上了,大家都懂的. 应用icon显示角标实际上是在Launcher中实现的, ...

  7. 网页调用外部APP

    <activity android:name=".MainActivity" android:label="@string/app_name"> & ...

  8. JavaScript Unicode字符操作

    charCodeAt() 方法 定义和用法charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数.方法 charCodeAt() 与 ...

  9. XML样本（格式没区别，但是一个有结果 一个没结果）

    xml样本01<orderlist>        <order>        <orderid>1</orderid>        <ord ...

  10. MySQL被Oracle并购后的409个日日夜夜

    2009年4月20日,Oracle并购了Sun,这也意味着MySQL归属到甲骨文的旗下.四百多天过去了,究竟这场并购结局如何?请看本文. 去年对Sun的收购,让甲骨文顺利的将一个潜在的对手MySQL收 ...