使用 React.js 创建天气应用 - 第一部分

介绍

大家好！在本系列中，我将向你展示如何完全使用 React.js 创建一个天气预报应用。该应用使用了React Hooks 、 OpenWeatherMap和Google Geocoding Services的 API 调用，以及一些 CSS 模块，使其完全响应式（当然，外观也很漂亮）。让我们开始吧！

先决条件

• 节点 >= 8.10
• npm >= 5.6
• 文本编辑器（推荐使用 VSCode）。
• 对 Reactjs 和 React Hooks 有一些先前的了解。
• 熟悉使用命令行工具。
• git/github 的使用是可选的，但建议使用。

开始

1.创建 React 文件夹

首先，打开一个新终端，并使用 create-react-app 命令在名为 react-weather 的目录中初始化一个新的 react-app：

npx create-react-app react-weather

这将创建一个模板 Reactjs 应用程序，我们可以修改它以使其成为我们自己的应用程序。

2.清理模板

我们不会使用模板创建的所有文件或代码段，所以让我们花点时间清理一下工作区。我们可以继续删除所有这些文件：

• 自述文件.md
• /src目录中的所有文件
• /public目录中除index.html、manifest.json和 robots.txt之外的所有文件
• 我们可以删除index.html中所有注释行

3. 创建初始组件

现在我们的 src 文件夹是空的，如果我们运行应用程序，网页上什么都不会渲染。为了创建我们的第一个组件并查看它的实际效果，我们需要两个文件：index.js和App.js。目前，每个文件看起来都像这样：

index.js

App.js 现在，我们终于可以开始创建我们的天气预报应用程序了！

使用钩子

由于这是一个天气预报应用，我希望向用户提供他们初始位置的天气预报，之后他们可以选择查找其他城市的数据。为此，我们将使用Geolocation API 中的useEffect()钩子、useState()钩子和getCurrentPosition()函数。

因此，当用户启动应用时，我们希望获取他们当前的地理坐标，并将其作为对象存储在 state 中。如下所示：

哇！这些代码是从哪儿来的？让我解释一下。

useState()

useState() 钩子用于设置 React 组件的状态。它返回两个值，我们可以通过声明一个数组来获取它们。首先，是我们要设置的状态变量的默认值（在本例中为一个空对象）。其次，是一个函数，我们可以稍后调用它来设置此状态变量的值。

useEffect()

useEffect() 是一个巧妙但功能强大的钩子。它在首次渲染后以及每次更新后运行。通过指定一个空数组作为第二个参数，我们可以告诉此钩子仅在首次渲染时运行。如果我们用一个或多个状态变量填充该数组，则该钩子将在这些变量中的任何一个发生变化后运行。
因此，此钩子将在页面渲染时运行，它会请求用户授予访问其位置的权限，并将该位置数据保存在状态中。

现在，应用启动后，它会立即询问用户的位置信息。如果用户允许地理定位，我们会将其坐标作为对象存储在状态中。以后我们会处理用户屏蔽位置信息的情况，目前我们假设用户始终允许我们知道他们的当前位置。

您可以看到我们有一个按钮，用于将地质信息显示到 DevTools 控制台。试试看！