2009年3月开始了我的编程之路，走上了程序猿这一当时并没有太多认知的道路。当时只知道C和java，自己也没有做太多的搜索和了解，听别人的说JAVA好，就选择了JAVA这条路。一直以来这种随意的选择，是我的一个很大的毛病。为什么选这个不选那个，这个跟那个的区别在哪里，我一直都不知道，我都是随意或者听他人的。这样是很不好的。就像前端这件事，当时看到2015年8月期《程序员》杂志，里面有一篇讲前端世界的，我突然才发现原来现在的前端已经变成这样了，这么多新技术，这么多新框架。我还一直沉浸在html,js,css的原始世界。我不知道原来前端也有MV*。文章中提到了vue,angular,react，选哪个开始我的前端学习，文中说react在2015年很热，我就选了react开始学习。并没有去看一下这三个框架的不同使用场景，不同的需求，哪个更适合现在公司的需求。没有去了解，没有去调查，没有去搜索。做任何事前都没有做详尽的调查，就开始盲目的去执行了。
【废话讲的有点多了。】
2015.09月从React开始了我的前端之路，到现在2016.05我也只是学习了react。我知道我必须去了解和学习vue,angular2，不学习怎么和react比较，项目要用的时候怎么选择框架。
从react的基础开始学习：组件化思想，jsx语法，生命周期。学习了这些基础之后，在你的html页面中加入react.js，react.dom.js和browser.js就可以开搞了，页面就可以使用react的组件化，使用js进行渲染页面。browser.js主要是进行jsx语法转化成js语法的。
如果学习了这个基础，就可以直接把react引入项目中，把React作为你项目的UI层，这也体现了React官网对React的说明，JUST THE UI。
学习完react的基础，直接在项目中这样使用的话，你会发现虽然组件化了，但是一个个js维护起来麻烦，这样使用react，所有组件都得自己写，想复用别人成熟的组件，这样是不行的。react的状态管理很混乱，同级组件之间通讯很麻烦，必须通过共通的父组件，这个时候就有必要开始学习一个框架，更好的管理组件的状态，组件与组件之间的逻辑，把组件的VIEW，业务逻辑和数据分离出来。于是吭哧吭哧开始学起react官方推荐的flux框架。
看到flux提出的单向数据流概念，还是被震撼到的，这个思想完全不同于之前对前端的认识。之前觉得前端主要就是页面，就是DOM和事件。js的操作以事件为中心，根据各种事件变更页面上的DOM元素和样式，达到页面不同的展示。而flux是以数据为中心，任何操作都是变更数据，由不同的数据展现出不同的UI，这是一种函数式编程的思想，相同的数据参数返回的结果(UI)是相同。
要使用flux框架，你就必须要使js可以模块化，js模块化这已经不是什么新鲜的东西了，CommonJS,AMD,RequireJS等都是早就存在的模块化加载器，ES6规范出来后，ES6自带了模块化，可以直接使用import加载其他js模块。不过如果你想使用模块化，你还必须要使用打包工具，把这个分散的js整合打包成一个或多个js，可以在html直接引用。使用前端打包工具，js模块化，MV**框架这些后，也就是前端工程化实现。打包工具也有很多browserify, grunt,webpack等，由于react官方推荐使用webpack，react社区的项目大部分都是基于webpack的，所以我决定也使用这个打包神器webpack。
webpack把一切静态文件都当做模块，图片是一个模块可以引入，css也是一个模块可以引入。webpack可以把一个页面使用到的js分块打包，而不是全部打在这一个js文件中，这样的好处是文件变小了，只有用户点击需要使用时才进行异步加载需要的js文件。有各种不同的loader可以对不同的内容进行编译处理后打包。常见的比如css-loader用来加载css文件，less-loader,url-loader,babel-loader用来转化es6语法。
webpack还可以引入插件plugins，之所以称之为react开发的神器，就是因为webpack提供的热加载插件可以在开发过程中修改完代码后，不需要刷新浏览器，就自动加载新的变更部分的代码。
再回来说flux，使用flux后，会对代码结构做个分层，是整个页面的逻辑更清晰。它包含三个核心概念：Views, Stores 和 Dispatcher。这三个概念不同与MVC，在flux中没有controller层，可以把Views看做是controller-views。Views即 React 组件。它们负责渲染界面，捕获用户事件，从 Stores 获取数据。Stores用于管理数据。 一个 Store 管理一个区域的数据，当数据变化时它负责通知 Views。Dispatcher接收新数据然后传递给 Stores，Stores 更新数据并通知 Views。
说到flux，一定要说一下它的单向数据流，所谓单向数据流就是用户的事件不直接操作DOM，而是操作顶层数据(store中)，这些数据从顶层流下来更新DOM。
下图中是flux的数据流向，Dispatcher就像一个中心枢纽所有数据的流动都要通过这里. Action来源于用户与views的交互行为, Action触发Dispatcher. Dipatcher分发这个事件给对应的Store(通过之前注册的回调函数callback). Store在修改State后触发一个"change"事件通知controller-views数据发生变化了. controller-views监听这些"change"事件并且从stores暴露的函数中获取(新)数据, 然后调用自己的setState()方法, rerender自己和它的子组件.
大致了解了flux的框架后，打算把它引入项目，用flux来重写购物网站的购物车页面。在实际使用过程中发现对哪些数据需要放到store中进行管理，哪些数据只需要维护在views的react组件中一直没有很好的判断，原因在于对非直接的父子组件之间的信息交互一直没有好的方案，都只能通过store通知监听该数据变化的组件。甚至极端的做法把所有的数据都使用store去管理，用户的任何操作都调用dispatcher。要想用好flux还是要对数据和组件有一个规划，先想好这个页面有哪些个组件，组件与组件之间的交互关系，再考虑哪些数据应该交由store管理，哪些数据维护在组件中就可以了。
在使用flux框架开发项目的过程中，点击链接或者按钮的页面跳转，一开始的想法是跟以前一样到后台后，重写跳转到一个新的html页面。后来在网上的项目中看到原来还有一个叫react-router的东西，这个东西可以实现页面的跳转，完全不需要去后台，在前端就可以完成。我又开始在网上找资料学习react-router。
就这样完成了第一个使用前端框架的前端项目。项目中使用到得主要技术有：react，flux，react-router，webpack。
