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 ...
随机推荐
- asp.net中Get请求和Post请求
Get和Post请求的区别:Get请求因为传输的数据在URL中,因此不安全,而且多数浏览器有限制其长度,最长为2KB.通过Get请求获取数据的方式:string strName=context.Req ...
- iOS开发——真机调试证书—发布证书
(最近准备考试,空闲整理成博客……)
- 06_WebService与Socket的区别
[区别] 区别1. Socket是基于TCP/IP的传输层协议. WebService是基于HTTP协议传输数据的,HTTP是基于TCP的应用层协议. 区别2. WebService采用了基于HTTP ...
- 14_Xml继承
[工程截图] [Person.java] package com.HigginCui; public class Person { private String name; public String ...
- UVA 11464 Even Parity（部分枚举 递推）
Even Parity We have a grid of size N x N. Each cell of the grid initially contains a zero(0) or a on ...
- bc
调试脚本报错bc: command not found 原因是因为这个linux环境里没有安装计算器工具bc 用 apt-get install bc 或者 yum -y install bc 安装后 ...
- 什么是CGI(Common Gateway Interface)？
参考: 1.Python CGI编程 2.十分钟搞懂CGI 3.CGI Made Really Easy
- linux管道学习（二）
int main() { char* pipename = "pipe"; mkfifo(pipename,); int pid = fork(); ) { printf(&quo ...
- [翻译]ASP.NET Web API的路由
原文:Routing in ASP.NET Web API 在我们新建一个Web API项目时,会在App_Start文件夹下的WebApiConfig.cs中定义一个默认路由: config.Rou ...
- 递归查找某个目录下是否存在NOTICE文件
从Catalogs.txt文件中,读取待检查的目录列表.检查这些目录中,是否存在NOTICE文件,如果没有则检查它的父目录,直到cd ..到Repository目录. 如果cd ..到Reposito ...