其他分享
首页 > 其他分享> > 如何在 React 中制作天气应用程序

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

作者:互联网

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

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

在 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 格式的结果。之后,我们更新了天气和查询状态。

标签:python,数据,语言,NumPy,ipython,shell,科学家
来源: