React+精髓（高清PDF 下载）

内 容 简 介

本书面向初中级前端开发者，从头到尾、由浅入深地介绍了使用 React 实现组件化 Web 应用的完整流程。作者从 React 元素、React 组件等基本的概念讲起，循序渐进地讨论了组件状态和生命周期，为开发完整的 React 应用打下了基础。与第三方 JavaScript 框架集成，以及对 React 组件进行单元测试，都是开发 React 应用的重要内容，本书也有详细讲解。最后，为进一步提升 Reast 应用的灵活性，作者还以实例展示了如何引入 Flux 架构，让读者的开发技能更上一层楼。

给项目预先安装一些有用的工具

Charles F. Kettering 曾经说过∶

我只关心未来，因为我的余生都会在那里度过。

这位美国杰出的发明家在软件工程师这个职业诞生之前，就给我们留下了这条最重要的建议。然而，半个世纪后，我们仍在思考是什么导致了混乱的代码，或者是说混乱的思维模式。

你一定有过这种经历∶ 你接手了之前开发者的一份代码，然而这份代码没有任何的文档，你不得不花费数周的时间来理解这份难以调试的"伪自解释代码"。更可怕的是，项目还在持续增长，代码也越来越复杂难懂。大幅修改这份代码是很危险的，并且没有人想碰这份"丑陋"的遗留代码。而重写整个项目需要很大的成本，所以目前的做法就是不停地打补丁来修复遇到的 Bug。众所周知，维护软件的成本往往比原来开发软件的成本还高。

那么今天，应该如何针对未来编写软件呢?我认为是发明一个不变的、简单的工作模式。不管你的项目规模增长到多么大，这一工作模式的复杂性总是保持不变。这个工作模式就是项目的架构，理解了这个架构，也就明白了整个软件是如何运行的。

如果你了解现代的 Web 开发，尤其是前端开发，你会发现我们正生活在一个激动人心的时代。互联网公司和开发者都在解决开发速度与成本，以及代码质量与用户体验之间的矛盾。

2013 年，Facebook 发布了React，这是一个用于构建 UI的开源的 JavaScript 库。可以在http∶//facebook.github.io/react/上深人了解React。2015年年初，Facebook的 Tom Occhino 总结了React 为什么这么"牛"∶

React将命今式的 API 包装成为声明式的 API，React 牛在改变了我们写代码的方式。

我们知道，声明式编程代码比命令式代码要少。声明式是告诉计算机去做什么而不用管如何去做，命令式则要描述如何去做。JavaScript DOM API 的调用就是一个命令式编程的例子，jQuery 也是。

Facebook 在生产环境中使用 React 已有多年，例如在 Instagram 和其他产品线中。其实 React 同样适用于比较小的项目，比如下面这个购物清单就是用 React 编写的∶ http∶//fedosejev.github.io/shopping-list-react。我认为 React 是现如今对开发人员来说最好的构建 UI 的 JavaScript库之一。

本书的目标是让大家理解 React 的基本原理。为此，我们会逐个地讲解概念，同时告诉大家怎么把这些概念落实到应用中。这样一步一步过来，最终将做出一个实时的 Web 应用，在此期间，我们会随时解决新出现的问题，并讨论 React 对这些问题的解决方案。我们还将了解 Flux，它实现了一个单向的数据流。通过 Flux 和 React，我们能够写出可预料和可管理的应用代码，将来添加代码就可以增加它的功能，而不会增加项目的复杂度。不管你添加多少新功能，这个 Web 应用的工作模式会一直保持不变。

新技术与已往的技术总会有所不同，React 也不例外。实际上，React 的一些核心概念可能与我们的直觉相反，它们会激发我们深度思考，甚至会让我们感觉是在开历史的倒车，但不要急于下结论。正如你所想的，React 这么设计是有足够理由的，毕竟经验丰富的 Facebook 工程师在生产环境下的核心业务开发中构建和使用了 React。我建议大家保持开放的思维来学习React，我相信在阅读完这本书后，大家会理解并认同这些新概念。

请跟随本书一起开启 React 的学习之旅，听从 Charles FKettering的建议，为我们的未来好好打算打算!

了解我们的项目

我坚信学习新技术的最佳动力是一个让人兴奋的迫不及待想去构建的项目。作为一位经验丰富的开发者，你可能开发过许多成功的商业项目，这些项目共享了一些类似的功能和设计模式，甚至还包括目标用户。本书将带大家开发一个令人耳目一新的项目，一个你在日常工作中不太可能会做的项目。这个项目不仅是一个有趣的尝试，让你能通过它学到新知识，而且也会满足你的好奇心，并拓展你的想象空间。当然，考虑到你也很忙，所以这个项目不会耗费太长的时间。

这个项目的名字是 Snapterest，是一个发现并收集发布在 Twiter上的公开照片的 Web应用。可以认为它是一个照片仅来源于 Twitter的 Pinterest。换句话说，我们将实现一个有以下核心功能的网站∶

实时收集和展示推文。

在集合中添加和删除推文。

查看收集的推文。

将推文信息导出为一段 HTML 代码以供分享。

当开始开发一个新项目时，要做的第一件事就是准备好所使用的工具。对于这个项目来说，你可能不熟悉我们将要使用的工具，所以让我们先来介绍一下它们，以及如何对其进行安装和配置。

如果在安装和配置这些工具的过程中有任何的问题，可以上 https∶//github. com/fedosejev/react-essentials提交一个issue，描述清楚你是怎么做的，得到的错误信息是什么，我会尽力帮助你解决这些问题。

在本书中，我将假定你使用 Mac 或者 Windows 来做开发，如果你是一个 Unix的开发者，那么你应该非常了解自己的包管理工具，使用它来安装本章中需要的工具应该没什么问题。

让我们从安装 Node.js 开始。

安装 Node.js 和 npm

Node.js 是一个允许我们使用熟悉的客户端语言—— JavaScript 来编写服务端代码的运行环境。它提供了事件驱动和非阻塞的 LI/O模型，这使得 Node，is 适用于数据密集型和实时的应用程序。这意味着，当在我们的项目中使用Node.js，一旦在推文消息流到达服务器，我们就可以对消息流进行处理——而这真是我们想要的。

开始安装Node.is，我们安装的版本是y0.10.40，因为在写本书的时候 Jest 支持的最高版本的Node.js 就是 v0.10.40（Jest是一个Facebook 出品的测试框架，第8章会介绍它）。

【下载地址】

链接：https://pan.baidu.com/s/1nlDbWZYKjvP29btLxavu-w

提取码：0zik