Jim~LoveQ的博客

本文转载自：众成翻译译者：iOSDevLog链接：https://www.zcfy.cc/article/fullstack-react-displaying-remote-data原文：https://www.fullstackreact.com/30-days-of-react/day-16/这篇文章是30 Days of React系列的一部分。在本系列中，我们将从最基本的开始，逐步了解开始React所需的所有知识。如果你曾经想学习反应，这是开始的地方！30 Days of React.

本文转载自：众成翻译译者：iOSDevLog链接：https://www.zcfy.cc/article/3814原文：https://www.fullstackreact.com/30-days-of-react/day-15/这篇文章是30 Days of React系列的一部分。在本系列中，我们将从最基本的开始，逐步了解开始React所需的所有知识。如果你曾经想学习反应，这是开始的地方！30 Days of React PDF版本下载：下载超过300页的 PDF今天，我们将要看看我们.

今天我们来看一下调用外部API的第一步。直到这一点,我们的应用基本上是静态的。即使我们从 github 显示的数据也是我们项目中包含的静态数据。我们的应用确实和我们使用的数据一样有趣, 因此让我们的应用更有趣。查询远程数据正常的浏览器工作流实际上是同步的。当浏览器接收 html 时, 它将解析 html 内容的字符串并将其转换为树对象 (这就是我们通常所指的 DOM 对象/DOM 树)。当浏览器解析 DOM 树时, 当它遇到远程文件 (如and标记) 时, 浏览器将请求这些文件 (并行), 但

今天，我们将通过如何显示多个组件来准备将外部数据引入我们的应用。我们已经构建了一个没有任何外部数据的基本应用。在我们实现之前 (我们将在明天开始这个功能), 让我们来看看过去两周中我们所掩盖的事情:重复元素我们已经看到了这之前, 我们已经遍历了一个对象列表, 并在屏幕上呈现多个组件。在我们的应用中添加太多的复杂度来加载外部数据之前, 今天我们将快速了解如何在应用中重复组件/元素。

今天，我们将添加一个构建过程来存储常见的构建操作，以便我们可以轻松地开发和部署我们的应用。React小组注意到运行一个React应用需要很多配置（并且社区帮助臃肿 - 包括我们也是如此）。幸运的是，React团队/社区中的一些聪明人员聚集在一起，构建/发布了一个官方的生成器应用，使其更容易上手并快速运行。create-react-app通过Facebook发布的create-react-app项目可帮助我们快速启动并运行我们系统上的React应用，无需自定义配置我们的一部分

今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。我们已经研究了几种不同的方法来构建反应组件。 通过这一点我们遗漏的一种方法是构建React组件的无状态组件/功能方法。正如我们已经看到的那样，我们只使用React.Component 和React.createClass() 方法构建组件。 为了获得更多的性能和简单性，React 同样允许我们使用正常的JavaScript函数创建纯粹的，无状态的组件。

今天，我们将介绍如何添加交互性到我们的应用，使其具有吸引力和交互性。通过这一点，我们构建了少数几个组件，而没有添加用户交互。 今天我们将要改变它。用户交互浏览器是事件驱动的应用程序。 用户在浏览器中进行的一切都会触发一个事件，从点击按钮，甚至只是移动鼠标。 在简单的JavaScript中，我们可以监听这些事件并附加一个JavaScript函数与它们进行交互。

今天，我们将花点时间去了解我们的React组件的样式，使它们看起来很棒，但仍然保持完整。我们来看几种不同的方式来组合一个组件。 1. 级联样式表(CSS) 2. 内联样式 3. 样式库

React的`PropTypes`对象导出一堆不同的类型，我们可以用它来定义组件的`prop`应该是什么类型的。 我们可以在ES6类风格的React prop中使用`propTypes`方法来定义它们

今天，我们将看看我们可以用于React组件的一些最常见的生命周期钩子函数，我们将讨论为什么它们是有用的，什么时间应该用什么.

今天我们开始了解React中有状态组件的工作原理，并且看看我们何时以及为什么要使用状态。我们几乎完成了在React开始运行的第一周。我们通过JSX工作，构建我们的第一个组件，设置父子关系，并使用React驱动组件属性。我们还有一个重要的想法，我们还没有讨论React _状态_相关的知识。

今天，我们将把我们的组件设置为由数据驱动，访问外部数据。通过这一点，我们已经编写了我们的第一个组件并将其设置为子/父关系。但是，我们还没有将任何数据绑定到我们的React组件。虽然在React中写一个网站是一个更愉快的体验（在我们看来），我们还没有利用React的力量来显示任何动态数据。

在本节中，我们将继续使用我们的`App` 组件，并开始构建一个更复杂的UI。我们可能会看到一个常见的网页元素是用户时间轴。例如，我们可能会有一个应用显示事件发生的历史，如Facebook和Twitter等应用。我们可以在单个组件中构建整个UI。然而，在单个组件中构建整个应用不是一个好主意，因为它可能非常大，复杂且难以测试。

这个系列的前两篇文章是很重要的讨论。在今天的课程中，我们来看看一些代码，并写下我们的第一个React应用。

在本文中，我们将介绍React生态系统的一部分：ES6和JSX。在互联网上的任何粗略的搜索寻找React材料，毫无疑问，你已经遇到了术语JSX，ES5和ES6。这些难懂的首字母缩略词可能会很快混乱。ES5（ES 代表ECMAScript）基本上是“常规JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被所有主要浏览器支持多年。因此，如果你在最近写过或看过任何JavaScript，很可能是ES5。

今天，我们从一开始就开始。让我们看看React是什么，是什么让React运转起来。我们将讨论为什么要使用它。在接下来的30天内，您可以体验到React网页框架及其生态系统的各个部分。我们的30天冒险中的每一天都将建立在前一天的材料上，所以在系列结束之后，您不仅可以了解框架如何工作的术语，概念和基础，而且可以在您的 下一个Web应用程序让我们开始吧。 我们将从在零开始因为它是一个非常好的开始的地方。