掌握React 18：构建Swiggy风格的美食配送应用

在当今快速发展的前端开发领域，React 作为最受欢迎的前端框架之一，始终以其强大的功能和灵活性吸引着开发者。随着 React 18 的发布，带来了更多令人兴奋的新特性和改进，为开发者提供了构建更快、更可扩展应用的可能性。无论你是刚入行的开发者，还是经验丰富的技术专家，掌握 React 18 都是提升技能的关键一步。

本课程将带你深入了解如何利用 React 18、Parcel 和现代最佳实践，从零开始构建一个 Swiggy 风格的美食配送应用。你将学习到 React 18 的最新特性、性能优化技巧、状态管理、路由导航以及 API 集成等知识，帮助你构建一个高效、可扩展的美食配送平台。

MP4 | 视频：h264、1920×1080 | 音频：AAC，44.1 KHz
语言：英语 | 大小：4.58 GB | 时长：6 小时 43 分钟

课程概述

在本次课程中，我们将从基础到进阶，全面覆盖 React 18 的核心知识，并通过一个实际项目将理论付诸实践。以下是你将要学习的主要内容：

• React 18 基础与高级概念：深入理解 React 18 的新特性，包括钩子（Hooks）、上下文 API（Context API）、懒加载（Lazy Loading）、错误边界（Error Boundaries）等。
• Parcel 打包工具：利用 Parcel 的超快构建速度、热模块替换（HMR）、代码分割（Code Splitting）和树摇（Tree Shaking）来优化你的应用。
• 路由与导航：使用 React Router 实现无缝的页面切换和动态路由。
• 状态管理：通过 Redux Toolkit 高效管理全局状态，构建可扩展的应用架构。
• API 集成：学习如何从现代 API 获取实时数据，并将其展示在你的应用中。
• Shimmer UI 与骨架屏：通过加载效果提升用户体验，实现平滑的预加载动画。
• 自定义钩子与性能优化：编写更干净、可重用和高效的代码。
• 身份验证与授权：实现用户登录和安全最佳实践，确保应用的安全性。

详细内容

1. React 18 基础与高级概念

React 18 引入了许多令人激动的新特性和改进，帮助开发者构建更高效的应用。以下是你将学习到的核心知识点：

• 新特性：了解 React 18 的最新功能，如自动批量更新（Automatic Batched Updates）、新的渲染器（New Renderer）等。
• 钩子（Hooks）：深入掌握 useState、useEffect、useContext 等钩子的使用，并学习如何编写自定义钩子。
• 上下文 API（Context API）：通过上下文 API 管理应用的全局状态，减少组件间的 props 传递。
• 懒加载（Lazy Loading）：使用 React.lazy() 实现组件的懒加载，优化应用的加载时间。
• 错误边界（Error Boundaries）：捕获和处理组件渲染中的错误，提升应用的健壮性。

2. Parcel 打包工具

Parcel 是一个现代化的打包工具，以其超快的构建速度和简单的配置著称。以下是你将学习到的 Parcel 的核心功能：

• 快速构建：体验 Parcel 的即时构建和热模块替换（HMR），加快开发效率。
• 代码分割（Code Splitting）：自动实现代码分割，优化应用的加载性能。
• 树摇（Tree Shaking）：去除未使用的代码，减少最终包的体积。

3. 路由与导航

在现代单页应用（SPA）中，路由和导航是用户体验的重要组成部分。通过 React Router，你可以轻松实现动态路由和无缝的页面切换。

• React Router 基础：学习如何配置路由，实现基本的页面导航。
• 动态路由：根据不同条件渲染不同的组件，实现动态路由。
• 页面过渡：为页面切换添加平滑的过渡效果，提升用户体验。

4. 状态管理

随着应用规模的扩大，状态管理变得越来越重要。通过 Redux Toolkit，你可以高效地管理全局状态，构建可扩展的应用架构。

• Redux 基础：了解 Redux 的核心概念，包括存储（Store）、动作（Action）和减少器（Reducer）。
• Redux Toolkit：使用 Redux Toolkit 简化状态管理，减少样板代码。
• 集成 React：将 Redux 与 React 集成，实现组件间的高效状态共享。

5. API 集成

在现代应用中，API 集成是必不可少的技能。通过本课程，你将学习如何从 API 获取实时数据，并将其展示在你的应用中。

• API 基础：了解如何使用 fetch 和 axios 等工具与 API 通信。
• 数据展示：将从 API 获取的数据展示在组件中，实现动态内容更新。
• 错误处理：处理 API 请求中的错误，提升用户体验。

6. Shimmer UI 与骨架屏

在数据加载过程中，提供良好的用户反馈非常重要。通过 Shimmer UI 和骨架屏，你可以为用户提供平滑的加载体验。

• Shimmer UI：实现加载时的闪烁效果，提升用户体验。
• 骨架屏：为组件提供加载时的占位图，确保界面的一致性。

7. 自定义钩子与性能优化

编写自定义钩子可以帮助你更好地复用代码，而性能优化则是确保应用运行高效的关键。

• 自定义钩子：学习如何编写自定义钩子，简化代码逻辑。
• 性能优化：掌握懒加载、代码分割和记忆化（Memoization）等技术，优化应用性能。

8. 身份验证与授权

在构建实-world 应用时，身份验证和授权是必不可少的功能。通过本课程，你将学习如何实现用户登录和安全最佳实践。

• 身份验证：集成用户登录和注册功能，确保用户身份的安全。
• 授权：根据用户角色实现不同权限的访问控制。

学习路径

本课程采用项目式学习的方式，从零开始构建一个 Swiggy 风格的美食配送应用。你将通过以下步骤逐步完成项目：

1. 项目初始化：设置开发环境，安装必要的依赖项。
2. 基础组件开发：构建应用的基本组件，如导航栏、餐厅列表、菜单项等。
3. 路由配置：实现应用的路由结构，确保用户可以无缝导航。
4. API 集成：连接到实时餐厅数据 API，获取并展示数据。
5. 状态管理：使用 Redux Toolkit 管理全局状态，实现组件间的数据共享。
6. 性能优化：通过懒加载、代码分割和记忆化优化应用性能。
7. 用户身份验证：实现用户登录和注册功能，确保应用的安全性。
8. 部署与发布：将应用部署到生产环境，分享你的成果。

为什么要上这门课？

• 快速上手：课程采用直截了当的教学方式，避免无关内容，直接进入实战。
• 项目式学习：通过构建一个真实的美食配送应用，强化理论知识。
• 行业相关技能：学习现代前端开发的最佳实践，掌握业界领先的技术栈。

适合谁学习？

• 实习生：通过实际项目将理论知识应用于实践，为你的技术生涯打下坚实的基础。
• 初级开发者：提升你的技能，掌握 React 18 和现代前端开发的最佳实践。
• 高级开发者：深入了解 React 18 的高级特性，领先于行业发展。
• 技术负责人：通过项目实战，掌握如何指导团队构建高效、可扩展的 React 应用。

通过本课程，你将不仅掌握 React 18 的核心知识，还能构建一个功能完善的 Swiggy 风格美食配送应用。无论你是刚入行的开发者，还是经验丰富的技术专家，这门课程都将为你提供宝贵的学习资源，帮助你在 React 开发领域脱颖而出。

立即加入课程，开启你的 React 18 之旅，构建属于自己的下一个大项目！

概述
第 1 部分：简介

第 1 讲 简介

第 2 讲解决方案演练

第三讲 Github 策略

第四讲 应用演示

讲座 5 关于博客

第 2 节：2. 入门

第 6 讲 简介

第 7 讲 Parcel 简介

第 8 讲 初始化项目

讲座 9 安装依赖项

第 10 讲 创建索引页

第 11 讲 运行应用程序

第 12 讲 修复脚本引用

讲座 13 修复控制台警告

讲座 14 创建文件夹结构和基础设置

第 15 讲 Github 策略

第 3 部分：创建应用程序设计

第 16 讲 介绍

讲座 17 创建应用程序布局

第 18 讲 创建 Header 组件

第 19 讲 固定风格

第 20 讲 制作餐厅名片

讲座 21 创建身体部件

讲座 22 实现搜索功能

讲座 23 获取评分最高的餐厅

讲座 24 实现重置过滤器

第 4 部分：从 API 获取数据

第 25 讲 介绍

第 26 讲 设置 API

讲座 27 安装 JSON 服务器

讲座 28 VS Code 扩展

讲座 29 使用 Use Effect Hook

讲座 30 从 API 获取数据

讲座 31 使用从服务器获取的数据

讲座 32 创建 Shimmer 组件

讲座 33 实现 Shimmer 组件

讲座 34 修复显示逻辑

第 5 节：路由

讲座 35 简介

讲座 36 创建应用程序布局

讲座 37 理解 React 的 import

讲座 38 创建关于我们的组件

讲座 39 创建关于我们的风格

讲座 40 创建联系我们页面 – 第 1 部分

讲座 41 创建联系我们页面 – 第二部分

讲座 42 安装 React Router DOM

讲座 43 创建路线定义

讲座 44 修改应用程序布局

讲座 45 修改页眉页

讲座 46 修复联系页面 CSS

讲座 47 创建错误页面

第 6 节：创建菜单部分

讲座 48 导论

讲座49 创建菜单页面第1部分

讲座 50 理解菜单页面

讲座 51 获取菜单数据-第一部分

讲座 52 获取菜单数据 – 第二部分

讲座 53 菜单页面样式

讲座54 修改餐厅卡

讲座 55 更改路由器

讲座 56 修复路线

讲座 57 修复 CSS

第 7 节：创建自定义钩子

讲座 58 导论

讲座 59 创建自定义挂钩使用餐厅

讲座 60 在 Body 组件中使用自定义 Hook

讲座 61 创建自定义钩子使用餐厅菜单

讲座 62 在正文中使用餐厅菜单钩子

讲座 63 修复异步调用

讲座 64 创建 Spinner 组件

讲座 65 创建惰性加载的路由

讲座 66 为惰性路由添加 Suspense

讲座 67 应用程序布局更改

讲座 68 修复代码分割

第 8 节：创建 Redux Store

讲座 69 导论

讲座 70 创建购物车页面

讲71 创建购物车样式

讲座 72 更新路线

讲座 73 关于 React Redux

讲座 74 安装软件包

讲座 75 创建购物车切片

讲座 76 创建商店

讲座 77 迄今为止的功能测试

讲座 78 在餐厅菜单页面中使用 Dispatch Action

讲座 79 解决国家问题

讲座 80 修复 Key 属性问题

讲座 81 使用选择器获取购物车商品

讲座 82 识别购物车问题

讲座 83 修复购物车逻辑

第 9 部分：改善用户体验

讲座 84 导论

讲座 85 安装 Toast 和 Font Awesome 包

讲86 添加购物车图标

讲87 固定风格

讲座 88 在标题中修复购物车数量

讲座 89 添加 Toast 通知

讲座 90 修改购物车切片实现

讲座 91 修改购物车页面

讲座 92 图标的样式

第 10 节：实施 Checkout

讲座 93 导论

讲座 94 创建 Auth 切片

讲座 95 理解切片实现之间的区别

讲座 96 实施商店变更

讲座 97 创建登录组件

讲座 98 登录页面的样式

讲座 99 调整索引页中的路线定义

讲座 100 调整页眉

讲座 101 对齐菜单

讲座 102 修改购物车功能

第 11 节：奖金部分

第 103 讲 奖励讲座