2024年如何开始一个React项目
每一年我都会简单介绍一下如何创建一个新的React项目，然后反思他们有什么优缺点。我想反思一下优缺点，作为开发者需要具备的技能水平，以及每个入门项目为React开发者提供了哪些功能。最后，您将了解三种不同的解决方案，以满足不同的需求。
注意：这些截图来自去年的JavaScript状态，因为最新的结果还没有上线。
REACT WITH VITE
Vite是React最受欢迎的（现已弃用的）入门工具create-react-app（CRA）的明确继任者，因为它与CRA没有太大区别。与CRA（使用Webpack）相比，它要快得多，因为它是基于esbuild。
Vite倾向于创建一个单页应用程序（SPA），使用客户端路由/渲染而不是服务器端渲染（SSR）。然而，由于SSR在当今变得越来越重要，它作为Vite的可选功能提供。
如果原来的项目基于create-react-app（CRA），迁移到Vite是一个简单的过程。通过Vite的vite.config.js文件，以及特定于功能的文件（例如tsconfig），只需进行几项配置即可启用TypeScript、SVG和SSR等可选功能。
Vite与React结合使用，允许开发人员在不使用带有偏见的（opinionated）框架的情况下使用React。由开发人员选择互补的React库来处理路由、数据获取、状态管理和测试。与所有React框架相比，它不会在项目级别强制您使用特定的React功能、库或配置。
最后但同样重要的是，Vite鼓励初学者学习React及其基础知识，而不会受到框架的干扰。当我于2022年更新我的书《The Road to React》时，我使用Vite替换了create-react-app。虽然Vite扮演了辅助的角色，但初学者可以专注于React及其核心功能。
相反，在框架环境中学习React时，React几乎扮演了辅助的角色，而人们必须遵循框架的意见（例如基于文件的路由）。
React和Vite一起使用的优势：
- 几乎可以替代create-react-app（CRA）
- 仍然是SPA/CSR友好型，但SSR是可选的
- 没有框架/公司锁定
- 轻量级
- 在功能级别上不会与React混淆
- 因此，专注于React本身而不是框架
- 了解React基础知识的学习曲线较为平缓
- Vite被用于许多超越React的框架中
React和Vite一起使用的缺点：
- 优先考虑SPA/CSR
- 没有框架支持
- 对集成框架中提供的React架构功能访问有限
- 例如，React Server Components（RSC）
REACT WITH NEXT
Next.js作为一个框架，是最成熟的选择，因此当React开发人员希望在带有偏见的框架环境中使用React时，它是优先的选择。它附带了许多内置功能。但是，如果您不喜欢Next.js，可以尝试Remix。
Next.js优先考虑服务器端渲染（SSR）作为渲染技术。但是，它也可以与静态站点生成（SSG）和客户端渲染（CSR，请参见Vite中的React）一起使用。此外，还有几种更前沿的渲染技术，例如增量静态再生（ISR）和React Server Components（RSC）。
更令人震惊的是：您可以在Next.js应用程序中混合和匹配渲染技术。虽然营销页面可以使用SSG，但实际的应用程序在登录/注册后面使用SSR。
但是，这种强大的功能也带来了成本：不同的渲染技术会产生工程开销，框架不断的更新渲染技术，而并非所有日常技术工作者都能跟上这种速度。
总之，虽然Next.js附带了许多内置功能（例如基于文件的路由），但它也带来了技术债务。虽然React本身（例如与Vite一起使用）相对稳定，但您肯定会在Next.js生态系统中看到变化，因为它们正在前沿工作，将React带到服务器上。
Next.js的优势：
- 带有内置库的带有偏见的框架
- SSR和其他许多渲染技术
- 性能提升（注意：如果做得正确）
- 与CSR（请参见Vite中的React）相比，SEO得到改善
- Vercel作为大客户，拥有大量资金
- 与React核心团队紧密合作
- 过去曾聘请过几位React核心团队成员
- 走在技术的前沿
Next.js的缺点：
- 技术太新
- 与仅使用Vite的React相比，开销/稳定性/可维护性不如前者
- 与仅使用Vite的React相比，学习曲线更陡峭
- 更侧重于框架特定内容，而不是React本身
- 框架（和基础设施，例如在Vercel上部署）锁定
- 后者也许可以通过OpenNext解决
REACT WITH ASTRO
Astro允许开发人员创建以内容为中心的网站。由于其岛屿架构（island architecture）和因此的选择性水合作用，它为每个网站提供了默认的快速性能。因此，SEO相关的网站从使用Astro中获益。
从实施的角度来看，它更倾向于多页应用程序（MPAs）而不是单页应用程序（SPAs）。因此，它让历史重演了：从MPAs是网站的主要类型（2010年之前）到SPAs接管（2010-2020年）再到回到MPAs（从而使MPAs成为第一目标）。
Astro是一个框架（此处：React）无关的解决方案。因此，您可以使用Astro的内置组件语法或选择一个框架（例如React）。框架仅用于服务器端渲染，不会暴露给客户端。只有当一个人决定将交互式岛屿（请参见岛屿架构）水合到客户端时，它才会将所有必要的JavaScript代码发送到浏览器。
总之，尽管Next（无论是SSR/SSG/ISR）也适合内容聚焦的网站，但Astro似乎更适合内容聚焦网站的更具体要求（性能、SEO、内容作为一等公民（例如，合辑、MDX））。
React 和 Astro 的优势:
- 内容聚焦网站
- 性能
- SEO
- 框架（例如React）无关
React 和 Astro 的缺点:
- 不适合动态Web应用程序的广告
- 但他们正在深入探索这个领域
启动React项目的更多选项
- Parcel代替Vite
- 使用Monorepo（例如Turborepo），带有可选的Vite、Next和/或Astro
- create-t3-app用于tRPC
- React Native + Expo用于移动应用程序
- Tauri/Electron用于桌面应用程序
TypeScript/JavaScript SSR框架，不使用React
- Nuxt (Vue)
- SvelteKit (Svelte)
- SolidStart (Solid)
- QwikCity (Qwik)
如何开始一个React项目？
- 如果您刚开始学习React（从教育者的角度来看），请坚持使用Vite与React，因为它尽可能地接近React的基础知识。如果您只寻找轻量级的SPA/CSR解决方案，情况也是如此。
- 如果您正在寻找基于React的带有多种渲染技术（和基础设施）的带有偏见的框架，我建议使用Next与React作为最成熟的解决方案，具有所有优缺点。
- 如果Next.js不适合您的需求，但您仍在寻找一个包含所有电池的SSR框架，请考虑Remix与React。
- 如果您想要一个内容聚焦的网站，请考虑Astro与React。
以上内容基于 DeepSeek-LLM-67B-chat 翻译生成，并对部分翻译内容进行人工校正。