React入门1
<!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的更多相关文章
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门（2）
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门（4）
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- OC加强-day04
#pragma mark 00知识回顾 //定义一个函数 函数没有返回值函数有一个参数:返回值是double 参数是两个int的block void test(int a); void test(do ...
- ios 相册相关
1.ALAssetsLibrary 系统中的资源库,可以使用他来访问资源库中的资源,照片.视屏等. [ALAssetsLibrary authorizationStatus];获取当前应用能否 ...
- C++类继承内存布局（二）
转自:http://blog.csdn.net/jiangyi711/article/details/4890889# (二 )成员变量 前面介绍完了类布局,接下来考虑不同的继承方式下,访问成员变量的 ...
- Redis 3.0.2集群搭建以及相关问题汇总
Redis3 正式支持了 cluster,是为了解决构建redis集群时的诸多不便 (1)像操作单个redis一样操作key,不用操心key在哪个节点上(2)在线动态添加.删除redis节点,不用停止 ...
- 如何设置 font-family 比较好以及字体的中英文名
如何设置 font-family 比较好? 如果设置为font-family: Arial, "微软雅黑","宋体"; 是不是英文都会使用Arial字体,而中文 ...
- find命令使用， -exec xargs
find [path] [expression] 例如:find /home -name \*.o -exec rm '{}' \; find: 实时精确,支持众多查找标准,遍历指定目录中 ...
- php 接口 implements 使用
主要对类名,类所拥有的方法,以及所传参数起约束和规范做用,感觉跟php abstract 抽象类又有点像. 一,接口的定义和调用 <?php interface face1 { const pa ...
- python从socket做个websocket的聊天室server
下面的是server端:把IP改成自己的局域网IP: #coding:utf8 import socket,select import SocketServer import hashlib,base ...
- QTcpsocket 实现FTP
http://blog.163.com/modingfa_002/blog/static/1109254662013111510358109/ http://baike.baidu.com/link? ...
- Python正则表达式学习
1.Python的正则表达式需要用到re模块,有两个方法:match和search,match从第一个字符串开始匹配,search从任意字符串开始匹配,所以match比search严格. 如果匹配成功 ...