React 开始新旅程：逐步淘汰 Create React App
2025年2月14日，作者：Matt Carroll 和 Ricky Hanlon
在今天这篇文章中，我们将分享一个重要的变化：我们决定逐步淘汰 Create React App（CRA），并推荐使用框架或其他工具来创建新的 React 应用。接下来让我们一起看看这个决策的背景、原因以及后续的迁移建议。
背景故事
当 React 在 2016 年推出时，开发者们并没有一个简单的方法来快速搭建一个新的 React 项目。那个时候，如果你想构建一个 React 应用，你需要手动安装一堆工具，并将它们组合在一起以支持 JSX、代码检查和热更新等功能。这种过程非常复杂，因此社区开始涌现出许多样板代码模板（boilerplates）来帮助解决这些问题。
为了解决这些问题，Create React App 出现了。它通过整合多个工具，提供了一个简单的开箱即用配置，让开发者可以轻松地开始构建 React 应用。此外，它还允许开发者通过简单的步骤升级到最新的工具功能，也让 React 团队能够更广泛地推广一些高级功能，比如快速刷新（Fast Refresh）和支持 React Hooks 的代码检查规则。
然而，随着时间推移，CRA 的局限性逐渐显现出来。尽管它可以满足初学者的需求，但对于生产级别的应用来说，它的能力显得捉襟见肘。同时，由于 CRA 目前没有活跃的维护者，而市场上已经存在许多优秀的框架，因此我们决定逐步淘汰 CRA。
新的推荐方式
从今天开始，如果你尝试安装一个新的 React 应用，你会看到一个提示，告诉你 CRA 已被弃用：
create-react-app 已被弃用。你可以在 react.dev 找到最新的 React 框架列表。
更多信息请参考：react.dev/link/cra
我们建议大家使用框架来创建新的 React 应用。所有我们推荐的框架都支持纯客户端单页应用（SPA），并且可以直接部署到 CDN 或静态托管服务上，无需服务器支持。
对于现有的 CRA 项目，我们提供了以下迁移指南：
即使你选择不使用框架，CRA 仍然会继续以维护模式运行。我们也发布了一个新的版本，确保它可以兼容 React 19。
CRA 的局限性
虽然 CRA 提供了一个简单的方式来启动 React 项目，但它缺乏生产环境中所需的一些关键功能。以下是几个主要的问题：
1. 路由
CRA 没有内置的路由解决方案。如果你只是初学者，可能可以用 useState 来切换页面，但这会导致无法分享链接，并且随着应用的增长，结构会变得混乱。因此，大多数开发者会选择集成第三方路由库，比如 React Router 或 Tanstack Router。
2. 数据获取
CRA 没有内置的数据获取机制。初学者可能会直接在组件中使用 fetch 来加载数据，但这种方式会导致“网络瀑布效应”，因为数据是在组件渲染之后才加载的。更好的方法是使用专门的数据获取库，比如 React Query 或 SWR，它们支持预取数据以优化性能。
3. 代码拆分
CRA 缺乏代码拆分的功能。默认情况下，你的整个应用会被打包成一个文件，这会增加用户的加载时间。为了优化性能，你应该根据需求将代码拆分成多个小块。例如，可以使用 React.lazy 或路由器提供的懒加载功能。
4. 更多问题
除此之外，还有许多其他需要解决的问题，比如状态管理、导航中断、错误处理、数据验证等。这些问题通常是相互关联的，解决它们需要深厚的开发经验。
我们为什么推荐框架？
框架的核心价值在于将这些复杂的任务集成到一个统一的工具链中。无论是构建工具、路由、数据获取还是代码拆分，框架都能为你提供现成的解决方案，而无需从零开始构建。
目前，我们推荐的框架包括：
- Next.js：支持服务端渲染和静态生成。
- React Router：专注于路由功能。
- Expo：适合移动应用开发。
这些框架不仅提供与 CRA 类似的入门体验，还能帮助你应对生产环境中的各种挑战。
结语
虽然逐步淘汰 CRA 可能会让一些开发者感到遗憾，但我们相信，这一举措将推动 React 社区向更高水平发展。希望本文的内容能够帮助你理解我们的决策，并顺利过渡到更适合现代开发需求的工具。
感谢多年来支持和维护 CRA 的每一位贡献者！如果您有任何问题或建议，欢迎随时联系我们。
希望这篇科普文章能让你更好地了解 React 开发的趋势和最佳实践！
