第19天 #100DaysOfCode — 构建旅游应用（第1部分）

Source: Dev.to

为什么要做旅游应用？

我想要一个能够让我练习以下内容的项目：

• API 集成
• 自定义 Hook
• 可复用的 UI 组件
• 多页面路由
• 使用 useQuery 处理异步数据
• 使用 Zustand 进行状态管理

相较于我的天气应用，这个项目让我更深入地接触真实世界的 React 架构。

项目结构（截至目前）

以下是我使用的文件夹结构：

src/
 ├── components/
 ├── pages/
 ├── data/
 ├── hooks/
 └── App.jsx

components/

存放所有可复用的 UI 元素，例如：

• Navbar
• Footer
• HeroSection
• 卡片
• 可复用的布局块

pages/

包含 React Router 将渲染的完整页面组件：

• Home
• About
• Contact
• Booking
• Destinations

data/

包括演示/静态的 JSON 数据，我可以在构建布局时展示它们——在完全集成 API 之前非常有帮助。

hooks/

使用以下内容的自定义 Hook：

• useQuery
• axios

这些 Hook 用于获取 API 数据并提供给需要的组件。

🌐 我使用的 API

在这个旅游应用中，我使用了两个公共 API：

1. Unsplash API

用于获取美丽的目的地图片。

2. RestCountries API

用于获取国家名称、国旗、人口、地图、语言等信息。

这两个 API 共同帮助我构建真实的旅游数据。

🏁 今天的工作内容

今天的主要任务是搭建应用的核心结构。我专注于创建所有页面、核心组件、示例数据，并设置了第一个用于处理图片的自定义 Hook。

📄 已完成的页面

• Home
• About
• Contact
• Booking

这些页面已经搭好框架，待 API 集成完成后即可填充动态内容。

🧩 已构建的组件

• Navbar
• Hero Section
• Footer
• Booking Form

这些组件为应用提供了一致的布局和干净的用户交互起点。

📁 数据文件夹设置

在 data 文件夹中，我添加了两个文件：

• tour.js – 包含静态的旅游信息
• testimonials.js – 保存演示用的用户评价

这有助于在后期获取真实数据之前，使 UI 功能完整且视觉完整。

自定义 Hook：useImages

hooks 文件夹现在包含一个名为 useImages 的自定义 Hook。该 Hook 使用 Unsplash API 获取图片并在 HeroSection 中显示。它与以下内容配合使用：

• axios – 用于发起 API 请求
• useQuery – 用于处理缓存、加载状态和错误

通过此设置，Hero 区段现在能够动态显示真实图片，而不再是静态占位图。

今日总结

• 完成了所有主要页面
• 构建了关键的布局组件
• 添加了旅游和用户评价的演示数据
• 创建了一个自定义 Hook，从 Unsplash 获取真实图片
• 将该 Hook 连接到 Hero 区段，实现动态视觉效果

这是一个重要的结构化工作日，项目正式开始呈现出真实应用的雏形。

接下来：第 20 天 第 2 部分 🚀