Remix基础到高级
此课程将【基础知识】与【高级内容】合并课程

———————————————————–基础知识部分———————————————————

教程演示🔗

教程概要: Remix是一个全栈Web框架，能够提供快速、流畅且弹性的用户体验。通过Remix，您可以构建静态网站和动态Web应用程序（需要用户数据），并在此过程中充分利用Web平台的标准API！您准备好更快地构建Web应用程序了吗？

教程特点:

• 专业培训师: Kent C. Dodds（肯特·多兹）
• 时长: 3小时55分钟
• 语言: 英语（CC字幕可用）

课程内容:

• 介绍:
  • 肯特·多兹通过提供Remix的个人背景和课程的先决条件来介绍该课程。本部分还简要概述了课程结构以及如何设置课程存储库。
• Remix概述:
  • 讨论Web框架Remix及其核心功能的概述，包括嵌套路由、服务器端渲染、更快的加载时间和预取数据。Remix可以使用表单和服务器上的操作仅更新数据。
• Remix问答:
  • 回答学生关于使用Remix的技术堆栈示例的问题，以及静态站点生成实现最佳用户体验的不可能性。还涵盖了关于不使用静态站点是否意味着每个请求都调用CMS、在构建时是否可以获取道具、子段是否有自己的加载器以及如何处理着陆页的SEO等问题。
• 设置:
  • 演示课程存储库的文件布局，如何运行独立堆栈设置，并演练了两个包含的脚本，一个用于运行练习，另一个用于将学生练习与最终解决方案进行比较。
• 您的第一个路由练习:
  • 指导学生在/posts中添加指向新路由的链接，并创建一个文件，当用户访问该路由时将呈现该文件。
• 数据加载练习:
  • 指导学生将提供的博客文章直接放入加载器中，使用JSON和useLoaderData检索帖子，并使用提供的JSX呈现帖子。
• 设置Prisma:
  • 演示如何通过调用Prisma交换硬编码数据，并通过限制Prisma的查询API来优化数据加载。
• 动态参数练习:
  • 指导学生创建动态路由以生成博客文章的页面。额外的学分练习包括为TypeScript添加帖子内容和类型保护。
• 从Markdown呈现HTML:
  • 演示如何完全配置Remix约定的TypeScript，并通过使用marked库从Markdown呈现HTML代码。还涵盖了在使用嵌套动态段时，useLoaderData在子组件中是否仅在顶级组件中执行一次的问题。
• 特征:
  • 嵌套路由练习、突变练习、渐进增强练习等。
• Q&A和解决方案:
  • 涵盖学生关于各种主题的问题，包括嵌套路由、突变、错误处理、环境变量等。
• 结束语:
  • 肯特·多兹通过提供课程反馈链接来总结本课程，并回答学生关于使用Remix进行图像优化、构建具有来自多个数据源的小部件的仪表板的方法以及SPA与使用Remix的MPA的比较等问题。还提供了一些关于Remix即将推出的变更的展望。

———————————————————–高级内容部分———————————————————

教程演示🔗

高级Remix

教程概要: Remix是构建简单网站的绝佳工具，甚至更适合构建复杂的Web应用程序。Remix解决了现代Web开发中的许多问题。您甚至不必考虑服务器缓存管理或全局CSS命名空间冲突。当您使用Remix时，这些问题根本不存在！

教程特点:

• 专业培训师: Kent C. Dodds（肯特·多兹）
• 时长: 3小时18分钟
• 语言: 英语（CC字幕可用）

课程内容:

• 介绍:
  • 肯特·多兹介绍了本课程，并讨论了高级Remix主题的好处。本课程建立在Remix基础课程中学到的概念之上。
• 存储库设置:
  • Kent演示了课程存储库并解释了如何运行不同的应用程序。每个练习都附有说明和笔记的README文件。本部分还回答了有关测试的问题。
• UI功能:
  • 非导航突变练习、乐观UI练习、焦点管理练习等。
• Q&A和解决方案:
  • 涵盖学生对多个UI更新处理相同组件的问题、管理fetchers的问题等。
• 性能优化:
  • 重新验证优化练习、非导航获取练习等。
• 命令式突变练习:
  • 指导学生完成注销模态的Remix实现。使用useSubmit() hook将post请求发送到/logout路由。
• 提高加载体验:
  • 待处理UI加载旋转器练习、骨架屏练习、推迟练习等。
• Defer和React Streaming:
  • 使用浏览器开发者工具中的网络分析器，Kent解释了Remix Defer组件如何与React Streaming协同工作。本部分还讨论了关于嵌套悬念对象的问题。
• Suspense边界错误:
  • Kent简要调试了由Suspense组件抛出的边界错误。
• 结束语:
  • Kent通过回答有关渐进Web应用（PWAs）、组件中的CSS、Storybook集成、Remix未来的令人兴奋之处以及社区资源的问题来总结本课程。