看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多。算了,这些抱怨没啥用,记录一下今天学习的内容。

今天看了to-do-list经典示例

总结起来可以概括为

1.首先划分组件:父组件--子组件

2.显示数据:创建初始数据,并将数据显示到页面上

3.创建函数:①:添加函数,输入框中输入数据,显示到页面上

      ②:删除函数,点击删除按钮,将该条数据删除

代码有很多,一会给一个链接,自己看就行,没必要我重新复制

其中踩过的坑:

 1. 首先就是版本的不同,所以函数有不同,在例子中使用的是

 this.refs.inputnew.getDOMNode();
但是,新版本中这个函数不存在,所以要用ReactDOM.findDOMNode(this.refs.inputnew);代替;

2.就是绑定函数bind(this);
bind(this)是子组件改变了父组件,利用this来确保指向是正确的,要使用bind(this)来绑定; 总体来说,学习react的难度不是代码有多难,而是对于经常使用js的程序员来说,这个思路的转变很痛苦
还有就是在学习中,我一直在找一些小的项目,比如这个to-do-list项目,这样实用性很强的项目 ,但是不太好找,以后我就把这样的项目全部汇总,以便别人找的时候不是那么困难了。

经典项目一:to-do-list项目

链接:http://www.cnblogs.com/wangfupeng1988/p/5302738.html

react.js学习之路二的更多相关文章

  1. react.js学习之路四

    针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...

  2. react.js学习之路三

    学习react.js,知识点整理: 1.props和state: props是相对于父级来说,固定的不会改变的内容.一般会先定义一个变量,则在父级中进行引用, var user = "liu ...

  3. react.js学习之路一

    今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...

  4. react.js学习之路六

    学习react中,我一直认为,总组件里面才有构造函数,但是我才发现我的观点是错误的,构造函数是可以出现在子组件里面的. 今天有一个错误是点击增加/减少input框里面 的数值 我一直在寻找input框 ...

  5. react.js学习之路五

    最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...

  6. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  7. React.js学习

    React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...

  8. React.js学习知识小结(一)

    学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...

  9. React.js学习小结

    最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看. 0.React全家桶(技术栈) 1.React主体 2.WebPack:grunt.gulp自动 ...

随机推荐

  1. mysql thread_cache 和 thread_pool 之间的关系

    线程池是Mysql5.6的一个核心功能,对 于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导 致资源利用 ...

  2. Mininet

    在Coursera SDN开放课程中,编程作业要用Mininet来完成.这里对Mininet做一个简单的介绍. 什么是Mininet Mininet是由一些虚拟的终端节点(end-hosts).交换机 ...

  3. 练习并熟练掌握交互式 SQL 语言

    哈工大数据库系统 实验:练习并熟练掌握交互式 SQL 语言   实验目的:基于给定的 OrderDB 数据库, 练习并熟练掌握交互式 SQL 语言实验环境:sql sever 2008 附:Order ...

  4. 电商类Web原型制作分享-IKEA

    IKEA是一个家居整合大型零售商,属于电商类官网.电商以展示商品.售后服务.购物流程为主.根据网站的图文方式排版,主导航栏使用的标签组,区域导航栏使用的是垂直选项卡,实现下拉弹出面板交互的功能. 本原 ...

  5. arduino 串口数据啊按字节分析

    #include <avr/wdt.h> #include <SoftwareSerial.h> #include <EEPROM.h> #define FPIN ...

  6. IntelliJ IDEA 2017版 SpringBoot的关闭自动配置和自定义Banner

    一.关闭自动配置 在jar包下找下边的名字    设置关闭自动配置jar    多个的时候配置       二.自定义Banner   (1)网站搜索一个图案.网址:http://patorjk.co ...

  7. com.liuyang.exception.DaoException: java.sql.SQLException: Incorrect string

    错误是在JUnit测试的时候产生的,但是实际加入数据也会产生这样的情况,主要是数据库内部的编码方式不支持当前的编码方式导致的冲突,解决方法就是在建立数据库之前,要查看当前的数据库的编码方式,方法和更改 ...

  8. HDU 2844 Coins (多重背包问题DP)

    题意:给定n种硬币,每种价值是a,数量是c,让你求不大于给定V的不同的价值数,就是说让你用这些硬币来组成多少种不同的价格,并且价格不大于V. 析:一看就应该知道是一个动态规划的背包问题,只不过是变形, ...

  9. Python安装setuptools遇到的MARKER_EXPR错误

    # python setup.py install Traceback (most recent call last):   File "setup.py", line 11, i ...

  10. 201709019工作日记--Java中的各种锁--未解决

    1. Syncronized与ReentrantLock Synchronized比ReentrantLock进java标准早,因此一开始大家都是用它.相当于Java提供了一种封装的互斥锁机制,对于用 ...