react.js学习之路二
看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学习之路二的更多相关文章
- react.js学习之路四
针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...
- react.js学习之路三
学习react.js,知识点整理: 1.props和state: props是相对于父级来说,固定的不会改变的内容.一般会先定义一个变量,则在父级中进行引用, var user = "liu ...
- react.js学习之路一
今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...
- react.js学习之路六
学习react中,我一直认为,总组件里面才有构造函数,但是我才发现我的观点是错误的,构造函数是可以出现在子组件里面的. 今天有一个错误是点击增加/减少input框里面 的数值 我一直在寻找input框 ...
- react.js学习之路五
最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...
- 【温故知新】——BABYLON.js学习之路·前辈经验(二)
前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...
- React.js学习
React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...
- React.js学习知识小结(一)
学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...
- React.js学习小结
最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看. 0.React全家桶(技术栈) 1.React主体 2.WebPack:grunt.gulp自动 ...
随机推荐
- codevs1246 丑数
题目描述 Description 对于一给定的素数集合 S = {p1, p2, ..., pK}, 来考虑那些质因数全部属于S 的数的集合.这个集合包括,p1, p1p2, p1p1, 和 p1p2 ...
- jquery节点获取
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(& ...
- 类方法 isAssignableFrom、instanceof 和 asSubclass
类方法 isAssignableFrom.instanceof 和 asSubclass Spring 框架 CollectionFactory 的 asEnumType 方法使用 "类.a ...
- 用户体验要好,App动画得这么做
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在用户体验设计方面,App动画的设计和添加,带给设计师无限的创造空间的同时,也成为设计师群体最具 ...
- JAVA对字符串的压缩与解压缩
import java.io.ByteArrayInputStream;import java.io.ByteArrayOutputStream;import java.io.IOException; ...
- sys.argv和getopt.getopt()的用法
1.sys.argv Python中sys.argv是命令行参数从程序外部传值的的一种途径,它是一个列表,列表元素是我们想传进去的的新参数,所以可以用索引sys.argv[]来获得想要的值.因为一个写 ...
- 17 Privacy Lost:Dose Anybody Care ? 失去隐私,有人在乎吗 ?
Privacy Lost:Dose Anybody Care ? 失去隐私,有人在乎吗 ? ①Someday a stranger will read your e-mail without your ...
- arduino IO口
AVR单片机的每组I/O口都配备有三个8位寄存器,分别是:方向控制寄存器DDRx.数据寄存器PORTx.输入引脚寄存器PINx(x=A/B/C/D).I/O口的工作方式和表现特征由这三个I/O寄存器控 ...
- 如何设置vim中tab键缩进---配置初始化设置
转载自:http://blog.51cto.com/xuding/1725376:加了一些补充说明 问题: Linux系统下,Tab键默认为8个字符,需呀将其修改为4个字符的方式使用 步骤: 1.在用 ...
- Python之Pandas中Series、DataFrame
Python之Pandas中Series.DataFrame实践 1. pandas的数据结构Series 1.1 Series是一种类似于一维数组的对象,它由一组数据(各种NumPy数据类型)以及一 ...