这些年，主攻后端，对于前端的掌握还停留在四五年前。当时的前端开发，就是写html+css+js，jquery的出现，使人很大程度上从浏览器兼容性编码中解脱出来。闲来没事封装几个jquery插件已算是最惬意的事了。

现在，前端大爆发，几年前的先驱者，比如YUI、Mootools、jQuery，今天已不再流行。以往后端才具备的各种编程思维和模型，已引入到前端，涌现出各种流行的前端框架。名噪一时的Backbone正在褪去热度，继往开来的React.js、Vue.js、Angular.js等MVVM框架竞相登场，确立了前端三足鼎立的局面。习惯称之为现代化前端。

定位全栈的我，被时间打回了后端工程师原形。有必要掌握一下现代化前端开发技能了。经过一番比较，相对最认同React全家桶的哲学，于是选择从React开始入坑。

学习知识是一回事，能否在真实项目中实战则完全是另一回事。不熟悉新的开发流程，可能始终无法下手编码。后面，我将用一个小而全的案例项目，展示react+redux项目开发的完整过程，力求涵盖实际项目中的方方面面。但写到这里，我还是纯粹的React新手，我只是把整个学习和实践过程展示给大家。你必须抱着跟我一样的信念去攻克它。

React技术栈一览

ES6、babel、webpack、ESlint、React、react-redux、react-router、UI框架

这些技术栈都需要进行配置支持，新手可能还没写一行React代码，就已经被各种技术栈名词淹没，迷失其中。

借助React官方的create-react-app工具，开发人员可以从配置工作中解脱出来，无需过早关注技术栈细节，通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发。

参考本系列：React技术栈之Coding起步---create-react-app

ES6

JavaScript的下一代标准，规定今后按年份发布新版。2015年发布的ECMAScript6.0，也叫ES2015。
学习React，要熟悉ES6的模块化、箭头函数、表达式解构、Promise异步编程，以及了解一些新的语法特性和API。

参考：阮一峰老师的《ECMAScript6入门》。

Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。JavaScript在不断发展，各种新的标准提案层出不穷，由于浏览器的多样性导致可能几年之内都无法广泛普及，Babel可以让你无顾虑的使用这些特性。

学习React，了解即可。只要配置好，它在背后工作。

参考本系列：React技术栈之Babel

ESlint

ESLint是一个JavaScript代码静态检查工具，可以检查JavaScript的语法错误，提示潜在的bug，可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则，也提供用户自定义规则来约束所写的JavaScript代码。

ESLint是Nicholas C. Zakas（尼古拉斯.泽卡斯）创建的开源项目。前端大牛工程师，以前是雅虎前端技术主管，YUI 库的贡献者。9年前刚毕业的我，靠着《CSS网站布局实录》和他的红宝书《JavaScript高级程序设计》，迈入前端开发行列。他同时也是《编写可维护的JavaScript》和《高性能JavaScript》的作者。

学习React，对ESLint做了解即可。只要配置好，项目构建时它会帮你把关规范。

参考本系列：React技术栈之ESLint