React教程

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div id="content"></div>

    <script src="http://static01.baomihua.com/js/core/jquery-1.8.3.min.js"></script>

    <script src="react.js"></script>

    <script src="JSXTransformer.js"></script>

    <script type="text/jsx">

        var Comment = React.createClass({

            render: function() {

                return (

                    <div className="comment">

                        <h2 className="commentAuthor">

                            {this.props.author}

                        </h2>

                        {this.props.children}

                    </div>

                )

            }

        })

        var CommentList = React.createClass({

            render: function() {

                var commentNodes = this.props.data.map(function(comment) {

                    return (

                        <Comment author={comment.author}>

                            {comment.text}

                        </Comment>

                    )

                })

                return (

                    <div className="commentList">

                        {commentNodes}

                    </div>

                )

            }

        })

        var CommentForm = React.createClass({

            handleSubmit: function(e) {

                e.preventDefault()

                var author = this.refs.author.getDOMNode().value.trim()

                var text = this.refs.text.getDOMNode().value.trim()

                if (!text || !author) {

                    return

                }

                this.props.onCommentSubmit({author: author, text: text})

                this.refs.author.getDOMNode().value = ''

                this.refs.text.getDOMNode().value = ''

                return

            },

            render: function() {

                return (

                    <form className="commentForm" onSubmit={this.handleSubmit}>

                    <input type="text" placeholder="Your name" ref="author" />

                    <input type="text" placeholder="Say something..." ref="text" />

                    <input type="submit" value="Post" />

                    </form>

                )

            }

        })

        var CommentBox = React.createClass({

            loadCommentsFromServer: function() {

                $.ajax({

                    url: this.props.url,

                    dataType: 'json',

                    success: function(data) {

                        this.setState({data: data})

                    }.bind(this),

                    error: function(xhr, status, err) {

                        console.error(this.props.url, status, err.toString())

                    }.bind(this)

                })

            },

            handleCommentSubmit: function(comment) {

                var comments = this.statet.data

                var newComments = comments.concat(comment)

                this.setState({data: newComments})

                // ajax

            },

            getInitialState: function() {

                return {data: []}

            },

            componentDidMount: function() {

                this.loadCommentsFromServer()

                //setInterval(this.loadCommentsFromServer, this.props.pollInterval)

            },

            render: function() {

                return (

                    <div className="commentBox">

                        <h1>Comments</h1>

                        <CommentList data={this.state.data} />

                        <CommentForm  onCommentSubmit={this.handleCommentSubmit} />

                    </div>

                )

            }

        })

        React.render(

            <CommentBox url="comments.json" pollInterval={2000} />,

            document.getElementById('content')

        )

    </script>

</body>

</html>

React入门1的更多相关文章

  1. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  2. react入门（1）

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  3. react入门（2）

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  4. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  5. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  6. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  8. React入门简单实践

    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...

  9. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  10. React入门资源整理

    另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...

随机推荐

  1. YYKit之YYText

    原文:http://www.cnblogs.com/lujianwenance/p/5716804.html   本文的目的是希望能帮助到我们更快的熟悉和学习YYText的结构和实现的思路,如有不正确 ...

  2. 常用数据结构［OpenCV 笔记12］

    Point 二维坐标系下的整数点, 定义如下 typedef Point_<int> Point2i; typedef Point2i Point; typedef Point_<f ...

  3. Python内存管理及引用计数

    作为一门动态语言,python很重要的一个概念就是动态类型,即对象的类型和内存占用都是运行时确定的.(Why?)运行时,解释器会根据语法和右操作数来决定新对象的类型.动态类型的实现,是通过引用和对象的 ...

  4. OpenCV学习目录（持续更新）

    这个暑假开始,需要用到图像处理相关的东西,于是我选择了OpenCV库,这里记录下我的整个学习过程. 参考资料: <OpenCV 2计算机视觉编程手册> 张静 译,科学出版社 1. Linu ...

  5. ajax GET和POST请求web api 的几种方式

    GET请求 1.无参数get请求 一般get请求有两种写法,一种是 $.get()   一种是$.ajax({type:"get"}), 我个人比较喜欢用后者. 下面例子主要是ge ...

  6. sql的连接查询方式

    1 SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完整的结果,我们需要从两个或更多的表中获取结果.我们就需要执行 join. 数据库中 ...

  7. django 自定义标签

    Context和RequestContext都能被Template 进行render RequestContext类接受reqest,字典,processors 实例化.并被TEMPLATE_CONT ...

  8. SQL Server执行计划

    要理解执行计划,怎么也得先理解,那各种各样的名词吧.鉴于自己还不是很了解.本文打算作为只写懂的,不懂的懂了才写. 在开头要先说明,第一次看执行计划要注意,SQL Server的执行计划是从右向左看的. ...

  9. S3C2440触摸屏控制总结

    触摸屏控制原理,其实与ADC读取一个滑动变阻器中间触点电压的原理一样.只不过,读取触摸屏的X.Y方向上的电压需要两次,而且需要设置其工作模式以实现一个ADC读取两个通道的电压. S3C2440的ADC ...

  10. C语言中调用Lua

    C语言和Lua天生有两大隔阂: 一.C语言是静态数据类型,Lua是动态数据类型 二.C语言需要程序员管理内存,Lua自动管理内存 为了跨越世俗走到一起,肯定需要解决方案. 解决第一点看上去比较容易,C ...