看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. Newtonsoft.Json自动升级版本号,导致dll冲突

    不知道怎么回事,vs偶尔会自动升级Newtonsoft.Json.dll的版本号,但是又不升级dll,仅仅是版本号变了,实际引用的dll还是原来的. 我用的是6.0.0的,然后版本号升级成了7.0.0 ...

  2. svn一次性add/delete所有文件

    Linux命令行下,svn add 一次性批量上传 命令行下操作svn没有使用界面形式的TortoiseSVN直观,但是不管怎样,命令行下操作svn还是有它的有点,如果你碰到一次需要svn add许多 ...

  3. 一定要 先删除 sc表 中的 某元组 行,,, 再删除 course表中的 元组行

    一定要  先删除 sc表 中的  某元组   行,,, 再删除  course表中的  元组行 course表 SC表 删除  course表中的  元组行,,出现错误 sc    ---->参 ...

  4. 慢工出细活,Facebook点赞按钮设计中的门道

    一年前,Facebook点赞按钮发布更新.一年后的今天,Facebook小小的点赞按钮因为Ted刚发布的一段演讲掀起波澜.设计一个像FB点赞按钮那么小的东西很难么?Ted中Margaret Gould ...

  5. 数据帮助类DBhelper的定义

    数据库帮助类的使用DBhelperusing System;using System.Collections.Generic;using System.Text;using System.Data;u ...

  6. 《JavaScript DOM编程艺术》笔记

    1. 把<script>标签放到HTML文档的最后,<body>标签之前能使浏览器更快地加载页面. 2. nodeType的常见取值 元素节点(1) 属性节点(2) 文本节点( ...

  7. linux磁盘管理(RHEL)

    IDE硬盘名称格式为/dev/hdXY,其中X为a-z的小写字母,Y为数字1-4(一块硬盘最多能分4个主分区).如hda1,表示第一块硬盘的第一个分区.hdb3表示第二块硬盘的第三个分区.还有如Pri ...

  8. 2018.06.30 cdq分治

    #cdq分治 ##一种奇妙的分治方法 优点:可以顶替复杂的高级数据结构:常数比较小. 缺点:必须离线操作. CDQ分治的基本思想十分简单.如下: 我们要解决一系列问题,包含修改和查询操作,我们将这些问 ...

  9. 2018.08.09洛谷P3959 宝藏(随机化贪心)

    传送门 回想起了自己赛场上乱搜的20分. 好吧现在也就是写了一个随机化贪心就水过去了,不得不说随机化贪心大法好. 代码: #include<bits/stdc++.h> using nam ...

  10. Nginx upstream的5种权重分配方式(转)

    出处:http://www.cnblogs.com/funsion/p/4003499.html?utm_source=tuicool 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器, ...