如何在 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中文網其他相關文章！