React+Redux开发实录（二）React技术栈一览

React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录（二）React技术栈一览

React技术栈一览

从上面搭建工程脚手架中，咱们看到了React开发技术栈。有ES六、babel、eslint、webpack、react、redux、react-router。

对React新手（有HTML、JavaScript、CSS基础）来讲，需明确掌握React和Redux相关概念。至于其余的，了解就能够。不过咱们有必要在实践以前从总体上俯瞰一下。清楚前因后果，避免迷迷糊糊一味跟随别人的代码去Ctrl+C & Ctrl+V，即痛苦又容易半途而废。

ES6

JavaScript的下一代标准，规定从此按年份发布新版。2015年发布的ECMAScript6.0，也叫ES2015。
实践React以前，建议先了解下ES6的模块化、箭头函数、表达式解构、Promise异步编程。

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

线上阅读推荐：阮一峰的开源书《ECMAScript6入门》

Babel

JavaScript在不断发展，各类新的标准提案层出不穷，因为浏览器的多样性致使可能几年以内都没法普遍普及。Babel是一个普遍使用的转码器，能够将ES6代码转化为几乎全部浏览器都认识的ES5旧代码，你能够没必要顾虑的使用ES新特性。

这里有个Babel的REPL线上编译器。在左侧输入箭头函数f=>f感觉下吧。

实践React以前，知道有这么个东西就能够了。Webpack会在构建项目时自动调用Babel进行转换。

线上阅读推荐：React技术栈之Babel

ESlint

ESLint是一个JavaScript代码静态检查工具，能够有效提升代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则，也提供用户自定义规则去约束JavaScript风格。

ESLint是Nicholas C. Zakas（尼古拉斯.泽卡斯）创造的。前端大牛，前雅虎前端技术主管，YUI 库的贡献者。当年的我，凭着他的红宝书《JavaScript高级程序设计》，再配合《CSS网站布局实录》，就迈入前端。他同时也是《编写可维护的JavaScript》、《高性能JavaScript》和《深刻理解ES6》的做者。

实践React以前，知道有这么个东西就能够了。项目过程当中，须要调整规则的时候，参考ESlint完整规则列表

Webpack

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

实践React以前，了解下webpack就能够。经过ceate-react-app建立的脚手架，执行npm run eject弹出的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（三）组件的生命周期

Redux

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

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

直接使用Redux是有点烦的，所以React官方提供了react-redux库，它对redux api进行了封装，借助react-redux，能够在项目中更方便的使用Redux。

实践React以前，必须熟悉Redux和react-redux，了解Flex架构更好但不是必须。

线上阅读推荐：
Redux入门教程
React技术栈之Redux异步流
React技术栈之Redux高阶运用

react-router

路由库React-Router，是React体系的一个重要部分。它是官方维护的，事实上也是惟一可选的路由库。它经过管理URL，实现组件的切换和状态的变化。如今已经到了react-router4版本了，跟3版本用法有所不一样。

实践React以前，能够了解下。

线上阅读参考：
React技术栈之React-Router(这个是react-router3)

UI框架

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

React+Redux开发实录（一）搭建工程脚手架React+Redux开发实录（二）React技术栈一览