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. linux命令打开程序

    evince 打开pdf firefox 打开浏览器

  2. css样式 第6节

    程序员语录: 不要太刻意地把写程序这件事和挣钱挂起来,局限了你挣钱的本事 <html> <head> <title>网页样式</title> </ ...

  3. Hibernate不同DB的日期查询

    Java web项目开发,ORM层用的是Hibernate,用HQL语句查询不同数据库时,日期时间比较还是有所区别的. 1.在Mysql数据库时,是这样写的: 上面是个代码拼串截图,翻译一下是这样的: ...

  4. 【培训】Linux笔记 自学

    1.关机 查看在线用户 who:查看网络联机状态 netstat -a:查看后台执行程序 ps -aux 关机 shutdown -h now.init 0 halt.poweroff 硬件关机 重启 ...

  5. 九度OJ 1452 搬寝室 -- 动态规划

    题目地址:http://ac.jobdu.com/problem.php?pid=1452 题目描述: 搬寝室是很累的,xhd深有体会.时间追述2006年7月9号,那天xhd迫于无奈要从27号楼搬到3 ...

  6. 微软AJAX解决方案

    -------- 微软AJAX解决方案 (*) --------ASP.Net中内置的简化AJAX开发的控件UpdatePanel 放入ScriptManager,将要实现AJAX效果的控件放到Upd ...

  7. 原生js的兼容问题总结

    获取元素的非行间样式 function getStyle(obj, name) { //获取元素的非行间样式 if (obj.currentStyle) { return obj.currentSty ...

  8. Json 数组排序

    /*********************************************Json 数组排序 ******************************************** ...

  9. centos 忘记 root 密码

    采用单用户维护模式可以重设置新密码 系统重启,按任意键进入如下所示的菜单: 选择“kernel /.....”根据提示,按下 "e" 就能进入grup 编辑模式,此时出现的画面类似 ...

  10. Couldn't get lock for %t/vertx.log

    今天在启动vertx框架的项目时,报“Couldn't get lock for %t/vertx.log”的错误. 解决方案: 1,找出vertx.log的目录.一般在(C:\Users\Admin ...