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 ...
随机推荐
- 打开Python IDLE时的错误：Subprocess Startup Error
比较常见的是这个 方法1: 修改[Python目录]\Lib\idlelib\PyShell.py文件,在1300行附近,将def main():函数下面 use_subprocess = True ...
- 吴恩达机器学习笔记8-多变量线性回归(Linear Regression with Multiple Variables)--多维特征
我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为(
- Aseprite入门：第一个gif动图
前言:Aseprite入门教程 1.新建图片: 选择新建文件,然后选定宽高和颜色及背景类型,点击OK进行图片的创建: 2.绘制一个基础图形,为了方便还是选用球形: 填充上颜色: 美化(添加阴影增加小球 ...
- iOS学习——更改导航栏的返回按钮的标题与颜色
转载自:修改navigationController返回按钮颜色和文字 今天在做项目时遇到这个问题,试了很多方法都失败了.最后终于找到正确的方案了,在这里分享给大家. 引言 在iOS开发过程中,Nav ...
- mysql 开发基础系列5 运算符
1. 算术运算符 2.比较运算符 注意NULL值不能用= 运算符 SELECT * FROM t WHERE c =NULL; -- 需要改成 SELECT * FROM t WHERE c IS N ...
- 开始翻译Disruptor
刚开始接触Disruptor,看了作者的博客,发现这个大牛很与众不同,他不仅讲解自己的框架的设计思想,还深度介绍了这样设计的原因,其知识范围涵盖了操作系统.数据结构.计算机组成,很有学习的价值.网上有 ...
- 【Flask-RESTPlus系列】Part1：快速入门
0x00 内容概览 Flask-RESTPlus安装 快速入门 初始化 一个最简单的API示例 资源路由 端点 参数解析 数据格式化 顺序保留 完整例子 0x01 Flask-RESTPlus安装 1 ...
- ORA-00257 archiver error的处理
ORA-00257 archiver error的处理 检查flash recovery area的使用情况 SQL> set linesize 100 SQL> col paramete ...
- linux学习基础1
简介 包含计算机组成,发行.核心思想.主要目录,一些命令ifconfig.echo.tty.startx.export.pwd.history.shutdown.poweroff.reboot.hwc ...
- Tomcat的Https设置及Http自动跳转Https
Https相关介绍 Https是由NetScape公司设计的一个基于Http的加密传输协议,可以这样理解Https = Http +SSL(安全套接层),Https的端口为443,而且还需要申请 ...