助你了解react的小demo
React是个啥
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React-Template</title>
<link rel="stylesheet" href="../css/main.css">
<script src="../js/react.min.js"></script>
<script src="../js/react-dom.min.js"></script>
<script src="../js/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel"> var Board = React.createClass({ getInitialState :function(){
return ({
comments:["Hello Everybody","Hello Everybody","Welcome to Jredu","这是一个react小项目"]
});
},
updateComment: function(newText,i){
// console.log(newText);
var arr=this.state.comments;
arr[i] = newText;
this.setState({comments : arr});
},
removeComment: function(i){
var arr = this.state.comments;
arr.splice(i,1);
this.setState({comments : arr});
},
add:function(text){
var arr = this.state.comments;
arr.push(text);
//更新我们的状态
this.setState({comments : arr});
},
eachComment:function(text,i){
return(
<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>{text}</Comment>
);
}, render : function(){
return (
<div>
<button onClick={this.add.bind(null,"文本对象")} className="button-info create">Add New</button>
<div className = "board">
{
this.state.comments.map(this.eachComment)
}
</div>
</div>
);
}
}); var Comment = React.createClass({
getInitialState : function(){
return ({
editing:false
});
},
edit: function(){
// alert("Editing comment");
this.setState({editing:true});
},
save:function(){
var val = this.refs.newText.value;
// console.log("拿到的值"+val);
this.props.updateCommentText(val,this.props.index);
this.setState({editing:false});
},
remove: function(){
// alert("removing comment!");
this.props.deleteFromBoard(this.props.index);
}, renderNoraml: function(){
return (
<div className="commentContainer">
<div>{this.props.children}</div>
<button onClick={this.edit} className="button-primary">edit</button>
<button onClick={this.remove} className="button-danger">remove</button>
</div>
);
},
renderForm: function(){
return (
<div className="commentContainer">
<textarea ref="newText" defaultValue={this.props.children}></textarea>
<button onClick={this.save} className="button-success">save</button>
</div>
);
},
render:function(){ if (this.state.editing) {
return this.renderForm();
} else{
return this.renderNoraml();
}
}
}); ReactDOM.render(
<Board />,
document.getElementById('container')
);
</script>
</body>
</html>
)
显示效果
助你了解react的小demo的更多相关文章
- React问答小demo
在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...
- MobX+react使用小demo
第一次接触mobx,网上找了很多例子,写此主要总结一下create-react-app + mobx入门 create-react-app myreact cd myreact npm install ...
- 学习react，动手实现一个小demo（仿知乎问答）
学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...
- React Native八大Demo
参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水. ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- Nancy之基于Nancy.Hosting.Self的小Demo
继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- Nancy之基于Self Hosting的补充小Demo
前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...
随机推荐
- MVC查询数据接收及校验
本来想写一篇aspx的TreeView控件绑值的文章的,在写案例的时候,写了一半,发现有些地方还得考虑以下,就留待下次了. 这一篇的话,是最近在开发一个项目的时候,有大量的页面和数据表,需要花式查询, ...
- PHP防SQL注入攻击
PHP防SQL注入攻击 收藏 没有太多的过滤,主要是针对php和mysql的组合. 一般性的防注入,只要使用php的 addslashes 函数就可以了. 以下是一段copy来的代码: PHP代码 $ ...
- html5新特性与HTML的区别
* HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localSt ...
- SSM之框架整合
前言 SSM框架,即Spring + Spring MVC + MyBatis的整合框架集,是继SSH后比较主流的Java EE企业级框架,采用标准的MVC模式,项目结构与微软的ASP.NET MVC ...
- HCatalog
HCatalog HCatalog是Hadoop中的表和存储管理层,能够支持用户用不同的工具(Pig.MapReduce)更容易地表格化读写数据. HCatalog从Apache孵化器毕业,并于201 ...
- MySQL show status 参数详解
状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...
- C语言程序设计第一作业
C语言程序设计第一作业 实验总结 (一) 1.题目:输入圆的半径,求圆周长和面积 2.流程图: 3.测试数据及运行结果: 4.实验分析: 问题1: 出现了错误 原因:是在赋值那写反了 解决方法:应该是 ...
- Java面向对象 正则表达式
Java面向对象 正则表达式 知识概要: (1)正则表达式的特点 (2)正则表达的匹配 (3)正则表达式的切割,替换,获取 (4)正则表达式的练习 正则表达式:符合 ...
- iOS的异步绘制--YYAsyncLayer源码分析
iOS的异步渲染 最近看了YYAsyncLayer在这里总结一下.YYAsyncLayer是整个YYKit异步渲染的基础.整个项目的Github地址在这里.你可以先下载了一睹为快,也可以跟着我一步一步 ...
- EasyUI Tree 树 ——实现多级别菜单的展示，以及与后台数据的交互
一 要引入的js css库 <link type="text/css" href="css/base.css" rel="stylesheet& ...