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. TS格式解析

    1.TS格式介绍 TS:全称为MPEG2-TS.TS即"Transport Stream"的缩写.它是分包发送的,每一个包长为188字节(还有192和204个字节的包).包的结构为 ...

  2. win向linux传文件

    使用pscp.exe即可. 下载pscp.exe(http://pan.baidu.com/s/1jG6zmx4) 复制到windows/system32目录下即可. 然后可在cmd命令行下使用psc ...

  3. C++ -windows与unix路径分隔符

    文件路径中通常使用正斜杠和反斜杠 在Windows中 C++中“\\”是一种转义字符,他表示一个‘\’,就像\n表示回车一样.所以C++中的路径名: D:\matcom45\doc\users\_th ...

  4. oracle输出多行多列数据

    --方法一  匿名块中直接 dbms_output输出declare  v_sql    varchar2(200);  v_cursor sys_refcursor;  type v_type is ...

  5. transfrom属性

    transfrom可以实现一些形变.常见的有平移.缩放和旋转三种.使用起来很简单: //横纵放大1.3倍 self.imageButton.transform=CGAffineTransformSca ...

  6. C#冒泡排序法程序代码

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...

  7. 02_Jquery_02_元素选择器

    [简述] 元素选择器就是通过元素名来查询元素 $("elementName")这里就可以通过元素名来获取jquery元素了. 但与id选择器不同的是,名称相同的元素有很多,所以获取 ...

  8. Python编写的Linux网络设置脚本，Debian Wheezy上测试通过

    hon编写的Linux网络设置脚本,Debian Wheezy上测试通过       阿里百川梦想创业大赛,500万创投寻找最赞的APP 技术细节参见Linux网络设置高级指南 注意事项参见程序注释 ...

  9. HTML 表单和表格

    1.使用表单标签 网站使用 HTML 表单可与用户进行交互,表单元素是允许用户在表单中输入内容,比如:文本框.文本域.单选框.复选框.下拉列表.按钮等等,表单可以把浏览者输入的数据传送到服务器端,这样 ...

  10. [转]利用maven的surefire插件实现单元测试与集成测试

    原文链接 http://my.oschina.net/dlpinghailinfeng/blog/301136 maven单元测试与集成测试 通过maven的Profile 配置生命周期 通过mave ...