前端小结----Webpack React

Webpack http://blog.sina.com.cn/s/blog_6a2787d40102wm14.html

最近选了时下很流行的React玩了玩，工欲善其事必先利其器，自从node出来后，各种工具一个接一个，gulp, browserify, webpack，作为前端菜鸟，就选了个网上觉得比较新比较好的Webpack来作为构建工具。

这几篇Webpack入门文章写的很不错，傻瓜式，一步步来就可以了。挺简单的，配个entry, output，再加些plugins, 加些loader就 差不多够用了，依赖都是用npm来管理的。

Webpack傻瓜式指南（一）  

Webpack傻瓜指南（二）开发和部署技巧 

Webpack傻瓜指南（三）和React配合开发 

手把手教你基于ES6架构自己的React Boilerplate项目

React

React入门的话，过两遍官方文档应该差不多了， React Doc. 关于React，几个关键的概念理解后自己写了个简单的页面，有些基本的交互。

Component: React最大的好处就是组件编程嘛，对于那种公司后台用的系统，界面比较复杂的，我觉得React挺适合的。

JSX: JSX is a JavaScript syntax extension that looks similar to XML. 大概就是可以在JS里写HTML，然后又不是纯粹的HTML, 里面还可以嵌一些变量，表达式之类的。当然不用JSX也是可以写的，但读起来就比较累了，不那么直观，不像JSX那样，能够看到整个组件的HTML结构。怎么说呢，历史总是不断的重复却又不只是简单的重复，刚开始的时候，所有东西写在一起，后来分开，现在又整到一起了。这里有个要注意的地方，由于HTML里的class, for等属性是JS里的关键字，所以在JSX里需要用className, forName代替。

Props: 用来在组件间传递数据的，这里的数据传递是单向的，只能从父组件向子组件传递。

State: 用来管理组件状态的，通过setState改变状态后，组件会自动调用render函数重新渲染。其实state里面也可以放很多数据，那么什么时候用state，什么时候用props比较合适呢。官方两段话解释的很清楚。

render函数：这是React里面很关键的一个函数，这个里面就是用户写的组件的结构，用于渲染整个组件，在state发生改变后，该函数会被自动调用。

事件响应：组件内的事件响应很简单，比如鼠标点击事件，加个onClick=XXXFunction然后在XXXFunction里响应就可以了。但是如果父组件需要知晓子组件的事件怎么办呢，父组件可以通过props传递个callback函数给子组件，这样就可以处理子组件的事件了。但如果组件的层级比较多，这种方式感觉也挺恶心的，不知道Flux, Redux这些东西是不是来解决这个问题的，还没了解，后面马上要开始学Redux了，Common On.

最后

关于React，这一周利用业余时间学的就这么多了，也写了两个个简单的页面，有个拖动的操作删除的还没搞定。下周开始看看Redux，看它是用来解决什么痛点的，然后把现在两个页面优化一下。然后着手把后端的写好，后端比较简单，哈哈。最后可能再看看蚂蚁的Ant Design.  如果有前端高手看到文章觉得我还凑合，能带我一起耍吗。