在前端技術日新月異的今天，React 社區(qū)已經(jīng)不再將 create-react-app 作為創(chuàng)建新項目的首選工具，而是推薦使用社區(qū)中流行的由 React 驅(qū)動的框架來創(chuàng)建新項目。本文就來探討在 2024 年創(chuàng)建 React 項目的方式及其優(yōu)缺點！

Create React App 有什么問題？

Create React App（CRA）于 2016 年 7 月首次發(fā)布，是一個方便快捷的 React 項目搭建工具。盡管在 React 社區(qū)中廣受歡迎，但也有一些限制和缺點需要考慮。

• 配置選項有限： Create React App 的配置選項有限。由于該工具對構建過程進行了高度抽象，定制 Webpack 和 Babel 配置相對困難。在某些情況下，開發(fā)人員可能需要進行一些自定義操作，這就意味著他們可能需要從 CRA 分離出來，自行管理配置和依賴關系。然而，這種分離可能會導致未來的更新和維護變得更為復雜。
• 復雜的依賴關系： Create React App 附帶了一組預定義的依賴項，包括 Webpack、Babel 和 ESLint。雖然這消除了手動配置這些工具的麻煩，但也意味著開發(fā)人員需要自行管理和更新這些依賴項。
• 構建資源的大小： Create React App 的默認配置優(yōu)先考慮的是開發(fā)速度，而不是生成的包大小或應用的初始加載時間。因此，生成的包可能比實際需要的大，從而影響應用的初始加載時間。

Create React App 的最新版本是 2022 年 4 月 12 日的 v5.0.1，但在 2023 年 3 月 16 日，React 團隊在文檔網(wǎng)站上正式宣布停止將不再積極維護 Create React App。

Vite

Vite 無疑是 create-react-app（CRA）的絕佳替代品。與 CRA（使用 Webpack）相比，Vite 因其底層使用 esbuild 而具有顯著的性能優(yōu)勢。

圖片

Vite 更傾向于創(chuàng)建采用客戶端渲染的單頁應用（SPA），而不是服務端渲染（SSR）。不過，隨著服務端渲染（SSR）日益受到重視，Vite 也提供了這一功能作為可選特性。

圖片

從 create-react-app（CRA）遷移到Vite非常簡單。通過 Vite 的 vite.config.js 文件，以及特定功能的文件（例如tsconfig），只需進行少量配置即可啟用 TypeScript、SVG 和 SSR 等選擇性功能。

圖片

Vite 與 React 的結合，讓開發(fā)人員能夠在無固定框架限制的情況下，自由地使用 React。開發(fā)者可以根據(jù)項目需求選擇適合自己的 React 輔助庫，如路由、數(shù)據(jù)獲取、狀態(tài)管理及測試工具。與其他 React 框架不同，Vite 不會在項目層面強制使用任何特定的 React 功能、庫或配置，從而賦予了開發(fā)者更多的靈活性和自主權。

最后，但同樣重要的是，Vite 使得初學者能夠更專注于學習 React 的基礎，而不會被框架的復雜性所干擾。相比之下，在某些框架中學習 React 時，React 可能會被置于次要地位，學習者需要遵循框架的特定規(guī)則和觀點（例如基于文件的路由）。這種框架導向的方法可能會使 React 的核心概念變得模糊，而 Vite 提供的無框架環(huán)境則讓學習者能夠更深入地理解 React 的本質(zhì)。

React + Vite 的優(yōu)勢：

• 高效替代：Vite能夠直接替代create-react-app（CRA），為開發(fā)者提供更快速和流暢的開發(fā)生態(tài)系統(tǒng)。
• 靈活性：Vite不僅支持單頁面應用/客戶端渲染，而且允許開發(fā)者選擇是否啟用服務器端渲染（SSR）。
• 框架獨立：Vite不綁定任何特定的框架或公司，使開發(fā)者能夠自由選擇最適合項目需求的工具和庫。
• 輕量級：Vite的輕量級特性使其成為高效開發(fā)的理想選擇，不會引入不必要的復雜性。
• 專注于React：Vite的設計理念是避免在功能層面對React產(chǎn)生干擾，從而讓開發(fā)者能夠?qū)Ｗ⒂赗eact本身，而不是框架的限制。
• 平緩的學習曲線：由于Vite簡化了開發(fā)流程，它可以幫助初學者更輕松地了解React的基礎知識，而無需陷入復雜的框架體系。
• 廣泛應用：Vite 不僅適用于 React 項目，還被廣泛應用于其他許多前端框架。

React + Vite 的缺點：

• 優(yōu)先考慮SPA：Vite 主要針對單頁面應用/客戶端渲染進行優(yōu)化，這可能不適合所有類型的項目需求。
• 缺乏框架支持：與某些框架結合使用時，Vite可能不會提供與特定框架完全集成的所有優(yōu)勢和特性。
• 對集成框架特性的限制：由于 Vite 的設計理念，它可能無法充分利用某些與集成框架相關的特性，如 React Server Components (RSC)。

Next.js

作為成熟度很高的 React 框架，Next.js 無疑是 React 開發(fā)人員的首選。當開發(fā)者希望在一個具有明確觀點的框架環(huán)境中使用 React 時，Next.js憑借其內(nèi)置的眾多功能，能夠提供卓越的支持。然而，如果你對Next.js并不滿意，不妨考慮一下Remix。Remix同樣為React開發(fā)提供了強大的支持，并且在某些方面可能更適合你的項目需求。

圖片

Next.js 將服務端渲染（SSR）作為其主要的渲染技術，但同時也支持靜態(tài)站點生成（SSG）和客戶端渲染（CSR，類似于使用 Vite 的 React 項目）。此外，Next.js 還支持一些更先進的渲染技術，如增量靜態(tài)再生（ISR）和React服務器組件（RSC）。

Next.js 還允許在單個應用中混合使用不同的渲染技術。例如，可以選擇使用 SSG 為營銷頁面提供靜態(tài)內(nèi)容，同時在用戶完成注冊和登錄后，使用 SSR 技術渲染實際的應用界面。

然而，這種強大的功能也帶來了一定的挑戰(zhàn)和成本。不同的渲染技術可能會增加工程的復雜性和負擔。此外，隨著框架不斷發(fā)展，開發(fā)人員就需要不斷更新自己的技能和理解，以跟上技術發(fā)展的步伐。

圖片

總而言之，Next.js憑借其豐富的內(nèi)置功能（如基于文件的路由）為React開發(fā)提供了強大的支持。然而，與此同時，這些功能也伴隨著一定的責任和復雜性。盡管React本身（如與Vite結合使用）相對穩(wěn)定，但在Next.js生態(tài)系統(tǒng)中，你將不斷看到技術的前沿進展和創(chuàng)新。Next.js 致力于將 React 引入服務端，推動 React 技術的發(fā)展并引領行業(yè)趨勢。

Next.js 的優(yōu)勢：

• 內(nèi)置庫與明確觀點：Next.js 提供了豐富的內(nèi)置庫和工具，為開發(fā)者提供了明確和一致的開發(fā)觀點，降低了開發(fā)難度。
• 多樣的渲染技術：Next.js 支持服務器端渲染（SSR）和多種其他渲染技術，這有助于提高應用的性能和SEO效果。
• 性能優(yōu)化：如果使用得當，Next.js 可以顯著提高應用性能。
• SEO優(yōu)勢：由于其強大的SSR支持，Next.js 在SEO方面表現(xiàn)優(yōu)秀，確保了良好的搜索引擎可見性。
• 強大的后盾：Vercel 作為一家實力雄厚的企業(yè)，為Next.js的發(fā)展提供了堅實的后盾，確保了項目的持續(xù)更新和支持。
• 前沿技術投入：Next.js 始終關注并采用前端領域的最新技術，確保始終處于技術前沿。

Next.js 的缺點：

• 對前沿技術的依賴：Next.js 過于關注前沿技術，這可能導致一些開發(fā)者在跟進和學習上感到困難。
• 相對于純React或Vite的開銷：與僅使用React或Vite相比，使用Next.js可能會增加開發(fā)、部署和維護的開銷。
• 學習難度大：Next.js 功能強大但學習曲線較陡峭，需要開發(fā)者投入更多的時間和精力去學習和掌握。
• 框架限制：Next.js 作為框架，對開發(fā)方式有一定的限制，可能影響開發(fā)者的創(chuàng)新和靈活性。

Remix

Remix 是一個全棧框架，重新定義了 UI，并極大地提升了網(wǎng)絡性能、速度和用戶體驗。通過集成諸如 esbuild、React Router、服務器端渲染、生產(chǎn)服務器和后端優(yōu)化等前沿工具和技術，Remix 滿足了各種 Web 開發(fā)需求。

Remix 的優(yōu)勢體現(xiàn)在以下幾個方面：

• 高效的代碼編譯：Remix采用esbuild這一快速JavaScript/CSS打包器和壓縮器進行編譯，確保了閃電般的加載時間和最佳的代碼效率。
• 卓越的性能優(yōu)化：在服務器端采用漸進增強技術，只向瀏覽器發(fā)送必要的JavaScript、JSON和CSS內(nèi)容，顯著提升了性能并減少了帶寬占用。
• 智能渲染與數(shù)據(jù)管理：利用動態(tài)服務器端渲染技術，為用戶提供無縫和交互式的體驗。其智能設計能夠自動重新獲取變異數(shù)據(jù)，Remix 能夠無縫管理整個工作流程。
• 端到端的解決方案：Remix提供了一套完整的解決方案，包括React Router、服務器端渲染、生產(chǎn)服務器和后端優(yōu)化等，為開發(fā)者提供了極大的便利。

React 團隊認為 Remix 是一個具有嵌套路由功能的領先全棧 React 框架，能夠輕松打造出具有出色用戶體驗和卓越性能的動態(tài)網(wǎng)站。

Astro

Astro 允許開發(fā)人員創(chuàng)建以內(nèi)容為重點的網(wǎng)站。由于其島嶼架構和選擇性水合作用，它默認情況下使每個網(wǎng)站都具有快速性能。因此，對于需要SEO的網(wǎng)站來說，使用 Astro 是非常有益的。

圖片

從實現(xiàn)角度看，Astro 更加傾向于多頁面應用（MPA）的概念，而不是單頁面應用（SPA）。這一選擇閉合了應用類型的歷史循環(huán)，從多頁面應用的主導地位（2010年以前），到單頁面應用的崛起（2010年至2020年），再到現(xiàn)在的回歸多頁面應用。這一轉變首次將多頁面應用作為一個明確的術語。

Astro 是一個與框架無關的解決方案。這意味著既可以使用Astro自帶的組件語法，也可以選擇與熟悉的框架（如React）進行集成。盡管如此，Astro 僅用于服務器端渲染，并不會暴露給客戶端。只有當你決定將交互式島嶼模塊水合到客戶端時，才會將所有必要的JavaScript代碼傳輸?shù)綖g覽器中。

圖片

Gatsby

Gatsby 是一個基于 React 的開源框架，具備卓越的性能、可擴展性和安全性。其最大的亮點在于與知名部署平臺 Netlify 的無縫集成，這使得開發(fā)人員在整個項目周期內(nèi)都能高效地工作。Gatsby 與 Netlify 的結合帶來了驚人的構建和部署速度，比傳統(tǒng)方法快達 1000 倍。

Gatsby 的另一大特點是其豐富的插件生態(tài)系統(tǒng)。通過這些插件，開發(fā)人員可以輕松集成各種內(nèi)容源、API 和服務，實現(xiàn)單個網(wǎng)站的多元化內(nèi)容展示。借助 Gatsby 的 GraphQL 數(shù)據(jù)層，數(shù)據(jù)管理變得集中且高效。此外，Gatsby 還支持服務端渲染，即預渲染頁面時使用用戶訪問時獲取的數(shù)據(jù)。

React 團隊對 Gatsby 給予了高度評價，認為它是靜態(tài)內(nèi)容導向型網(wǎng)站的絕佳選擇。這一認可進一步突顯了 Gatsby 在提供動態(tài)和吸引人的靜態(tài)內(nèi)容方面的優(yōu)勢。通過使用 Gatsby，開發(fā)人員能夠快速構建高性能的網(wǎng)站，實現(xiàn)服務的無縫集成、高效的數(shù)據(jù)管理以及更快的開發(fā)與部署流程。

其他

當然，除了上面說的方式，還有很多創(chuàng)建 React 項目的方式：

• 使用 Parcel 而不是 Vite：Vite是一個快速的現(xiàn)代構建工具，但如果想嘗試一些不同的構建選項，可以考慮使用Parcel。Parcel是一個零配置的構建工具，具有出色的性能和開發(fā)者友好的使用體驗。
• 使用 Monorepo 設置（如Turborepo）：如果項目需要管理多個相關的子項目，同時使用不同的前端框架，那么Monorepo設置是一個不錯的選擇。Turborepo是一個Monorepo管理工具，可以方便地在項目中集成 Next.js 和 Astro 等框架。
• 使用 create-t3-app 進行tRPC開發(fā)：如果 React 項目需要與后端進行通信，并且希望使用 tRPC 輕松創(chuàng)建類型安全的 API 調(diào)用，那么 create-t3-app 是一個不錯的工具。它為React項目提供了 tRPC 的集成支持，使得開發(fā)和維護API調(diào)用變得更加簡單和高效。
• 使用 React Native + Expo 來開發(fā)移動應用：如果需要開發(fā)跨平臺的移動應用，React Native 是一個強大的選擇。結合 Expo 開發(fā)工具，可以更快地構建和迭代原生移動應用，并享受豐富的開發(fā)生態(tài)系統(tǒng)和強大的跨平臺支持。
• 使用 Tauri 或 Electron 來開發(fā)桌面應用：如果需要開發(fā)桌面應用，可以考慮使用 Tauri 或 Electron。Tauri 是一個基于 Rust 、最小化、快速和安全的桌面應用開發(fā)工具，而 Electron 則是一個廣泛使用的開發(fā)工具，具有強大的跨平臺支持和豐富的功能庫。

小結

要搭建一個 React 項目，首先需要確定項目需求和目標。根據(jù)不同的需求，可以選擇適合的框架和解決方案。以下是一些建議：

• Vite： 如果剛開始學習React，并希望盡可能貼近 React 的基礎知識，可以選擇使用 Vite。Vite 提供了一種快速開發(fā)和構建應用的方法，與React一起使用可以讓你更好地理解 React 的核心概念和開發(fā)流程。
• Next.js： 如果正在尋找一個基于 React 的具有多種渲染技術（和基礎架構）的框架，可以考慮使用 Next.js。Next.js 是一個流行的 React 框架，提供了服務端渲染（SSR）和客戶端渲染（CSR）兩種渲染方式，以及許多其他功能和工具，可以幫助你快速構建強大的應用。
• Remix： 如果 Next.js 不符合你的需求，并且需要一個集成了所有服務端渲染（SSR）功能的框架，可以嘗試使用 Remix。Remix 是一個新興的 React 框架，專注于提供最佳的服務端渲染和開發(fā)體驗。它具有許多先進的特性和工具，可以幫助你快速構建高質(zhì)量的 React 應用。
• Gatsby 和 Astro： 如果想創(chuàng)建一個以內(nèi)容為重點的網(wǎng)站，可以嘗試使用 Gatsby 或 Astro。Astro 是一個輕量級的框架，專門用于構建靜態(tài)網(wǎng)站和博客。它與 React 一起使用可以輕松地創(chuàng)建動態(tài)和交互式的網(wǎng)站，同時保持性能和可擴展性。Gatsby 也是一個非常流行的 React 框架，專門用于構建靜態(tài)網(wǎng)站和博客。它提供了許多強大的特性和工具，可以幫助你快速構建高質(zhì)量的 React 應用。