原文链接： segmentfault.com

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

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

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

学习知识是一回事，能否在真实项目中实战则完全是另一回事。不熟悉新的开发流程，可能始终无法下手编码。后面，我将用一个小而全的案例项目，展示react+redux项目开发的完整过程，力求涵盖实际项目中的方方面面。

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。

完整了解ES6，推荐阅读前端大牛Nicholas C. Zakas（尼古拉斯.泽卡斯）的《深入理解ES6》

参考：阮一峰老师的开源书《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》和《深入理解ES6》的作者。

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

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

Webpack

Webpack是新一代打包工具。如今，前端项目日渐复杂，构建系统已成为开发过程中不可或缺的部分，而模块打包正式前端构建系统的核心。

学习React，需要掌握webpack。但这东西也是个坑，搞的不好会让人痛不欲生。建议随本系列文章逐步掌握我们所需要那部分就可以了。

参考：入门webpack、一小时包教会webpack

参考本系列：

React技术栈之Webpack环境搭建（一）手动搭建

React技术栈之Webpack环境搭建（二）不同环境不同配置

React技术栈之Webpack环境搭建（三）打包性能优化

React

React是Facebook推出的JavaScript库。口号是“用来创建用户界面的JavaScript库”，所以它只是和用户界面打交道，可以把它看成MVC中的V（视图）层。因此，除非项目很简单，否则一般再配上Redux管理数据流和状态。

学习React，当然必须掌握React。

参考本系列：

React技术栈之React（一）初识React

React技术栈之React（二）组件的prop和state

React技术栈之React（三）组件的生命周期

react-redux

React的核心就是组件，它只负责view，当应用复杂程度增加时，还需要有数据流向控制、状态管理等方案。

React推出了Flux架构及其官方实现。同时业界也推出了很多Flux的实现，其中以Redux为翘楚，它将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

react-redux是Redux官方提供的React绑定，对Redux进行一定封装，用于辅助在React项目中更方便的使用Redux。

学习React，必须了解Flux，熟悉Redux和react-redux。

参考：

Redux入门教程

参考本系列：

React技术栈之Redux异步流

React技术栈之Redux高阶运用

react-router

路由库React-Router，是React体系的一个重要部分。它是官方维护的，事实上也是唯一可选的路由库。它通过管理URL，实现组件的切换和状态的变化，开发复杂的应用肯定用到。

学习React，必须熟悉它。

参考本系列：React技术栈之React-Router

UI框架

诸如Ant Design、Amaze UI React、React bootstrap、Material-UI、React Desktop、Semantic-UI-React