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 ...
随机推荐
- Solr搜索引擎入门知识汇总
1.技术选型,为什么用solr而不用lucene,或者其他检索工具 lucene:需要开发者自己维护索引文件,在多机环境中备份同步索引文件很是麻烦 Lucene本质上是搜索库,不是独立的应用程序.而S ...
- Ubuntu双网卡设置内外网上网的问题
UBUNTU16.04系统,双网卡:eth0, eth1.分贝设置成Public IP, 和局域网IP, 这样这台计算机就可以访问局域网内的各个IP, 同时还可以在全球各地被访问,使用ssh or r ...
- 协议—IIC
I2C总线支持任何IC生产过程NMOS CMOS双极性,两线――串行数据 SDA 和串行时钟SCL线在连接到总线的器件间传递信息,每个器件都有一个唯一的地址识别,无论是微控制器.LCD 驱动器.存储器 ...
- Xamarin.Android 隐藏软键盘
引用: using Android.Views.InputMethods; 代码: //隐藏键盘 InputMethodManager imm = (InputMethodManager)GetSys ...
- 8.python面向对象编程
基本概念 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Object 对象 一个对象即是一个类的 ...
- java提高（8）---ArrayList源码
ArrayList源码 一.定义 public class ArrayList<E> extends AbstractList<E> implements List<E& ...
- [Maven]Maven如何得到单独的单元测试报告
----------------------------------------------------------------- 原创博文,如需转载请通知作者并注明出处! 博主:疲惫的豆豆 链接:h ...
- vue的router-link传参问题
一般来说,可以通过查询字符串的方式将参数传过去,方法如下: <router-link :to="{path:'/Detail', query:{ name: id }}"&g ...
- [java]创建一个默认TreeMap() key为什么不能为null
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 先看一下 TreeMap 的 put(K key, V value) public TreeMap() ...
- uml活动图
uml是程序员需要掌握一个重要工具,特别在研究hadoop(http://www.iigrowing.cn/hadoop)系统中,有很多相关的uml图形需要绘制,为了方便大家了解uml,在网络上找了些 ...