React快速上手开发

前言

前言

大约 2000 年，洛杉矶。这又是一个温暖舒适的加利福尼亚之夜，淡淡的海风轻轻拂来，舒爽惬意。我正准备使用 FTP 把我新建的站点 CSSsprites.com 传送到服务器并向全世界发布。在发布的前几个晚上，我一直在思考一个问题：“到底为什么只把 20% 的工作量放在解决应用的主要问题上，却把剩下的 80% 花费在努力克服用户界面的问题上呢？”如果能把所有调用 getElementById() 和考虑应用状态（用户上传是否完成？如果上传出错，上传对话框是否要继续显示？）的时间节约出来，我能利用这部分时间完成多少其他的工具呢？为什么界面开发这么耗时？如何处理不同浏览器之间的差异？想到这些，我的大好心情荡然无存。

时间快进到 2015 年 3 月。在当时召开的 Facebook F8 开发者大会上，我所在的团队准备公布两个完全重写的 Web 应用：一个第三方评论模块和一个配套的评论审核工具。和我的小应用 CSSsprites.com 相比，这两个应用非常成熟，功能也复杂得多，并且流量非常大。虽然如此，其开发过程依然令人愉悦。团队中的新成员（甚至包括刚接触 JavaScript 和 CSS 的新手）都能很快地融入其中，轻松高效地贡献功能特性并改进现有代码。团队中的一个成员说：“现在我发现这就是自己热爱的一切！”

在这段时间里发生了什么？答案是：React 诞生了。

React 是一个 UI 库，让你只需定义一次用户界面，就可以将其用在多个地方。之后，当应用的状态（state）发生变化时，React 将会自动作出反应、更新界面，你无需做其他任何工作。毕竟你已经定义了用户界面。尽管说是定义，其实代码更加偏向声明式，你可以使用可管理的小型组件构造出一个强大的应用。你再也不需要在函数里花费一半的代码量寻找 DOM 节点了，而是可以只维护应用的状态（通过常规的 JavaScript 对象），把剩下的工作都交给 React 帮你完成。

学习 React 非常划算。一旦学会这个库，便可以使用它构建以下类型的应用：

  • Web 应用

  • 原生 iOS 和 Android 应用

  • Canvas 应用

  • TV 应用

  • 原生桌面应用

你可以使用与构造组件和用户界面相同的思路，创建具有原生应用性能和控制能力的原生应用（真正的原生控制，而不仅仅是看起来像原生）。这并不是指“一次编写，到处运行”（我们的技术尚未实现这一点），而是“一次学习，到处使用”。

简而言之，学习 React 可以帮你节省 80% 的时间，使你可以把精力集中在主要问题上（比如你的应用存在的真正目的）。

关于本书

本书从 Web 开发的角度介绍如何学习 React。在前 3 章，你将从一个空白的 HTML 页面开始构建应用。这使得你可以将关注点放在 React 本身，无需了解任何新语法或者辅助工具。

第 4 章介绍 JSX。这是一项单独、可选的技术，通常会同 React 一起使用。

从第 5 章开始，你将学习在实际开发中可能用到的一些附加工具。介绍的例子包括 JavaScript 打包工具（Browserify）、单元测试（Jest）、语法检查（ESLint）、类型（Flow）、在应用中组织数据流（Flux）以及不可变数据（Immutable.js）。所有关于这些辅助技术的讨论都会力求简化，让你依然将精力放在 React 上。你会很快熟悉这些工具的使用，并能根据具体情况选择使用哪些工具。

祝你在学习 React 的过程中一切顺利，大有收获！

排版约定

本书使用下列排版约定。

  • 等宽字体（Constant width）

    表示广义上的计算机编码，包括变量或函数名、数据库、数据类型、环境变量、语句和关键字。

  • 等宽粗体（Constant width bold）

    表示应该由用户按照字面输入的命令或其他文本。

  • 等宽斜体（Constant width italic）

    表示应该由用户替换或取决于上下文的值。

　该图标表示提示或建议。

　

　该图标表示一般说明。

　

　该图标表示警告或提醒。

代码示例

补充材料（包括代码示例、练习题等）可以从 https://github.com/stoyan/reactbook 下载。

本书旨在帮助你做好工作。一般来说，你可以在程序和文档中使用本书的代码。除非你使用了很大一部分代码，否则无需联系我们获取许可。例如，使用来自本书的几段代码编写一个程序不需要许可。销售和分发 O'Reilly 书中用例的光盘需要许可。通过引用本书用例和代码来回答问题不需要许可。把本书中的大量用例代码并入你的产品文档需要许可。

我们很希望但不强求注明信息来源。一条信息来源通常包括书名、作者、出版社和 ISBN。例如：“React: Up & Running by Stoyan Stefanov (O'Reilly). Copyright 2016 Stoyan Stefanov, 978-1-491-93182-0”。

如果你感到对示例代码的使用超出了正当引用或者这里给出的许可范围，请随时通过 permissions@oreilly.com 联系我们。

Safari® 在线图书

Safari Books Online（http://www.safaribooksonline.com）是应运而生的数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。技术专家、软件开发人员、Web 设计师、商务人士和创意专家等，在开展调研、解决问题、学习和认证培训时，都将 Safari Books Online 视作获取资料的首选渠道。

对于组织团体、政府机构和个人，Safari Books Online 提供各种产品组合和灵活的定价策略。用户可通过一个功能完备的数据库检索系统访问 O'Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology 以及其他几十家出版社的上千种图书、培训视频和正式出版之前的书稿。要了解 Safari Books Online 的更多信息，我们网上见。

联系我们

请把对本书的评价和问题发给出版社。

美国：

　　O'Reilly Media, Inc.

　　1005 Gravenstein Highway North

　　Sebastopol, CA 95472

中国：

　　北京市西城区西直门南大街 2 号成铭大厦 C 座 807 室（100035）

　　奥莱利技术咨询（北京）有限公司

O'Reilly 的每一本书都有专属网页，你可以在那里找到本书的相关信息，包括勘误表、示例以及其他信息。本书的网站地址是：

　　http://shop.oreilly.com/product/0636920042266.do

对于本书的评论和技术性问题，请发送电子邮件到：

　　bookquestions@oreilly.com

要了解更多 O'Reilly 图书、培训课程、会议和新闻的信息，请访问以下网站：

　　http://www.oreilly.com

我们在 Facebook 的地址如下：

　　http://facebook.com/oreilly

请关注我们的 Twitter 动态：

　　http://twitter.com/oreillymedia

我们的 YouTube 视频地址如下：

　　http://www.youtube.com/oreillymedia

致谢

感谢在本书组稿的不同阶段阅读本书并给我发送反馈和修正意见的所有人：Andreea Manole、Iliyan Peychev、Kostadin Ilov、Mark Duppenthaler、Stephan Alber 和 Asen Bozhilov。

感谢 Facebook 每天开发或者使用 React 以及回答我问题的所有同事。此外还要感谢为 React 提供工具和库以及撰写文章和使用说明的 React 开发者社区。

非常感谢 Jordan Walke。

感谢 O'Reilly 的所有人，本书的出版离不开你们的努力：Meg Foley、Kim Cofer、Nicole Shelby 等。

感谢 Yavor Vatchkov 为本书中的示例应用设计了用户界面（可以在 whinepad.com 体验）。

电子书

扫描如下二维码，即可购买本书电子版。

{%}

目录