<!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的更多相关文章

  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. 从构建分布式秒杀系统聊聊WebSocket推送通知

    秒杀架构到后期,我们采用了消息队列的形式实现抢购逻辑,那么之前抛出过这样一个问题:消息队列异步处理完每个用户请求后,如何通知给相应用户秒杀成功? 场景映射 首先,我们举一个生活中比较常见的例子:我们去 ...

  2. Numpy学习三：数组运算

    1.转置 #reshape(shape)函数改变数组形状,shape是一个元组,表示数组的形状 创建一个包含15个元素的一维数组,通过reshape函数调整数组形状为3行5列的二维数组arr = np ...

  3. 常见排序算法整理（python实现 持续更新）

    1 快速排序 快速排序是对冒泡排序的一种改进.  它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行 ...

  4. 访问iis 出现500.19错误

    解决方案: 原因是asp应用程序没有打开,于是就在控制面板--程序---打开和关闭windows功能---internet信息服务----万维网服务------应用程序开发功能中选中全部 可能接下来会 ...

  5. Http状态信息

    一.HTTP协议1.简介:http超文本传输协议,基于请求与响应模式的,无状态的,应用层的协议.绝大读书的web开发都是建立在http协议之上的.2.http工作过程:当请求一个超链接时,http就开 ...

  6. django在关闭debug后，admin界面 及静态文件无法加载的解决办法

    当debug为true的时候,ALLOWED_HOSTS是跳过不管用的.所以这里需要将debug关掉,令debug=false,ALLOWED_HOSTS=[ '*' ]表示所有的主机都可以访问 开启 ...

  7. sql server 备份与恢复系列四 大容量模式下的备份与还原

    一. 概述 在sql server 备份与恢复系列的第一篇里,有讲到大容量模式下备份与还原的相关知识.这篇重点来演示在大容量模式下常用的备份与还原模式“完整备份+差异备份+日志备份”. 在大容量恢复模 ...

  8. sql server 性能调优之 资源等待之网络I/O

    一.概述 与网络I/O相关的等待的主要是ASYNC_NETWORK_IO,是指当sql server返回数据结果集给客户端的时候,会先将结果集填充到输出缓存里(ouput cache),同时网络层会开 ...

  9. 古典音乐 （java基础 继承）

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 一.前言 小朽不才,最近爱上了听古典音乐收录了,mozart ,贝多芬… ...

  10. two's complement，2的补码

    本文为作者原创,允许转载,但必须注明原文地址:https://www.cnblogs.com/byronxie/p/10117265.html Let's start with one questio ...