React Weather App 项目教程

React Weather App 项目教程

react-weather-app ☀️🌤⛈❄️A weather web application using React, Redux, Typescript, Webpack, Ant Design, ECharts and firebase. 项目地址: https://gitcode.com/gh_mirrors/reac/react-weather-app

1. 项目介绍

React Weather App 是一个使用 React、Redux、TypeScript、Webpack、Ant Design、ECharts 和 Firebase 构建的天气 Web 应用程序。该项目展示了如何使用这些技术栈来创建一个功能丰富的天气应用，并且还演示了如何将应用部署到 Google Firebase 以及使用 Google Cloud Functions 的无服务器平台。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保你已经安装了以下工具：

• Node.js 和 npm（最新版本）
• Google Geocoding API Key
• Google Firebase 项目
• Dark Sky 天气 API Key
• Windy API Key
• Mapbox API Key

2.2 克隆项目

首先，克隆项目到本地：

git clone https://github.com/LaurenceHo/react-weather-app.git
cd react-weather-app

2.3 安装依赖

安装项目所需的 npm 包：

npm install

2.4 启动开发服务器

启动 Webpack 开发服务器：

npm run start

启动后，访问 http://localhost:8080 即可在浏览器中查看应用。

2.5 配置 API Keys

将你的 Windy API Key 和 Mapbox API Key 放入 /src/constants/api-key.ts 文件中。

2.6 构建项目

打包前端代码：

npm run build

3. 应用案例和最佳实践

3.1 使用 Google Cloud Functions

该项目展示了如何使用 Google Cloud Functions 来处理后端逻辑。你可以参考 Google Cloud Functions 文档 来编写你自己的云函数。

3.2 部署到 Firebase

将你的 Google Geocoding API Key 和 Dark Sky API Key 放入 /functions/apiKey.js 文件中，并修改 api.ts 中的 CLOUD_FUNCTION_URL 为你自己的 Google Cloud Function URL。

然后，按照以下步骤部署应用：

1. 访问 Firebase 控制台 创建一个新项目。

2. 运行以下命令部署整个项目：

   npm run firebase-deploy
   

3. 如果只想部署云函数，运行：

   npm run deploy-functions
   

4. 典型生态项目

4.1 Webpack 配置

该项目使用 Webpack 来打包和构建前端代码。Webpack 配置文件位于 /config 目录下，包括 webpack.common.js、webpack.dev.js 和 webpack.prod.js。

4.2 TypeScript 和 ESLint

项目使用 TypeScript 进行类型检查，并使用 ESLint 和 Prettier 进行代码风格检查和格式化。

4.3 Ant Design 和 ECharts

Ant Design 提供了丰富的 UI 组件，而 ECharts 则用于数据可视化。这两个库的结合使得项目在界面设计和数据展示方面表现出色。

4.4 Firebase 和 Google Cloud Functions

Firebase 提供了托管和数据库服务，而 Google Cloud Functions 则用于处理后端逻辑。这种组合使得项目能够轻松实现无服务器架构。

通过以上模块的介绍和实践，你可以快速上手并深入了解 React Weather App 项目。

react-weather-app ☀️🌤⛈❄️A weather web application using React, Redux, Typescript, Webpack, Ant Design, ECharts and firebase. 项目地址: https://gitcode.com/gh_mirrors/reac/react-weather-app