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. Swift开发之 使用系统的TabbarController

    使用系统的tabbar解决图片的问题. 用sb使用系统的tabbar,弄好后发现图片始终是蓝色的,并非原来的图片,后经上网查资料,问问同事,有了以下的这些代码,做个标记. AppDelegate中 f ...

  2. [转] Git 分支 - 分支的新建与合并

    http://git-scm.com/book/zh/v1/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E6%96%B0%E5%BB%BA%E ...

  3. POJ 2007 Scrambled Polygon 凸包

    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7214   Accepted: 3445 ...

  4. JS HTML 单引号与双引号

    JS中,单引号和双引号其实没啥区别,看你自己习惯了. 但若双引号中再使用双引号,我们可采取"外双内单"或者"外单内双"的格式,当然如果需要的是双引号本身,则只能 ...

  5. oracle 的变量的定义和赋值

    第一种 :先定义后赋值 代码 : declare     V_AgeingType        varchar2(500); begin V_AgeingType :='111'; end 第二种 ...

  6. JS 获取元素的属性值，非内联样式

    //获取样式表的属性值,IE8及以下不兼容 ,方法 window.getComputedStyle(dom对象,"伪类").style属性;   //IE8及以下获取样式表的属性值 ...

  7. 查看library_cache 库缓冲区的命中率

    关于library cache的命中率:    SQL> desc V$librarycache    NAMESPACE                                     ...

  8. C文件函数总结

    1.fopen(打开文件) 表头文件 #include<stdio.h> 定义函数 FILE *fopen(const char * path,const char * mode); pa ...

  9. 仿猪八戒一个提示(jQuery插件) v0.1 beta

    先看下效果 js jQuery.extend({ prompt: function (text, type, times) { var prompt = $(['<div class=" ...

  10. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...