2024 年如何启动 React 项目

每年我都会向您简要概述如何开始一个新的 React 项目。 我想反思一下优点和缺点、作为开发人员所需的技能水平，以及每个入门项目必须为 React 开发人员提供哪些功能。 最后您将了解针对不同需求的 3 种解决方案。

注：截图为去年的截图 JavaScript 的现状，因为最新的结果还没有上线。

与 Vite 反应

迅速地 是最流行（现已弃用）React 启动程序 create-react-app (CRA) 的明显继承者，因为它与它没有太大的偏差。 与 CRA（使用 Webpack）相比，它要快得多，因为它使用 esbuild 在引擎盖下。

Vite 更倾向于使用客户端路由/渲染而不是服务器端渲染（SSR）来创建单页应用程序（SPA）。 然而，由于 SSR 如今正成为一个更重要的话题，因此 Vite 中可以选择加入 SSR 功能。

当来自 create-react-app (CRA) 时，它是一个简单的 迁移至Vite。 选择加入功能，例如 打字稿、SVG 和 SSR 距离 Vite 的配置仅几步之遥 vite.config.js 文件，除了功能特定文件（例如 tsconfig）。

Vite with React 允许开发者在没有固执己见的框架的情况下使用 React。 由开发人员选择互补的 React 库来进行路由、数据获取、状态管理和 测试。 与所有 React 框架相比，它不会强制您使用任何特定的 React 功能、库或配置（在项目级别）。

最后但并非最不重要的一点是，Vite 鼓励初学者在不受框架干扰的情况下学习 React 及其基础知识。 当我更新我的书时 反应之路 2022 年，我用 Vite 替换了 create-react-app。 虽然 Vite 占据了乘客的位置，但初学者只能专注于 React 及其核心功能。

相比之下，在框架环境中学习React时，React几乎占据了乘客的位置，而必须遵循框架的意见（例如基于文件的路由）。

React与Vite的优势：

• 几乎是 create-react-app (CRA) 的直接替代品
• 仍然对 SPA/CSR 友好，但可以选择 SSR
• 无框架/公司锁定
• 轻的
• 在功能层面上不与 React 混合
  • 因此关注 React 本身而不是框架
• 温和的学习曲线，了解 React 的基础知识
• Vite 在 React 之外的许多框架中都有使用

React with Vite 缺点：

• 优先考虑 SPA/CSR
• 没有框架支持
• 对 React 为集成框架提供的架构功能的访问受到限制
  • 例如反应服务器组件（RSC）

与下一步反应

Next.js 当 React 开发人员想要在固执己见的框架环境中使用 React 时，框架是最成熟的，因此是显而易见的选择。 它配备了许多电池。 如果 Next.js 不适合您，请查看 混音。

Next.js 优先考虑服务器端渲染（SSR）作为渲染技术。 然而，它也可以与静态站点生成（SSG）、增量静态生成（ISR）和客户端渲染（CSR，请参阅React with Vite）一起使用。 除此之外，还有一些更前沿的渲染技术，例如可用的 React Server Components (RSC)。

是什么让这更令人兴奋：您可以在 Next.js 应用程序中混合和匹配渲染技术。 虽然营销页面可以使用 SSG，但登录/注册背后的实际应用程序使用 SSR。

不过，如此强大的功能是有代价的：不同的渲染技术会产生工程开销，框架不断地使用新的渲染技术，并不是所有日常技术人员都能跟上步伐。

总之，虽然 Next.js 附带了许多功能（例如基于文件的路由），但它也附带了责任。 虽然 React 本身（例如使用 Vite）保持相对稳定，但您肯定会看到 Next.js 生态系统的变化，因为他们正在最前沿将 React 引入服务器。

Next.js 的优点：

• 具有内置库的固执己见的框架
• SSR 和许多其他渲染技术
  • 性能提升（警告：如果做得正确）
  • 与 CSR 相比，改进了 SEO（请参阅 React with Vite）
• Vercel 是拥有大量资金的大玩家
  • 与 React 核心团队密切合作
  • 过去曾聘用过几位 React 核心团队成员
• 致力于最前沿

Next.js 缺点：

• 致力于最前沿
• 与仅使用 Vite 进行 React 相比的开销/稳定性/可维护性
• 与 React 和 Vite 相比，学习曲线更陡峭
  • 更多地关注框架细节，更少关注 React 本身
• 更少的选择 自托管 （Node.js、Docker、静态文件）

与 Astro 反应

阿斯特罗 允许开发人员创建以内容为中心的网站。 由于其岛式架构和选择性水合作用，它默认为每个网站提供快速性能。 因此，SEO 相关网站可以从使用 Astro 中获利。

从实现的角度来看，它更倾向于多页面应用程序 (MPA) 的概念而不是单页面应用程序 (SPA)。 因此它 结束历史循环：从 MPA 成为网站的主要类型（2010 年之前）到 SPA 占据主导地位（2010 – 2020 年），再到回到 MPA（从而首先使 MPA 成为一个术语）。

Astro 是一个与框架（此处：React）无关的解决方案。 因此，您可以使用 Astro 的内置组件语法或您选择的框架（例如 React）。 该框架仅用于服务器端渲染，不会暴露给客户端。 只有当人们决定向客户端提供一个交互式岛（参见岛架构）时，它才会将所有必要的 JavaScript 代码发送到浏览器。

总之，尽管 Next（使用 SSR/SSG/ISR）也适合以内容为中心的网站，但 Astro 似乎适合更具体的要求（性能、SEO、一等公民内容（例如集合、MDX） ））在这里拥有一个以内容为中心的网站。

React with Astro 优点：

• 以内容为中心的网站
• 表现
• 搜索引擎优化
• 与框架（例如 React）无关

React with Astro 缺点：

• 未针对动态 Web 应用程序做广告
  • 但他们正在大力探索这个领域

启动 React 项目的更多选项…

不使用 React 的 TypeScript/JavaScript SSR 框架…

• nuxt（查看）
• SvelteKit（苗条）
• 固体启动（固体）
• Qwik城市（Qwik）

如何启动 React 项目？

• 如果您开始学习 React（从教育工作者的角度来看），请坚持 使用 React 进行 Vite，因为它尽可能接近 React 的基本原理。 如果您只想寻找轻量级 SPA/CSR 解决方案，同样如此。
• 如果您正在寻找一个基于 React 的自以为是的框架，其中包含多种渲染技术（和基础设施），我建议使用 接下来是反应 作为最成熟的解决方案，有其所有优点和缺点。
  • 如果 Next.js 不能满足您的需求，但您仍在寻找包含所有电池的 SSR 框架，请查看 用 React 重新混合。
• 如果您想拥有一个以内容为中心的网站，请查看 Astro 与 React。