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. C++ -windows与unix路径分隔符

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

  2. 享元模式（咖啡屋）【java与模式】

    package com.javapatterns.flyweight.coffeeshop; public class Flavor extends Order { private String fl ...

  3. error signing assembly unknown error

    用VS2010 编译 C#工程,出现 Cryptographic failure while signing assembly 'Assembly.dll' -- 'Unknown error (80 ...

  4. gcc命令以及makefile文件

    (一)makefile里涉及到的gcc命令 gcc -I./inc:指定头文件寻找目录 将按照 ./inc --> /usr/include --> /usr/local/include的 ...

  5. IOS 学习笔记 2015-04-15 控制器数据反向传值

    // // FirstViewController.h // 控制器数据传递 // // Created by wangtouwang on 15/4/15. // Copyright (c) 201 ...

  6. ceph入门学习链接

    https://tobegit3hub1.gitbooks.io/ceph_from_scratch/content/introduction/component.html

  7. Expat Parser解析xml文件

    Expat 解析器是基于事件的解析器. 基于事件的解析器集中在 XML 文档的内容,而不是它们的结构.正因为如此,基于事件的解析器能够比基于树的解析器更快地访问数据. 请看下面的 XML 片段: &l ...

  8. sublimeformaya

      网上没有找到这样的插件自己造了一个 https://github.com/jonntd/connectionmaya   附件列表

  9. C语言-04函数

    1.参数 参数注意点 1.形式参数:定义函数时函数名后面中的参数,简称形参 2.实际参数:调用函数式传入的具体数据,简称实参 3.实参个数必须等于形参个数 4.函数体内部不能定义和形参一样的变量 5. ...

  10. 程序员老鸟写sql语句的经验之谈

    做管理系统的,无论是bs结构的还是cs结构的,都不可避免的涉及到数据库表结构的设计,sql语句的编写等.因此在开发系统的时候,表结构设计是否合理,sql语句是否标准,写出的sql性能是否优化往往会成为 ...