我先前有一些前端接触，html/css/js语言基础具备，也接触过Node.js /AnjularJS,不过因为从来没系统地学习过，前端技术丰富且更新快，我自己感觉一直游离在专业前端开发之外。现在，打算好好学习一下前端技术。

##原则

1. 选择活跃度最大／最贴近工作需求的技术入手；
2. 某阶段内只专注学习一门技术，其他相关技术按需了解；
3. 快速开发，不断迭代项目；

##React学习
学习王沛老师的React专栏文章，遇到不明白的自己搜索，很多知识可以从阮一峰的网络日志上找到。

###一 React的设计哲学 - 简单之

1. React是面向MVC中的View的框架；
2. 基于Virtual DOM和DOM Diff技术，可以实现浏览器端的“全页面刷新”；
3. 简化的组件模型：所谓组件，其实就是状态机器；

###二 React开发神器Webpack

1. 对项目中的静态资源进行统一管理，为产品的最终发布提供最优的打包部署方案；
2. 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS）；
3. source map:就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置；
4. 模块加载器（Loaders）在一定程度上可以代替Css Sprites（用一张图片代替多张图片来节省开销和减少http请求）
5. react-hot-loader：轻松实现React组件的热替换；
6. 打包成多个资源文件两个目的：
   • 将多个页面的公用模块独立打包，从而可以利用浏览器缓存机制来提高页面加载效率；
   • 减少页面初次加载时间，只有当某功能被用到时，才去动态的加载；
7. 栗子项目

###三 理解JSX和组件

1. React模拟事件系统：React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素；
2. 在JSX中使用样式：通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象；
3. 基本上属性名的转换规范就是将其写成驼峰写法；
4. 对于自定义组件，唯一必须实现的方法就是render()，除此之外，还有一些方法会在组件生命周期中被调用，如下图所示:
   
   • componentDidMount: 在组件第一次render之后调用，这时组件对应的DOM节点已被加入到浏览器。在这个方法里可以去实现一些初始化逻辑；
   • componentWillUnmount: 在DOM节点移除之后被调用，这里可以做一些相关的清理工作；
   • shouldComponentUpdate: 这是一个和性能非常相关的方法，在每一次render方法之前被调用。它提供了一个机会让你决定是否要对组件进行实际的render；

###四 虚拟DOM Diff算法解析

1. 对于列表节点提供唯一的key属性可以帮助React定位到正确的节点进行比较，从而大幅减少DOM操作次数，提高了性能;

###五 使用Flux搭建React应用程序架构

1. 单向数据流
   
2. Object.assign() 复制对象所有可枚举的属性到目标。