Skip to content

Latest commit

 

History

History
180 lines (102 loc) · 13.4 KB

00.md

File metadata and controls

180 lines (102 loc) · 13.4 KB
Raw

零、序言

关于这本书

我从未对开发移动应用感兴趣。我曾经坚信，是网络，或者什么都没有，才不需要在已经充斥着应用的设备上安装更多的应用。然后，事情发生了。我已经在为 web 应用编写 React 代码，并且非常喜欢它。事实证明，我不是唯一一个对使用不同工具、环境和编程语言维护同一应用的多个版本的想法犹豫不决的开发人员。React Native 是出于一种自然的愿望而创建的，即从 web 开发体验的角度（React）来考虑哪些工作良好，并将其应用于本机应用开发。本机移动应用比 web 浏览器提供更好的用户体验。事实证明我错了，我们现在确实需要移动应用。但这没关系，因为 React Native 是一个很棒的工具。这本书本质上是我作为 React 网络开发者和经验较少的移动应用开发者的经历。React-native 对于已经了解 React-for-Web 的开发人员来说是一个简单的过渡。通过本书，您将了解在这两种环境中进行 React 开发的微妙之处。您还将学习 React 的概念主题，React 是一个简单的呈现抽象，可以针对任何对象。今天，它是网络浏览器和移动设备。明天，它可能是任何东西。

这本书涵盖的内容

本书包括以下三个部分：

  • React：第 1 章至第 11 章
  • ReactNative：第 12 至 23 章
  • React 体系结构：第 23 至 26 章

第一部分：React

第一章、*为什么是 React？*介绍了 React 的基本概念，以及您使用 React 的原因。

第 2 章使用 JSX进行呈现，说明 JSX 是 React 用于呈现内容的语法。HTML 是最常见的输出，但 JSX 可用于呈现许多内容，例如本机 UI 组件。

第 3 章理解属性和状态，展示了属性如何传递给组件，以及状态如何在组件发生变化时重新呈现组件。

第 4 章事件处理 React 方式说明 React 中的事件在 JSX 中指定。如何处理事件以及您的代码应该如何响应事件有一些微妙之处。

第 5 章制作可重用组件表明，组件通常使用较小的组件组成。这意味着您必须正确地将数据和行为传递给子组件。

第 6 章React 组件生命周期解释了 React 组件是如何创建和销毁的。在这两者之间还发生了一些其他生命周期事件，您可以在这些事件中执行诸如从网络获取数据之类的操作。

第 7 章验证组件属性表明 React 有一种机制，允许您验证传递给组件的属性类型。这确保没有意外值传递到组件。

第 8 章扩展组件介绍了用于扩展 React 组件的机制。这些包括继承和高阶组件。

第 9 章，处理路线导航，导航是任何 web 应用的重要组成部分。React 使用react-router包以声明方式处理路由。

第 10 章服务器端 React 组件讨论 React 在浏览器中呈现组件时如何将组件呈现给 DOM。它还可以将组件呈现为字符串，这对于在服务器上呈现页面和向浏览器发送静态内容非常有用。

第 11 章Mobile First React Components解释了移动 web 应用与设计用于桌面屏幕分辨率的 web 应用的根本不同。react-bootstrap包可用于以 mobilefirst 方式构建 UI。

第二部分：ReactNative

第 12 章、*为什么要 ReactNative？*显示 React Native 是 React for mobile apps。如果您已经投资 React for web 应用，那么为什么不利用相同的技术来提供更好的移动体验呢？

第 13 章Kickstarting React Native Projects讨论了没有人喜欢编写样板代码或设置项目目录。React Native 拥有自动化这些平凡任务的工具。

第 14 章使用 Flexbox构建响应性布局，解释了为什么 Flexbox 布局模型在使用 CSS 的 web UI 布局中很受欢迎。React Native 使用相同的机制来布局屏幕。

第 15 章在屏幕之间导航讨论了一个事实，即虽然导航是 web 应用的重要组成部分，但移动应用也需要工具来处理用户如何在屏幕之间移动。

第 16 章呈现项目列表显示 React Native 有一个列表视图组件，非常适合呈现项目列表。您只需为它提供一个数据源，其余的由它处理。

第 17 章显示进度解释了进度条非常适合显示一定数量的进度。当你不知道某件事需要多长时间时，你可以使用进度指示器。React Native 具有这两个组件。

第 18 章、地理定位和地图显示react-native-maps包为 React Native 提供了地图功能。web 应用中使用的地理定位 API 由 React Native 直接提供。

第 19 章收集用户输入显示大多数应用需要收集用户输入。移动应用也不例外，React Native 提供了与 HTML 表单元素类似的各种控件。

第 20 章、警报、通知和确认，解释了LERT 用于打断用户，让他们知道发生了重要的事情，通知是不引人注目的更新，确认用于立即获得答案。

第 21 章回应用户手势，讨论了移动设备上的手势是如何在浏览器中很难正确使用的。另一方面，本地应用提供了更好的刷卡、触摸等体验。React Native 为您处理许多细节。

第 22 章控制图像显示展示了图像如何在大多数应用中扮演重要角色，无论是作为图标、徽标还是事物的照片。React Native 具有用于加载图像、缩放图像和适当放置图像的工具。

第 23 章离线解释了移动设备往往具有不稳定的网络连接。因此，移动应用需要能够处理暂时的离线条件。为此，React Native 具有本地存储 API。

第三部分：React 体系结构

第 24 章处理应用状态讨论了应用状态对任何 React 应用、web 或移动应用的重要性。这就是为什么理解 Redux 和 Immutable.js 等库非常重要的原因。

第 25 章为什么 Relay 和 GraphQL一起使用，说明 Relay 和 GraphQL 一起使用是一种处理大规模状态的新方法。它是一种查询和变异语言，加上一个用于包装 React 组件的库。

第 26 章构建 Relay React 应用表明，Relay 和 GraphQL 的真正优势在于，您的状态模式在应用的 web 版本和本机版本之间共享。

这本书你需要什么

  • 代码编辑器
  • 现代网络浏览器
  • NodeJS

这本书是给谁的

这本书是为任何想要开始学习如何使用 Facebook 的两个 UI 库的 JavaScript 开发初学者或专家编写的。不需要 React 知识，尽管 ES2015 的实用知识将帮助您更好地跟进。

公约

在本书中，您将发现许多文本样式可以区分不同类型的信息。下面是这些风格的一些例子，并解释了它们的含义。

文本中的代码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示：“我们没有将实际的Modal组件设置为透明，而是在backgroundColor中设置了透明，这提供了覆盖的外观。”

代码块设置如下：

import React, { Component } from 'react'; 
import { 
  AppRegistry, 
  View, 
} from 'react-native'; 

import styles from './styles'; 

// Imports our own platform-independent "DatePicker" 
// and "TimePicker" components. 
import DatePicker from './DatePicker'; 
import TimePicker from './TimePicker';

任何命令行输入或输出的编写方式如下：

npm install react-native-vector-icons --save
react-native link

新术语和重要词语以粗体显示。您在屏幕上看到的文字（例如，在菜单或对话框中）出现在文本中，如下所示：“同样，与ToastAndroidAPI 相同的原则适用于此处。您可能已经注意到，除了显示通知按钮之外，还有另一个按钮。”

注

警告或重要注释显示在这样的框中。

提示

提示和技巧如下所示。

读者反馈

我们欢迎读者的反馈。让我们知道你对这本书的看法你喜欢还是不喜欢。读者反馈对我们来说很重要，因为它可以帮助我们开发出您将真正从中获得最大收益的标题。

要向我们发送一般反馈，只需发送电子邮件 feedback@packtpub.com，并在邮件主题中提及该书的标题。

如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

既然您是一本 Packt 图书的骄傲拥有者，我们有很多东西可以帮助您从购买中获得最大收益。

下载示例代码

您可以从您的账户下载示例代码文件 http://www.packtpub.com 对于您购买的所有 Packt 出版书籍。如果您在其他地方购买了本书，您可以访问http://www.packtpub.com/support 并注册，将文件直接通过电子邮件发送给您。

您可以通过以下步骤下载代码文件：

  1. 使用您的电子邮件地址和密码登录或注册我们的网站。
  2. 将鼠标指针悬停在顶部的支架选项卡上。
  3. 点击代码下载&勘误表。
  4. 在搜索框中输入图书名称。
  5. 选择要下载代码文件的书籍。
  6. 从您购买本书的下拉菜单中选择。
  7. 点击代码下载。

您也可以通过点击 Packt 出版网站上该书网页上的代码文件按钮下载代码文件。可以通过在搜索框中输入图书名称来访问此页面。请注意，您需要登录到您的 Packt 帐户。

下载文件后，请确保使用以下最新版本解压或解压缩文件夹：

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/React-and-React-Native 。我们在上还提供了丰富的书籍和视频目录中的其他代码包 https://github.com/PacktPublishing/ 。看看他们！

下载本书彩色图片

我们还为您提供了一个 PDF 文件，其中包含本书中使用的屏幕截图/图表的彩色图像。彩色图像将帮助您更好地了解输出中的更改。您可以从以下位置下载此文件：https://www.packtpub.com/sites/default/files/downloads/ReactandReactNative_ColorImages.pdf 。

勘误表

虽然我们已尽一切努力确保内容的准确性，但错误确实会发生。如果您在我们的一本书中发现错误，可能是文本或代码中的错误，如果您能向我们报告，我们将不胜感激。通过这样做，您可以使其他读者免于沮丧，并帮助我们改进本书的后续版本。如果您发现任何错误，请访问进行报告 http://www.packtpub.com/submit-errata ，选择您的书籍，点击勘误表提交表单链接，然后输入勘误表的详细信息。一旦您的勘误表得到验证，您的提交将被接受，勘误表将上载到我们的网站或添加到该标题勘误表部分下的任何现有勘误表列表中。

要查看之前提交的勘误表，请转至https://www.packtpub.com/books/content/support 并在搜索字段中输入图书名称。所需信息将出现在勘误表部分下。

盗版

在互联网上盗版版权材料是所有媒体都面临的一个持续问题。在 Packt，我们非常重视版权和许可证的保护。如果您在互联网上发现任何形式的非法复制品，请立即向我们提供地址或网站名称，以便我们采取补救措施。

请联系我们 copyright@packtpub.com 与怀疑盗版材料的链接。

我们感谢您在保护我们的作者方面提供的帮助以及我们为您带来有价值内容的能力。

问题

如果您对本书的任何方面有疑问，请联系我们 questions@packtpub.com，我们会尽力解决这个问题。