如何在 CRA 弃用后创建 React 应用程序

嘿，开发者们！ ？

我最近在做一个项目，了解到 React 团队两年前就弃用了 create-react-app (CRA)。 ？自然地，这让我开始考虑建立基于 JavaScript 的 React 应用程序的替代方法。

当我查看 React 官方文档时，我注意到他们现在专注于像 Next.js 和 Gatsby 这样的全栈框架。如果您正在构建端到端应用程序，那么这些非常棒，但如果您只想要一个简单的基于 JSX 的项目，它们可能就太过分了。 ?️

开始之前 - CRA 做什么？ - Create React App (CRA) 是一个功能强大的包，可以自动设置新的 React 项目。它处理所有必要的配置并安装所需的依赖项，提供零配置捆绑器。这使得开发人员可以开始构建他们的应用程序，而不必担心工具和配置的复杂设置。

那么，现在 CRA 已被弃用，那么如何设置纯 JSX 应用程序呢？ ？
在这里我将分享两个流行的选择（Vite 和 Webpack）来使用 React 库创建基于客户端的应用程序。在下面的部分中，我们将比较这些工具并为您提供每个工具的设置说明。让我们深入了解一下！ ?‍♂️

⚡ Vite 与 Webpack ？

点赞

优点：

-具有即时热模块更换 (HMR) 功能的快速开发服务器。
- 对现代 JavaScript 功能的内置支持。
- 需要最少的配置才能开始。

缺点：

-较新的工具，因此与 Webpack 相比，它的社区支持可能较少。

Webpack

优点：

-高度可配置且灵活，适用于复杂的构建设置。
-广泛的插件生态系统和社区支持。
-在许多大型应用中拥有经过验证的记录。

缺点：

-初始配置可能更加复杂且耗时。
-与 Vite 相比，构建时间更慢。
-使用 Vite 设置 React 应用

创建一个新的Vite项目：

1。在终端中运行 Vite 命令

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2。启动开发服务器：

npm run dev

Vite 配置：

Vite 需要最少的开箱即用配置。默认设置应该适用于大多数 React 项目。
如果需要，您可以自定义 vite.config.js。

使用 Webpack 设置 React 应用程序

1。初始化您的项目：

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2。创建项目结构：

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3。配置 Webpack：

• 创建 webpack.config.js 文件：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

4。 Babel 配置：

• 创建一个 .babelrc 文件：

npm run dev

5。启动开发服务器：

npx webpack 服务

结论
Vite 和 Webpack 都提供了无需 CRA 即可设置 React 应用程序的强大方法。 Vite 提供更快、更简单的设置，非常适合中型项目和快速开发。另一方面，Webpack 提供了广泛的可配置性和强大的生态系统，使其适合更复杂的项目。

选择最适合您的项目要求和偏好的工具。快乐编码！

以上是如何在 CRA 弃用后创建 React 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！