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. eclipse+axis2+webservice开发实例

    myeclipse10安装axis2插件 第一步:下载axis2-1.6的插件压缩包,axis2-eclipse-codegen-plugin-1.6.2.zip 和 axis2-eclipse-se ...

  2. linux sysvinit与upstart [转]

    linux sysvinit与upstart(1) linux sysvinit与upstart(2) linux sysvinit与upstart(3)

  3. 【转】iOS中流(Stream)的使用

    转自:http://southpeak.github.io/blog/2014/07/17/ioszhong-liu-stream-de-shi-yong/流提供了一种简单的方式在不同和介质中交换数据 ...

  4. 新版本ButterKnife的配置

    新版本的ButterKnife的添加方式发生了变化,然后摸索着记录了一下. 按照ButterKnife的官网描述,使用ButterKnife需要在Gradle中添加如下依赖: compile 'com ...

  5. Android应用程序开发之图片操作（一）——Bitmap，surfaceview，imageview，Canvas

    Android应用程序开发之图片操作(一)——Bitmap,surfaceview,imageview,Canvas   1,Bitmap对象的获取 首先说一下Bitmap,Bitmap是Androi ...

  6. Android MediaCodec 使用例子

    Android MediaCodec 使用例子 下面的例子是使用MediaCodec 录制到文件的例子. 1 public class AvcEncoder { private MediaCodec ...

  7. jQuery 表单验证插件——Validation(基础)

    这个插件不错,是用jquery写的.能进行表单验证.我喜欢它的原因是因为 1.他有自带的验证规则 2.你可以自己写验证规则 3.可以通过ajax与后台交互,与后台数据比较.最后返回结果!我在表单中要验 ...

  8. 注册表修改IP地址和DNS等信息

    ---------------------win8系统 1. 2. 3. --------------------------------------------------------------- ...

  9. sqlcode、sqlerrm

    Oracle里 非常有用的 两个变量,很少有人用. 标记一下

  10. 01-android快速入门

    adb Android debug bridge 安卓调试桥 创建模拟器,屏幕尽量小些,启动速度运行速度快 Android项目的目录结构 Activity:应用被打开时显示的界面 src:项目代码 R ...