浅尝前端工程化&&REACT&&todoList
本文记录了我使用REACT按照教程制作的todo list demo，并且使用了蚂蚁金服开源的组件库[ant.design][https://ant.design/] 修饰的过程。
参考教程
我是按照https://github.com/zhaohaodang/react-todo 和 https://ant.design/docs/react/introduce-cn 的教程学习，并参考了下面教程。
- 3小时速成 Vue2.x 核心技术 https://www.imooc.com/video/18564
- 前端大宝书 https://l552177239.github.io/my-note/git/React/1-react-setup.html
- 相关源码 https://github.com/yezihaohao/react-admin
- 菜鸟教程的REACT http://www.runoob.com/react/react-tutorial.html
总结
源码开源在了 https://github.com/boy-hack/REACT-TODO
刚开始学习的时候还对js多变的语法感到恐惧，按照教程一步步写完后发现其实还行！整个项目就几处要点
- 组件化的思想
- npm的使用
- React State的使用
- React Props的使用
- 事件的绑定
组件化思想
整个todo应用是一个大组件APP,在APP中又使用了一个子组件Todo List，Todo List下使用多个Todo Item。每个Item点击和删除都会有对应的操作。
React State
state表达某种状态，在组件中使用this.state控制，似乎它的改变可以影响组件重画render()。
React Props
当父类组件传入参数进来后可以用this.props调用
事件的绑定
REACT使用jsx语法，和html类似，执行js的话用{}包括起来即可。一些变量事件都可以通过这个来传输。
例如一个点击事件
<Button type="default" shape="circle" icon="close" size="small" onClick={this.handleRemove.bind(this)} />一些style也可以直接用，这个我认为非常好
<div style={{"margin":"30px auto",width:"850px"}}>为什么是两个大括号包裹呢？因为第一个大括号表示它是一个js语法，下面一个大括号类似字典，让style可以接收更多参数。
一个坑
我在编辑框输入完内容后，点击add todo，编辑框的内容不会消失。普通的input标签我设置一个ref然后根据dom查找赋值就完事了，但是使用antd的组件search之后，事情变得没这么简单了…
最后解决是看了antd其他例子的一个解决方法，将value设置为state，并且使用onChange事件不断更新，最后点击后让state置空即可。
Show
