本文是GitHub初学者教程，指导新手使用GitHub Copilot构建React前端应用，以Planventure项目为例。教程详细演示了如何利用Copilot实现用户认证、仪表盘、侧边栏导航以及行程管理等功能，通过逐步指导，帮助开发者快速构建功能完善的React应用。

🔑 **初始设置与环境配置**: 首先，按照教程克隆Planventure仓库，切换到指定分支，安装依赖并启动服务器，确保开发环境准备就绪，为后续的开发工作奠定基础。

✅ **用户认证功能的实现**: 教程引导开发者使用Copilot构建登录和注册表单，创建AuthLayout组件，并配置路由。通过与后端API交互，实现用户身份验证，包括登录、注册和注销功能。

✨ **仪表盘与行程管理**: 教程指导如何构建仪表盘和侧边栏导航，展示用户行程。通过创建TripCard和TripList组件，以及添加行程管理功能，包括添加、编辑行程和管理日常活动，使应用功能更加完善。

本文指导初学者通过 Planventure 项目使用 GitHub Copilot 构建 React 应用，展示其在前端开发中的应用。

摘要

本文是 GitHub 初学者教程系列的一部分，指导新手使用 GitHub Copilot 构建 React 前端应用程序。以 Planventure 项目为例，详细介绍了如何在 Copilot 的帮助下快速实现用户认证系统，包括登录注册功能和权限管理。还介绍了如何创建仪表盘和侧边栏导航，并使用 Copilot 实现行程管理功能，包括添加和编辑行程以及管理日常活动。本文通过逐步指导，演示了 Copilot 在前端开发中的功能，帮助开发人员通过提示词驱动的代码生成，快速构建功能完备的 React 应用。

在本系列的演示中，我们将使用 Visual Studio Code 中的 GitHub Copilot。

Copilot 在其他 IDE 中可用，但根据你的环境，可用的功能可能会有所不同。

需要什么

在开始之前，你需要以下内容：

一个代码编辑器如 VS Code最新版本的 Node.js 一个包管理器如 npmGitHub Copilot 的访问权限 —— 免费注册！ 

或者，您还可以使用 GitHub Codespace 在云端构建——如果您使用 Codespace，仍然需要 Copilot 访问权限。您可以在 repo 中点击在 GitHub Codespaces 中打开按钮。

我们要构建的内容

我们正在创建一个前端应用程序，该应用程序连接到上一集我们创建的后端 API。我们将使用 React 库，因此建议您熟悉使用 React 构建客户端应用程序。更具体地说，我们将使用：

React 与 Vite 用于客户端。Material UI 作为组件库。

我们的目标是构建一个具有以下功能的前端应用程序：

验证用户身份添加受保护的路由添加旅行和行程信息编辑现有行程

让我们开始吧！

解决错误

由于 Copilot 是一个生成式 AI 助手，即使多次发送相同的提示，您也可能收到不同的结果。因此，无法预测何时可能会收到错误，以及这些错误会是什么。如果在任何过程中出现错误，请使用 Copilot 聊天窗口帮助您调试并解决错误。

要做到这一点，请复制错误消息，打开 Copilot 聊天窗口，输入 @workspace /fix，然后粘贴错误消息。Copilot 将尝试找到解决您错误的建议方案。审查建议的更改，然后再次尝试。

第一步：初始设置

在开始之前，我们需要创建合适的开发环境。

通过在代码编辑器中打开终端并运行以下命令来克隆 Planventure 仓库 。

git clone https://github.com/github-samples/planventure

2. 导航到 planventure-client 目录并切换到 client-start 分支。

cd planventure-clientgit switch client-start

3. 安装必要依赖。

npm install

4. 启动服务器。

npm run dev

5. 使用浏览器访问 http://localhost:5173 验证应用是否运行正常。

通过查看现有文件来熟悉代码。请注意，一些基本组件已经安装并配置好了。打开 Copilot 聊天，并向其发送以下提示以获取现有代码的基本摘要：

@workspace Tell me about the configuration setup in the react app.

现在初始设置已经完成，请查看 GitHub 问题 以获取我们需要构建的详细信息。

第2步：创建登录和注册表单

首先我们需要添加的是身份验证。我们将通过构建登录和注册表单来实现这一点。但在开始之前，我们需要创建一个 AuthLayout 组件，用于所有认证路由。

打开 Copilot 聊天并使用模型选择器选择 克劳德十四世诗篇 3.5 模型。向 Copilot 发送以下提示。

@workspace Create AuthLayout component with navigation and centered content.

3. 将光标悬停在建议的解决方案上，点击 …，然后选择 插入到新文件 。4. 审阅添加的代码并保存文件。你应该总是审查 Copilot 提供的代码，以了解它做了什么，并确保它解决了你的需求。

现在我们已经创建了 AuthLayout 组件，是时候构建一个登录表单来实现它了。

将以下提示发送给 Copilot Chat。

@workspace Build a LoginForm component with email/password fields and validation.

2. 在 src/components 文件夹下创建一个名为 auth 的新文件夹。3. 返回 Copilot Chat，将鼠标悬停在建议的解决方案上，点击 …，然后选择 插入到新文件 。

审查添加的代码并保存文件在 auth 文件夹中。

返回到 Copilot 聊天并从下拉菜单中选择编辑。

使用 添加文件 按钮添加以下文件（如果它们尚未列在工作集中）：

认证布局.jsx登录表单.jsx路由.jsx

向 Copilot Edits 发送以下提示。

Create a new loginPage. Update route and authLayout as needed.

审查并接受 Copilot Edits 的所有更改。别忘了保存文件。向 Copilot Edits 发送以下提示以更新 Home 组件。

Update the navbar to use the new loginpage and add a get started button to the home page that routes to the login page.

10. 审查代码并进行必要的更改。然后保存所有更新的文件。11. 返回浏览器页面并刷新以查看最新更改。

将更改提交到仓库。您可以通过点击提交消息框右上角的闪光按钮来使用 Copilot 自动生成提交消息。

现在我们在界面上有一个带有开始按钮的登录页面。接下来我们需要创建一个注册页面，以便新用户可以注册。

打开 Copilot Chat，并发送以下提示。

@workspace Create SignupForm component matching the login form style and a new SignUpPage. Be sure to update routing.

2. 将鼠标悬停在建议的解决方案上，在 auth 文件夹中添加 SignupForm 组件，点击 …，然后选择插入到新文件 。

将鼠标悬停在建议的解决方案上，在 pages 文件夹中添加 SignupPage 组件，点击 …，然后选择插入到新文件 。

对每个有提议更改的文件：

打开相关文件，在编辑器中编辑。将鼠标悬停在文件的建议更改上，并点击编辑器中应用按钮。审查并接受更改。保存文件。

刷新浏览器并测试新页面。

提交你的更改。

为了完成这个拼图的最后一部分，我们需要更新 AuthContext.jsx 文件。

在编辑器中打开 AuthContext.jsx 文件。它位于 context 文件夹中。打开 Copilot 聊天并发送以下提示。

Setup authentication context and token management #file:ProtectedRoute.jsx

对于每个有建议更改的文件：

打开相关文件，在编辑器中编辑。悬停在文件的建议更改上，并点击应用到编辑器按钮。审查并接受更改。保存文件。

提交你的更改。

第 3 步：使用 API 进行身份验证

现在我们已经有了必要的表单，是时候向后端服务器发送请求，以便用户可以注册和登录了。为了做到这一点，我们需要同时编辑三个文件。幸运的是，Copilot Chat 支持同时编辑多个文件！

将以下提示发送给 Copilot Chat。

@workspace Setup api service functions for login and register routes. Update login and signup forms to use api service. #file:SignupForm.jsx

2. 对于每个有提议更改的文件：

1.  在编辑器中打开相关文件。2.  将鼠标悬停在文件的建议更改上，并点击**编辑器中应用**按钮。3.  审查并接受更改。4.  保存文件。

3. 创建一个新的终端窗口并进入 planventure-api 目录，然后通过运行以下命令启动服务器：

flask run --debug

4. 刷新浏览器并尝试登录应用。如果遇到错误，请使用 GitHub Copilot 进行调试。查看这个节目的视频版本，看看一些可能需要调试的示例。5. 尝试注册一个新用户并调试任何出现的错误。

现在我们已经验证了可以登录并创建新用户，接下来我们要在导航栏中添加注销功能。

向 Copilot Chat 发送以下提示。

@workspace update navbar to include the logout function

2. 对于每个有提议更改的文件：

1.  打开相关文件，在编辑器中编辑。2.  将光标悬停在文件的建议更改上，然后点击 **编辑器中应用** 按钮。3.  审查并接受更改。4.  保存文件。

3. 回到浏览器，刷新页面，并测试 登出 按钮。请注意，您需要登录后才能看到 登出 按钮。

将所有这些更改提交到你的仓库。

恭喜你！你现在已经成功添加了用户认证！

第四步：添加仪表板和侧边栏导航

为了确保用户可以轻松访问常用功能，我们想要创建一个带有侧边栏导航的仪表板。

在窗口顶部点击 Copilot 按钮，然后选择 查看 Copilot 修改 。

使用 添加文件 按钮添加以下文件（如果它们尚未列在工作集中）：

App.jsxAuthContent.jsxAuthLayout.jsxLoginForm.jsx导航条.jsxSignupForm.jsx

Send Copilot Edits 的提示如下。

Build a dashboard layout component with sidebar navigation.

4. 审查并接受建议的代码更改，然后保存文件。5. 刷新浏览器以查看新的仪表板。

现在我们已经有了布局，我们需要创建一个 TripCard 和 TripList 组件来展示用户的旅行。

向 Copilot Edits 发送以下提示以创建必要的组件。

Create TripCard and TripList components for displaying trips with loading states.

2. 审查并接受建议的代码更改。3. 向 GitHub Copilot 发送以下提示以添加一个仪表板组件，显示用户的旅行。

Create a dashboard component that displays the trips that users are routed to on login.

4. 审查并接受建议的代码更改。5. 如果用户没有行程，他们应该收到一条欢迎消息。他们登录时如果出现任何错误，也应该收到一条消息。要添加这些元素，请发送以下提示：

Update the dashboard coponent to show a welcome message to users if they have no trips. If there is an error receiving trips, display the image with a message that's quirky and apologetic.

6. 审查并接受建议的代码更改。7. 现在让我们从 API 获取用户行程。向 Copilot Edits 发送以下提示：

Update to fetch trips from the flask api.

8. 审查并接受建议的代码更改，然后保存文件。9. 返回浏览器并刷新页面。

测试新功能，请登录。你应该能看到你的行程、欢迎消息，或者一个有趣且古怪的错误消息。试着测试所有三种可能性。

一旦您验证这些更改可以正常工作（并在出现任何错误时进行调试），请将更改提交到仓库。

有了这个部分，我们几乎就完成了！

第五步：启用行程管理

现在我们需要添加用户管理旅行的功能。为了实现这一点，我们首先需要创建一个新的表单，允许用户添加他们的旅行并将其保存到仪表板。然后我们需要向 /trips/new 路径发送一个 POST 请求。

打开终端并安装必要的依赖。

npm install dayjs @mui/x-date-pickers

2. 打开 Copilot Edits 并发送以下提示。

Create NewTripForm with destination and date inputs. Use the dayjs library.

3. 审查并接受建议的代码更改，然后保存文件。4. 返回浏览器并刷新页面。

点击添加新行程按钮并测试表单。提交你的更改。

接下来，我们想要添加用户管理他们行程的功能。

Copilot 发送编辑内容。

Create ItineraryDay and TimeSlot components for managing daily activities with editing capabilities.

2. 审查并接受建议的代码更改，然后保存文件。3. 向 Copilot 发送以下提示，鼓励用户为其旅行提供行程。

If the user doesn't have an itinerary for their trip, prompt them to add an itinerary. Also include a default itinerary template.

4. 审查并接受建议的代码更改，然后保存文件。5. 返回浏览器并刷新页面。

点击 查看详情 开始一次旅行，然后点击 行程 标签。你应该会看到一个提示，鼓励你为这次旅行创建一个行程。试着添加一个行程，并验证应用程序是否提供了默认模板。

返回 Copilot 编辑，并发送以下提示，以给用户编辑行程的能力。

Allow users to edit their trip details.

8. 审查并接受建议的代码更改，然后保存文件。9. 返回浏览器并刷新页面。

尝试编辑一次旅行并验证您是否可以更改详情。提交更改。

作为最后的润色，让我们添加一个功能，让用户可以添加他们将停留的地方以及出行方式的额外信息。

将以下提示发送给 Copilot Edits。

Allow users to add their accommodations and transportation details to the Overview page.

2. 审查并接受建议的代码更改，然后保存文件。3. 返回浏览器，刷新页面并测试这项新功能。

别忘了提交你的更改！