react-conponent-todo
<!DOCTYPE html>
<html>
<head>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="../../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var TodoList = React.createClass({
render: function() {
var createItem = function(item) {
return <li key={item.id}>{item.text}</li>;
}; return <ul>{this.props.items.map(createItem)}</ul>;
},
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
}, onChange: function(e) {
this.setState({text: e.target.value});
}, handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
}, render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
},
}); ReactDOM.render(<TodoApp />, document.getElementById('example'));
</script>
</body>
</html>
react-conponent-todo的更多相关文章
- react入门:todo应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React半科普文
React半科普文 什么是React getting started 文件分离 Server端编译 定义一个组件 使用property 组件嵌套 组件更新 Virtual DOM react nati ...
- [React] Preventing extra re-rendering with function component by using React.memo and useCallback
Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle i ...
- react相关知识点总结
1 JSX解析的问题 JSX其实是语法糖: 开发环境会将JSX编译成JS代码 react定义的方法,用来解析html,第一个参数是“html元素”,第二个参数是“属性”,第三个参数是其子元素: 所以下 ...
- [React] Always useMemo your context value
Have a similar post about Reac.memo. This blog is the take away from this post. To understand why to ...
- 15个Node.js项目列表
前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- [Redux] Important things in Redux
Root Smart component can be overloaded, divide 'smart' component wisely & using Provider. Proble ...
- jsx的本质
jsx语法 1.所有html标签他都支持 <div></div> 2.大括号里面可以引入js变量 或者 表达式 {name || ''} 3.可以做判 ...
- 3.2 Redux TodoApp
上一节讲完了 redux 中的概念,但是仍然没有和 react 联系起来,这一节将利用 redux 在 react 中实现完整的 todolist: 在 react 使用 redux 通过 Provi ...
随机推荐
- 网络编程懒人入门(六)：深入浅出，全面理解HTTP协议
本文引用了自简书作者“涤生_Woo”的文章,内容有删减,感谢原作者的分享. 1.前言 HTTP(全称超文本传输协议,英文全称HyperText Transfer Protocol)是互联网上应用最为广 ...
- Javascript高级编程学习笔记（55）—— DOM2和DOM3（7）操作范围
操作范围中的内容 在创建范围时,内部会为这个范围创建一个文档片段 范围所属的全部节点都会被添加到这个片段中 虽然选取范围可以不是完整的.良好的DOM结构 但是在这个为范围创建的文档片段中,会自己完缺少 ...
- Javascript高级编程学习笔记（40）—— DOM（6）CDATASection、DocumentType
CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType: ...
- Javascript高级编程学习笔记（39）—— DOM（5）Comment
Comment类型 顾名思义,comment类型指的就是注释节点在HTML文档中的类型 也就是说平时我们在代码中的注释,在HTML解析的时候也会被解析为一类节点 让我们可以根据这些节点进行一系列的操作 ...
- 开源网盘云存储 Seafile
摘要: Seafile 是一款安全.高性能的开源网盘(云存储)软件.Seafile 提供了主流网盘(云盘)产品所具有的功能,包括文件同步.文件共享等.在此基础上,Seafile 还提供了高级的安全保护 ...
- ScrollView嵌套子View的getDrawingCache为空的解决方法
ScrollView嵌套子View的getDrawingCache为空的解决方法 问题 将组件的显示布局改为可以滚动的,然后用ScrollView作为了View的父类,发现View的getDrawin ...
- 第一节：学会Java前提-手把手教你配置JDK环境变量
前言 大家好,今天写一遍学会Java前提-手把手教你配置JDK环境变量的概述,希望你们喜欢 下载地址 下载jdk,和eclipse就比较简单了,提供JDK 9 地址: http://www.oracl ...
- 【面试题】java中高以上必会技能
java基础 1.集合相关 1.1 java中常见的集合 答:Arraylist,LinkedList,ListedList,HashMap,HashSet. 1.2 arraylist和linked ...
- 【app】Hybrid？Native？不知道你就out了！
Hybrid?是个啥? 相信大家在平常生活中也会经常见到这个词,比如现在比较火的hybrid汽车(混合动力汽车) 那如果是针对于App而言呢? 那就要从App的分类说起了 目前主流应用程序大体分为三类 ...
- .NET MVC扩展UrlHelper支持CDN
0x00.为什么要扩展 因为我的服务器是小水管,加载一个完整的网站往往需要很久,想加速网站加载速度,静态文件最好是分离出来,所有就想到了扩展UrlHelper,用来支持CDN加载文件. 0x01.论引 ...