如何在 React 中制作天气应用程序

在本文中，我们将在反应中制作一个天气应用程序。在这个项目中，我们将使用openweather API，它为我们提供免费的API来获取天气详细信息。在这里，我们将添加一个输入字段，用户将在其中添加任何城市名称，一旦输入城市名称，就会发生 API 调用，详细信息将被提取到屏幕上。此应用程序将完全取决于API。

所以基本上这将是一个适合初学者的项目，所以让我们一步一步地制作这个项目。

在 React 中制作计算器的先决条件

• ReactJS的基本知识。
• React 钩子的基本知识。
• 对 React 组件有很好的了解。

添加 API 和密钥

现在，在进入代码之前，让我们获取将用于此项目的 API 和密钥。为此，我们必须移动到 openweather.org 站点，然后登录以获取API密钥。之后，在我们的 App.js 组件中，我们添加了一个常量，在该常量中，我们将 API 密钥分配给键常量，并在基本常量中提供了一个 URL。此外，我们有两张很酷的图片，在某些特定条件下我们会有所不同。

import React, { useState } from 'react';
const api = {
key: "4f8e795dcd6dbf7b9f5276bff095ffc1",
base: "https://api.openweathermap.org/data/2.5/"
}

为应用创建框架

现在让我们转到返回语句，为天气应用创建框架。在这里，我们添加了一个带有类和占位符的输入字段。然后我们添加了另一个

对于位置框，然后添加具有初始位置的位置以检查输出。最后，我们添加了另一个 div，我们将在其中添加日期，我们将使用 DateBuilder 函数获取日期。

'返回 （

<输入
类型=“文本”
类名称=“搜索栏”
占位符=“搜索…”

      />
    </div>
    <div>
      <div className="location-box">
        <div className="location">New York City, US</div>
        <div className="date">{dateBuilder(new Date())}</div>
      </div>
      </div>
  </main>
</div>

);`

创建日期

现在让我们得到今天的日期，为此我们添加了一个名为 dateBuilder（） 的函数，在这里我们添加了包含所有月份名称的月份数组。然后，我们添加了另一个包含所有日期名称的天数数组。“d”也是我们从函数调用中传递的Date（）对象。之后我们为 day 添加一个变量，这里我们使用了 days[d.getDay（）]，getDay（） 是一个获取当前日期的函数。

然后我们获取日期以及类似的月份和年份，它们返回到函数调用。在这里你可以看到我们分别制作了月份和日期的数组，因为 getDay（） 和 getMonth（） 函数分别返回日和月的数字，所以我们只需要月份名称和日期名称而不是数字。

'const dateBuilder = （d） => {
let month = [“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”];
设天数 = [“星期日”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”];

let day = days[d.getDay()];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();

return `${day} ${date} ${month} ${year}`

}`

添加状态

之后，我们必须添加我们的状态，一个用于查询，另一个用于天气。这里的查询用于制作天气 API 的 URL，天气用于详细信息。然后，我们在输入中添加了onChange事件，我们正在调用查询，并且我们还在onKeyPress事件上调用了一个名为search的函数。

function App() {
const [query, setQuery] = useState('');
const [weather, setWeather] = useState({});
return (
<div className=>
<main>
<div className="search-box">
<input
type="text"
className="search-bar"
placeholder="Search..."
onChange={e => setQuery(e.target.value)}
value={query}
onKeyPress={search}
/>
</div>
);}

调用 API 获取结果

现在我们已经定义了搜索函数，其中我们添加了一个条件，其中如果 evt.key 等于 Enter。如果是，那么我们使用了 fetch（），其中我们有 ${api.base}weather？q=${query}&appid=${api.key}&units=metric 这行代码来创建 API 调用，这是 URL 的查询语法，然后我们使用 （res => res.json（）） 来获取 JSON 格式的结果。之后，我们更新了天气和查询状态。