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 ...
随机推荐
- 使用Java类加载SpringBoot、SpringCloud配置文件
我们都知道平常在使用SpringBoot和SpringCloud的时候,如果需要加载一两个配置文件的话我们通常使用@Value("${属性名称}")注解去加载.但是如果配置文件属性 ...
- Python学习笔记【第四篇】：基本数据类型
变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...
- [Swift]错误提示：Method does not override any method from its superclass
问题原因:方法名称书写错误! ViewController 生命周期 // 加载视图时会调用该方法 override func loadView() { super.loadView() print( ...
- centos6安装cas5
cas是Central Authentication Service的缩写,中文为中央认证服务,在这里我就不说理论了,在公司里项目研发需要cas平台,所以经过两天研究,搞了一个简化版的cas服务,有不 ...
- 神经网络架构PYTORCH－几个概念
使用Pytorch之前,有几个概念需要弄清楚． 什么是Tensors(张量)? 这个概念刚出来的时候,物理科班出身的我都感觉有点愣住了,好久没有接触过物理学的概念了． 这个概念,在物理学中怎么解释呢? ...
- 本地语音识别开源软件pocketsphinx调试总结
1问题一: fatal error: pocketsphinx.h: No such file or directory 解决方法: $ cd /usr/include $ sudo ln -s /m ...
- 一文了解Python中的循环（for while break continue 嵌套循环...）
循环 目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 —— 从上向下,顺序执行 ...
- 关于DB Link
概述 DB Link是一个定义了本地数据库到远程数据库路径的对象,是schema object,它是单向连接 通过DB Link可查询remote数据库的对象及运行其程序 在分布式环境里,DB Lin ...
- 如何开会——高效会议八项原则
引子 今天看到一段有趣的话,忍不住记录下来吧! 1. 任何事情只要能开会解决的,一定要开会解决,这多威风,多热闹啊. 2. 会前千万不要准备什么议程,这样开会就会惊喜多多,会议一定低效. 3. 会前千 ...
- Http状态信息
一.HTTP协议1.简介:http超文本传输协议,基于请求与响应模式的,无状态的,应用层的协议.绝大读书的web开发都是建立在http协议之上的.2.http工作过程:当请求一个超链接时,http就开 ...