应用说明

让我们使用 React(typescript)、Weather API、sass 和 react hooks 创建一个基本的天气应用程序

Github 回购

现场演示

让我们设置我们的工作区

使用 create-react-app 创建我们的反应项目

npx create-react-app basic-weather-app --template typescript

进入全屏模式 退出全屏模式

现在让我们配置 linter、jest 等。

npx cra-to-nx

进入全屏模式 退出全屏模式

这将配置我们的开发工具

npm 包

yarn add axios @fortawesome/fontawesome-free react-i18next i18next i18next-browser-languagedetector

进入全屏模式 退出全屏模式

• 用于我们的 HTTP 请求的 Axios

• fontawesome 显示很棒的图标

• i18next 为我们的应用程序添加国际化

• i18next-browser-languagedetector 检测用户默认语言并将其设置为我们的默认语言

文件夹结构

NX 创建了一个更大的文件夹结构,但这是我们项目的最终结构

 ─src
    ├───assets
    │   ├───design -> Design system
    │   │   ├───components
    │   │   ├───fonts
    │   │   ├───globals
    │   │   └───util
    │   ├───i18n -> Translations
    │   │   ├───en
    │   │   └───es
    │   └───images
    ├───components
    │   └───landing
    ├───custom-hooks
    ├───functions
    ├───interfaces
    └───services

进入全屏模式 退出全屏模式

添加天气API

让我们在创建一个帐户 Weather API

创建帐户后,让我们为Current Weather Data创建一个 API 密钥

注意:您需要等待 2 小时才能激活您的 api 密钥

让我们添加我们的 i18next 配置

(资产/i18n)

我只是为 EN 和 ES 添加了一个基本的翻译文件,你可以在src/assets/i18n找到它们

让我们将天气服务添加到我们的项目中

1. 如果您还没有创建services文件夹,请创建它并在其中创建一个名为weather-service的新ts文件

2. 以免创建我们的接口 这些接口将作为天气 API 响应和其他用途的数据模型。

• CurrentWeatherI (interfaces/current-weatherI.ts) 天气 API 响应的数据模型

• WeatherPropertiesI (interfaces/weather-properties.ts) 天气 API (interfaces/) 请求的数据模型

1. 现在让我们创建 3 个函数

• 当前天气

此函数将通过坐标检索天气数据

• 获取天气城市

此函数将按城市名称检索天气数据

• 获取天气图标

currentWeahter 和 getWeatherCity 将在其属性中返回一个图标代码,此代码将用于检索图标图像以显示在我们的应用程序中

(服务/天气服务.ts)

2. 现在我们有了应用程序的服务,让我们创建一个函数来根据当前天气获取正确的背景图像

为了实现这一点,首先,我们需要检查他们当前的天气 API 文档中的天气代码天气代码,我决定按范围对代码进行分组,但你可以更深入。

(functions/weather-background.ts)

您可以使用与我相同的图像,您可以在我的源代码中找到它们github

或者搜索你自己的,我在unsplash找到了我的图片

我们下一步是构建一个自定义挂钩来获取客户端的经纬度

为此,我们将使用 window.navigator.geolocation

(自定义挂钩/使用位置.ts)

这个钩子将为我们提供用户的当前位置,所以现在我们可以请求当前位置的天气。

现在让我们创建我们的主要组件

(组件/landing.tsx)

在这个组件中,我们将使用下一个元素

• 2个按钮,一个搜索位置输入,一个返回当前位置天气

• 1 个用于搜索地点的输入字段

• 显示天气信息的卡片组

使用我们的自定义挂钩使用位置

构建我们组件的第一步是连接我们的使用位置自定义钩子以获取用户位置并询问当前天气

现在我们已经存储了位置,让我们将它作为依赖传递给 useEffect 钩子,这样每次位置变量发生变化时,效果都会执行 getWeather 函数; getWeather 函数将调用 getWeather 回调,等待服务响应,然后将结果存储在天气状态;然后调用getWeatherIcon和readWeatherImage函数,该函数将分别更新watherIcon和weatherImage的状态,weatherImage的变化将触发效果将图像设置为body标签背景图像属性值。

现在我们有了天气、weatherImage 和 weatherIcon,我们可以使用这些数据将其显示给用户。

(组件/登陆/登陆.tsx)

在哪里可以了解更多关于构建这样一个基础项目的主题?

• (反应钩子)[https://reactjs.org/docs/hooks-intro.html]

• (反应自定义钩子)[https://reactjs.org/docs/hooks-custom.html]

• (geolocation api)[https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API]

• (react-18n-next)[https://react.i18next.com/]

• (react-form-hooks)[https://react-hook-form.com/get-started]

• (Nx)[https://nx.dev/latest/react/getting-started/intro]

sass解释在哪里??

我将写第二篇文章来介绍项目的设计

让我们创建一个简单的天气应用程序 - 第 2 部分