助你了解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 ...
随机推荐
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- 【JavaScript】设计模式-module模式及其改进
写在前面 编写易于维护的代码,其中最重要的方面就是能够找到代码中重复出现的主题并优化他们,这也是设计模式最有价值的地方 说到这里...... <head first设计模式>里有一篇文章, ...
- Tree（uva 536）
先声明,我还在学习中,这个题大部分代码借鉴的大佬的,其实这算是比较经典二叉树题了,关键在于递归建树. 代码附上: #include <iostream> #include <cstr ...
- TEXT宏
TEXT宏是windows程序设计中经常遇到的宏,定义在 <winnt.h>中 TCHAR *P = TEXT("this is a const string"); 如 ...
- 【运维】CPU负载
最近对我的本本(4核8线程)用top命令看系统状况出现了CPU利用率超过200%的情况,非常诧异,查了下相关资料,把这个问题弄清楚了.首先来分析下CPU Load load average: 0.09 ...
- .Neter玩转Linux系列之六：Linux下MySQL的安装、配置、使用
一.Linux安装MySQL (1)下载安装包:https://dev.mysql.com/downloads/mysql/ (2)解压并安装 命令:tar zxvf 文件名 解压完成之后,重名一下文 ...
- 如何在maven pom.xml文件中设置Java编译器版本
今天遇到一个问题: 在Eclipse中用maven创建一个新的web项目,然后再用maven update一下,则JDK版本自动变为1.5. 通过查找资料,终于发现maven编译器插件(Maven C ...
- linux视频之media媒体框架
linux视频媒体(kernel层分析)主要包括三个文件: (/drivers/media/media-device.c , /drivers/media/media-devnode.c , /dr ...
- AMD、CMD、CommonJs规范
AMD.CMD.CommonJs规范 将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS.AMD和CMD.接下来我们看一下这几种规范. 一.模块化规范 C ...
- Ubuntu16.04 install OpenJDK8
1.按Ctrl + Alt + T打开终端.打开后,运行下面的命令来添加PPA:sudo add-apt-repository ppa:openjdk-r/ppa2.之后,更新系统包缓存并安装Open ...