标签：python 数据 语言 NumPy ipython shell 科学家

在本文中，我们将在反应中制作一个天气应用程序。在这个项目中，我们将使用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>
    <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,科学家
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。