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 ...
随机推荐
- cognos 10.2.2 搭建网关做负载均衡
最近要设计cognos服务器灾备模式,所以想到了cognos10自带的gateway负载均衡模式,搭建起来还是挺简洁的 设计背景: cognos主服务器:231 cognos灾备服务器:238 gat ...
- 记一次ftp服务器错误 centOS 6.4 vsftpd 500 illegal port command
这个错误是因为是主动模式的,应该改为被动模式 以下是操作过程: iptables中加 -A INPUT -p tcp -m state --state NEW -m tcp --dport 10221 ...
- DAG模型——嵌套矩阵
有向无环图上的动态规划是学习动态规划的基础,很多问题都可以转化为DAG上的最长路.最短路或路径计数问题. 嵌套矩阵 有n个矩阵,每个矩阵可以用两个整数a,b描述,表示它的长和宽.矩阵X(a,b)可以嵌 ...
- 管理员把我的admin权限去掉了，那么如何获得jdk zip安装呢？这篇可以帮你。
JDK is not available as a portable zip unfortunately. However, you can: Create working JDK directory ...
- 【转】PHP网站常见安全漏洞，及相应防范措施总结
---恢复内容开始--- 目前,基于PHP的网站开发已经成为目前网站开发的主流,本文笔者重点从PHP网站攻击与安全防范方面进行探究,旨在减少网站漏洞,希望对大家有所帮助! 一.常见PHP网站安全漏洞 ...
- mysql 主从 Got fatal error 1236 from master when reading data from binary log: 'Could not find first 错误
本地MySQL环境,是两台MySQL做M-M复制.今天发现错误信息: mysql 5.5.28-log> show slave status\G ************************ ...
- get share button count
class shareCount { private $url,$timeout; function __construct($url,$timeout=10) { $this->url=raw ...
- Linux网络应用编程之交换机概述
Packet Tracer入门 一,交换机概况 交换机工作在OSI(开放系统互联参考模型)数据链路层,接入交换机的任意两个网络节点(网络设备)都是独享带宽的. 二,交换机原理 交换机拥有一条很高带宽的 ...
- 面试题：m个长度为n的ordered array，求top k 个 数字
package com.sinaWeibo.interview; import java.util.Comparator; import java.util.Iterator; import java ...
- 将页面中指定表格的数据导入到Excel中
function AutoExcel(){ var oXL = new ActiveXObject("Excel.Application"); //创建应该对象 var o ...