1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <script src="../../build/react.js"></script>
  5.     <script src="../../build/react-dom.js"></script>
  6.     <script src="../../build/browser.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="example"></div>
  10.     <script type="text/babel">
  11.     var TodoList = React.createClass({
  12.       render: function() {
  13.         var createItem = function(item) {
  14.           return <li key={item.id}>{item.text}</li>;
  15.         };
  16.  
  17.       return <ul>{this.props.items.map(createItem)}</ul>;
  18.       },
  19.     });
  20.     var TodoApp = React.createClass({
  21.         getInitialState: function() {
  22.           return {items: [], text: ''};
  23.         },
  24.  
  25.         onChange: function(e) {
  26.           this.setState({text: e.target.value});
  27.         },
  28.  
  29.         handleSubmit: function(e) {
  30.           e.preventDefault();
  31.           var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
  32.           var nextText = '';
  33.           this.setState({items: nextItems, text: nextText});
  34.         },
  35.  
  36.         render: function() {
  37.           return (
  38.             <div>
  39.               <h3>TODO</h3>
  40.               <TodoList items={this.state.items} />
  41.               <form onSubmit={this.handleSubmit}>
  42.                 <input onChange={this.onChange} value={this.state.text} />
  43.                 <button>{'Add #' + (this.state.items.length + 1)}</button>
  44.               </form>
  45.             </div>
  46.           );
  47.         },
  48.     });
  49.  
  50.     ReactDOM.render(<TodoApp />, document.getElementById('example'));
  51.     </script>
  52.   </body>
  53. </html>

react-conponent-todo的更多相关文章

  1. react入门:todo应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. React半科普文

    React半科普文 什么是React getting started 文件分离 Server端编译 定义一个组件 使用property 组件嵌套 组件更新 Virtual DOM react nati ...

  3. [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 ...

  4. react相关知识点总结

    1 JSX解析的问题 JSX其实是语法糖: 开发环境会将JSX编译成JS代码 react定义的方法,用来解析html,第一个参数是“html元素”,第二个参数是“属性”,第三个参数是其子元素: 所以下 ...

  5. [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 ...

  6. 15个Node.js项目列表

    前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...

  7. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  8. [Redux] Important things in Redux

    Root Smart component can be overloaded, divide 'smart' component wisely & using Provider. Proble ...

  9. jsx的本质

    jsx语法 1.所有html标签他都支持        <div></div> 2.大括号里面可以引入js变量 或者 表达式       {name || ''} 3.可以做判 ...

  10. 3.2 Redux TodoApp

    上一节讲完了 redux 中的概念,但是仍然没有和 react 联系起来,这一节将利用 redux 在 react 中实现完整的 todolist: 在 react 使用 redux 通过 Provi ...

随机推荐

  1. Java核心技术卷一基础知识-第9章-Swing用户界面组件-读书笔记

    第9章 Swing用户界面组件 本章内容: * Swing与模型-视图-控制器设计模式 * 布局管理概述 * 文本输入 * 选择组件 * 菜单 * 复杂的布局管理 * 对话框 本章将介绍构造功能更加齐 ...

  2. 应用监控CAT之cat-client源码阅读（一）

    CAT 由大众点评开发的,基于 Java 的实时应用监控平台,包括实时应用监控,业务监控.对于及时发现线上问题非常有用.(不知道大家有没有在用) 应用自然是最初级的,用完之后,还想了解下其背后的原理, ...

  3. Solr搜索引擎入门知识汇总

    1.技术选型,为什么用solr而不用lucene,或者其他检索工具 lucene:需要开发者自己维护索引文件,在多机环境中备份同步索引文件很是麻烦 Lucene本质上是搜索库,不是独立的应用程序.而S ...

  4. IntelliJ IDEA如何设置新建类时，自动注释作者信息和日期时间

    本文提供两种注释风格供参考. 风格1:简约Style 效果如下: 设置步骤: File--> Settings--> Editor--> File and Code Template ...

  5. Git基本命令 -- 别名 + 忽略 + 推送

    别名. 我可以使用这个命令查看repository的历史 git log --all --graph --decorate --oneline: 这个命令可能比较常用, 但是又比较长. 这时我可以创建 ...

  6. mybatis框架(3)---SqlMapConfig.xml解析

    SqlMapConfig.xml SqlMapConfig.xml是Mybatis的全局配置参数,关于他的具体用的有专门的MyBatis - API文档,这里面讲的非常清楚,所以我这里就挑几个讲下: ...

  7. python中使用xlrd、xlwt和xlutils3操作Excel

    简单试了下python下excel的操作,使用了xlrd.xlwt和xlutil3:xlrd可以实现excel的读取操作,xlwt则是写入excel操作,xlutils3主要是为了修改excel,简单 ...

  8. C++版 - 剑指offer 面试题5：从尾到头打印链表 题解

    面试题5:从尾到头打印链表 提交网址: http://www.nowcoder.com/practice/d0267f7f55b3412ba93bd35cfa8e8035?tpId=13&tq ...

  9. 我看C#的Equals()和GetHashCode()方法

    首先先谈一下Equals()这个方法: Equals()方法,来自于Object,是我们经常需要重写的方法.此方法的默认实现大概是这样的: public virtual bool Equals(obj ...

  10. Mybatis数据源

    在描述mybatis数据源之前,先抛出几个问题,这几个问题都能在本文得到解答 1.mybatis是如何获取到mysql连接的? 2.mybatis的Connection是怎么被创建的? 1.Datas ...