github-actions-creator/docs/react.md

React.js 项目：天气预报 Web 应用

概述

使用 React.js 和天气 API (如 OpenWeatherMap) 构建一个界面美观的天气预报应用。支持全球城市搜索、查看当前和未来天气，并可将城市保存到收藏夹。

功能需求

1. 核心天气功能

• 默认城市: 加载时通过浏览器 Geolocation 获取用户位置天气，若失败则显示默认城市。
• 城市搜索: 提供带自动补全/建议的搜索栏。
• 当前天气: 显示城市名、温度、天气状况及图标、体感温度、湿度、风速等。
• 每小时预报: 水平滚动列表展示未来 24 小时天气。
• 未来天气: 列表展示未来 5-7 天天气预报。

2. 用户体验

• 收藏夹: 允许用户添加、删除和快速切换收藏的城市，使用 localStorage 持久化。
• 单位切换: 提供摄氏度 (°C) / 华氏度 (°F) 切换开关。
• 状态显示: API 请求时显示加载指示器，请求失败时显示错误消息。
• 响应式设计: 适配桌面和移动设备。

技术栈

• 框架: React.js 18+ (函数组件和 Hooks)
• 脚手架: Vite 或 Create React App
• 状态管理: React Context API 或 Zustand / Redux Toolkit
• 数据请求: React Query (@tanstack/react-query) + axios/fetch
• 路由: React Router (可选)
• 样式: Styled-Components, Emotion, 或 Tailwind CSS
• 图标: react-icons

项目结构 (Vite)

/react-weather-app
├── src/
│   ├── api/                # API 请求逻辑
│   ├── components/         # UI 组件
│   ├── hooks/              # 自定义 Hooks
│   ├── contexts/           # React Context
│   ├── pages/              # 页面组件
│   ├── App.jsx
│   └── main.jsx
├── .env                    # 存放 API 密钥
└── package.json

任务步骤

1. 初始化: 使用 Vite 创建 React 项目。
2. API准备: 获取 OpenWeatherMap API 密钥并存入 .env 文件。
3. API层封装: 创建模块封装所有对天气 API 的调用。
4. 状态管理: 使用 React Query 的 QueryClientProvider 包裹应用，并创建所需 Context。
5. 组件开发: 创建 SearchBar, CurrentWeather, HourlyForecast 等核心 UI 组件。
6. 数据请求: 使用 useQuery 获取天气数据，自动处理加载和错误状态。
7. 搜索功能: 使用 useDebounce Hook 优化搜索 API 调用。
8. 收藏夹功能: 使用 localStorage 和 Context API 实现城市的增、删、查、改。
9. 地理定位: 加载时调用 navigator.geolocation 获取用户位置作为初始查询。
10. 样式: 美化应用并确保响应式布局。

先行任务: 设计应用的主要界面线框图，并规划好 API 数据到 UI 组件的映射。