React与Redux开发实例精解

内容简介

本书共分四部分，全面介绍如何使用 React与 Redux进行Web 开发。第一部分是基础篇，介绍 React与 Redux的基础知识;第二部分是进阶篇，通过精彩的官方示例学习React与Redux;第三部分是拓展篇，主要学习一些优秀的第三方拓展;第四部分是实战篇，将会带领读者一步步搭建大型 Web应用程序。

本书适合熟悉JavaScript编程，有意使用 React与Redux搭建 Web 应用的程序员学习参考。

本书的内容安排本书分为四部分。

第一部分 基础篇 主要介绍 React 与 Redux的基础知识。

第1章 简要介绍本书所要讲解的技术，包括React、Redux、Node与 Universal 渲染 Babel及 Webpack。

第 2 章 讲解如何在 Node.js 中运行 React。。

第 3 章 讲解如何在浏览器中运行 React。

第 4 章 介绍开发服务器和热替换技术及其实现过程。

第5章 介绍 React 的创新语法∶ JSX。

第6章 介绍 React 的数据载体∶ state、props 与context。

第 7章 介绍 React 的两个对象∶ ReactElement 和组件实例。

第 8 章 介绍 Redux 的 action、reducer 与store。

第9章 介绍 Redux的 action 创建函数和 Thunk 中间件。

第二部分 进阶篇 通过精彩的官方示例学习 React 与 Redux。

第 10 章 讲解如何手动将 Redux 连接到 React 中。

第 11 章 讲解如何使用 react-redux将 Redux 连接到 React 中。

第12 章 介绍 Redux 的撤销/重做和 Redux 开发者工具的使用。

第 13 章 讲解如何在 React 与 Redux 的程序中编写测试。

第 14 章 讨论 Redux 的全局状态与 React组件的内部状态。

第 15 章 讲解 React与 Redux 中常用的几种数组处理方法。

第 16 章 介绍 Redux 中的异步处理。

第 17章 介绍如何自定义 Redux 中间件。

第 18章 讲解如何使用React与Redux实现 Universal渲染。

第三部分 拓展篇 学习一些优秀的第三方拓展。

第19 章 介绍 Webpack同构工具。

第 20 章 介绍 React Router，并通过它实现 Universal路由。

第 21章 介绍多页面下的异步处理。

第22章 介绍了bootstrap-loader、PostCSS、Autoprefixer和React-Bootstrap。

第四部分 实战篇 一步步搭建大型 Web 应用程序。

第 23章 介绍一个大型项目的基本结构。

第24章 使用 ReduxForm 制作各种表单。

第 25 章 实现图表与表格。

第 26 章 实现用户认证。

第 27章 讲解部署到 Heroku 的方法，并实现持续集成。

第 28 章 列出其他资源。

第1章 技术简介

React

毫不夸张地说，近年来最让全球 JavaScript 开发者感到疯狂的事情就是 React 的横空出世。作为一个构建用户界面的工具库，React 被众多知名公司所使用，包括 Facebook、Airbnb、Uber、 Alibaba 等。如果你想进入这些公司工作，那么你应该学习 React。

React 官方是这样介绍它的∶"一个声明式、高效、灵活的、创建用户界面的 JavaScript 库。"这究竟是什么意思呢?下面我们来逐一解读。

声明式是指只要使用 React 描述组件的样子就可以改变用户界面。传统方法是命令式地操作 DOM，不仅需要记住大量的 API，而且还会增加代码的耦合度，使得项目难以维护。React使用自己的魔法改变界面，让开发者最大限度地少与 DOM交互，降低了处理视图的难度。

高效主要得益于 React 的虚拟 DOM，以及其 Diff算法。传统的 Diff算法的复杂度是极高的，而 Facebook 的工程师巧妙地结合 Web 界面的特点改进了Dif算法，使其性能出众。拥有了高性能的 Diff算法，我们就可以在"刷新"全部界面时只更新需要改变的那部分界面了。也正因为这个原因，React 可以使用单向数据流改变界面，抛弃了传统的数据绑定，减少了样板代码和重量。

灵活是指 React 可以作为视图层与其他技术栈配合使用，比如代替 Angular 的指令，或者与 Redux 搭配，等等。

除了上面介绍的这些优点外，React 最让人兴奋的莫过于 Universal渲染和衍生的 React Native项目了。Universal 渲染指的是一套代码可以同时在服务端和客户端渲染，这也是本书重点介绍的技术。React Native 则让你可以使用前沿的 JavaScript 为 iOS、Android 编写跨平台的原生 APP?。

如果你对 React 究竟是什么还是很困惑，我的建议是，不用过于纠结，只管先用起来，在实际的使用中慢慢理解它。本书将教你如何用 React 开发 Web 程序。

Redux

Redux 是一个 JavaScript状态容器，提供可预测的状态管理。

Redux 可以用三条基本原则来描述∶ 单一数据源;state 只读;使用纯函数来执行修改。

单一数据源是指整个应用的 state 被存储在一棵对象树中，并且这个对象树只存在于唯一一个 store 中。这里的 state指的是数据。单一数据源是 Redux 区别与其他同类工具的一个重要特征。

state 只读并不代表我们无法改变 state。如果无法改变 state，那么程序将不会发生变化。这里"只读"指的是不允许直接对 state 这个变量重写赋值，但是可以通过action 和 reducer 返回一个新的 state，而且只能使用这一方法。

使用纯函数来执行修改是指更新 state 的 reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。

了解上述基本原则后，或许你会问∶"为什么要使用 Redux?"问得好!使用 Redux将会给你的项目带来以下这些收益。

可预测∶ Redux 只有一个数据源，想要修改它只能发起 action，reducer 又是纯函数，相同的输入永远会得到相同的输出。这一切都使得程序运作变得可控、可预测。。便于组织管理代码∶严格而明确的程序结构使得代码更容易组织和管理，同时也方便了团队协作。

支持 Universal 渲染∶单一数据源这个原则可以帮助解决 Universal 渲染中的数据传递问题，服务端渲染后只需给客户端传递一个变量即可，这个变量就是存储 state 的对象树。

优秀的拓展能力; Redux 支持多种拓展方式，但主要是中间件的拓展。

中间件的使用

使得原本简单的 Redux变得十分强大。例如，Redux Thunk中间件使 Redux 的 action创建函数具备了异步和条件判断能力，Logger for Redux 中间件则可以为程序添加日志功能。

容易测试∶编写可测试的代码，最重要的一条规则就是写单一功能的、没有外界依赖的小型函数。Redux 的代码几乎都是这样小而纯且独立的函数。

开发工具;开发者可以使用 Redux的开发工具去实时追踪、回退和重放程序中action与 state 的每个变化。

社区和生态系统;无论在什么时候，使用什么框架或库，社区和生态系统都是非常重要的。Redux 背后的强大社区使其更加易用。

Reducer 的纯函数、不可变、函数组合，中间件的管道、柯里化等这些思想都属于函数式编程的范畴。在 Redux中，函数式编程被重度使用，甚至连"Redux"这个名字都充满了浓浓的函数式编程意味（reduce 是函数式编程中经常使用的遍历累加数组元素的方法）。函数式编程使得代码变得更加简洁和模块化。熟悉函数式编程对于理解 Redux的原理和思想是非常有帮助的。本书将会在介绍 Redux 的同时，穿插讲解函数式编程的知识。希望你在读完本书后能够感受到 Redux 与函数式编程之美。

Node 与 Universal 渲染

React与 Redux 既可以在浏览器端运行也可以在服务器端运行。这里的服务器端指的是Node服务器。

和传统 Web服务器相比，Node更简单，它是单线程，与平台无关的。最重要的是，它使用了 JavaScript 这门原来在浏览器中运行的语言，所以我们可以实现 Universal渲染——用一套代码在服务端和客户端渲染。

最初所有的渲染都是发生在服务器端的，但是在 2005 年，AJAX的到来将渲染过程转移到了客户端，通过调用服务器的 API获取和修改数据。此后诞生了无数的 JavaScript 框架来实现客户端渲染和路由控制。但是开发者们意识到一个问题∶客户端渲染破坏了搜索引擎的索引，因为搜索引擎无法和 JavaScript 通话。除此之外，客户端渲染在第一次会加载较多模板和脚本，严重影响了网页打开的速度。

【下载地址】

链接：https://pan.baidu.com/s/17tHHPxL8Oc3pnCfcRQzI4A

提取码：yot0