React学习手册

前言

本书是专门为希望学习React脚本库，同时也希望学习当前JavaScript语言最新特性的开发人员而编写的。成为一名JavaScript开发人员时是激动人心的。这个生态系统中的新工具、语法和最佳实践如雨后春笋般层出不穷，从而确保用户可以解决开发过程中的大部分问题。本书的目标是将这些技术有机地组织起来，以便用户可以通过正确的方式使用React。我们还将介绍Redux、React Router，以及构建工具，因此我们将承诺不会只介绍一些基本知识后，就让你投入实际开发工作。

本书并不要求你事先了解任何与React有关的知识。我们会从头开始介绍React的基础知识。同样，我们也不会假设你已经了解ES6或者其他最新的JavaScript语法。这些内容将会在第2章详细介绍，并作为后续章节的基础。

如果你对HTML、CSS和JavaScript已经非常熟悉，那么实际上就已经为阅读本书做好了准备。在深入了解JavaScript脚本库之前，这三大技术几乎是最关键和最适合事先了解的。

第1章 初识react

React是一款用于创建用户界面的流行库。它是Facebook为了辅助数据驱动的大型网站解决某些问题而研发的。2013年React刚发布时，该项目受到了外界的一些质疑，因为React的技术规范非常独特。

为了不让新用户望而却步，React核心团队编写了名为"Why React"的文章建议读者"给它（即React）5分钟"。他们鼓励人们摒弃先入为主的观念，先了解一下React再对它评判也不迟。

的确，React是一款小型脚本库，并不能满足用户即插即用构建自己应用程序的所有需求。那么请给它5分钟。

的确，在React中，开发工作就像在JavaScript中编写HTML代码。当然，这些标签需要经过预处理才能在浏览器中工作。用户可能还需要类似webpack这类构建工具处理这些事情。那么请给它5分钟。

如果你像我们一样读到了这篇文章，你也许会被层出不穷的JavaScript库允诺的功能弄得眼花缭乱，即一个能够解决所有和DOM相关问题的脚本库;该库可以大幅度减轻我们的工作量，并且还不会让我们陷入沮丧。

然后问题接踵而至∶如何转换JSX格式?如何载入数据?在哪里存放CSS文件?什么是声明式编程?每种问题又会引出更多问题，比如用户如何将该库集成到日常的工作中。每种规范又引入新术语、新技术和更多间题。

障碍和绊脚石

花几分钟时间学习了React组件的相关知识之后，读者应该会了解到与以往不同的一种Web开发方式。不过在用户开始使用React编写程序之前还有不少障碍需要克服。

React 是一个脚本库

首先，React是一款小型脚本库，并且只能完成部分工作。它并没有像一般的 JavaScript框架那样附带用户需要的所有工具。开发生态环境中所需的大部分工具需要用户自主选择。此外，新工具的不断涌现，旧的工具就会被取而代之。随着越来越多的库名称出现在团队讨论中，真有点让人应接不暇。

新的 ECMAScript语法

React相对于JavaScript历史来说，正处于一个非常重要而又混乱的时代。ECMA过去发布相关规范的频率非常低。有时需要长达10年才发布一版新规范。这意味着开发者不需要花太多时间学习新的语法。

自2015年以来，每年都会有新的语言特性和语法发布。最近一年多（ECMAScript 2016，ECMAScript 2017）甚至更新了数个版本系统（ECMAScript3，ECMAScript 5）。随着该语言的发展，React社区的早期使用者倾向于使用新的语法。这通常意味着开发文档会假定用户是了解最新的ECMAScript语法的。如果用户不熟悉最新的语法规范，那么浏览React代码时就会晕头转向。

JavaScript函数式编程的兴起

除了语言层面上出现的变化之外，JavaScript函数式编程也后劲十足。JavaScript不一定必须是一门函数式编程语言，不过可以在JavaScript代码中使用函数式编程范式。 React鼓励用户使用函数式编程胜过面向对象编程。这种思维转变可以在程序的可测试性和执行性能方面获得更多好处。不过大量的React材料采用了上述编程范式时，学习曲线也变得异常陡峭。

JavaScript工具审美疲劳

JavaScript工具审美疲劳（http∶//bit.1y/2pSiuE4）已经是老生常谈了，不过归根结底这个问题是由构建过程产生的。在过去，用户只需将JavaScript文件添加到自己的页面即可。而现在JavaScript文件通常都必须经过编译，通常还伴随着一个自动化持续分发过程。新兴的语法必须经过转换以便可以在大部分浏览器上运行。JSX格式的文件必须转换成JavaScript文件。SCSS文件有可能还需要进行预处理。这些组件也需要通过测试。用户也许会爱上React，但是现在必须先成为一名使用webpack的专家，处理代码分割、压缩和测试等工作。

React易于上手的原因

本书的目标是通过将相关材料有机地组织起来，避免读者在学习过程中产生混乱，同时也为后续的学习打下坚实的基础。我们将从学习新的语法开始，让读者了解JavaScript的新特性，特别是React中经常用到的。然后我们将会简要介绍一下 JavaScript的函数式编程，使得用户能够马上应用这些技术，并理解上述范式对React产生的重要影响。

然后我们将通过向读者介绍第一个React组件来讲解相关的基础知识，同时还会阐述如何转换代码和必须这么做的原因。在了解相关基础知识之后，我们将会向读者介绍一个可以保存和调整颜色的新应用示例。该应用将会使用React构建，并使用若干高级React技术进行优化，采用Redux作为客户端数据容器，通过Jest测试和React路由完成该应用的构建。最后一章，我们将会介绍通用的同构代码，并通过在服务器端渲染来提高颜色管理器应用的性能。

我们希望以这种方式加速读者对React生态系统的深入了解，而非浅尝辄止。同时可以让读者掌握在实际工作中构建React应用必备的技能和工具。

React技术展望

React仍然很年轻。它的核心功能已经非常稳定，不过还是有改善空间的。React的未来版本将会加入纤程，以及旨在提高渲染速度的核心算法的重新实现。这些特性对于开发者会产生重大影响的观点还为时过早，不过这将大幅度提高应用App渲染和更新的效率是毋庸置疑的。

许多必要的改进都和目标设备有关。本书介绍的技术主要是通过React开发单页Web应用的，不过我们不应该假定Web浏览就是React应用App可以运行的唯一场景。2015年诞生的React Native项目允许用户将React应用转换成原生的iOS和Android应用App。 React VR是一个构建交互式虚拟现实应用的框架，开发者可以使用React和JavaScript为用户提供360°的全景体验。React库的一条命令就可以帮助开发者构建跨屏幕和设备的快速开发环境。

我们希望能够为用户提供一个坚实的平台，这个平台能够适应不断变化的开发生态环境，并且构建的应用可运行的平台不仅仅局限于Web浏览器。

拥抱变化

React和相关工具的发展可谓日新月异，有时甚至是一些革命性的变化。事实上，这些工具的某些未来版本和本书目前介绍的内容也可能大相径庭。用户仍然可以放心地运行本书的代码示例。我们将会在package.json文件中提供精确的软件版本信息，因此读者在安装相关版本时大可放心。

除了本书之外，读者仍然可以通过React官方博客。了解该项目的最新动态。当React有新版本发布时，核心团队将会撰写博文介绍该版本的细节和新的功能特性。

还有不少流行的React技术峰会可供读者追踪它的最新动态。如果用户不能亲临会场，React技术峰会还会将会议内容录制成视频放在YouTube视频网站上供用户浏览。这些峰会主要包括∶

【下载地址】

链接：https://pan.baidu.com/s/1rea1vDswCcgm3dHaaPMPGQ

提取码：1kw1