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

Create React App 有什么問(wèn)題？

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

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

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

Vite

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

圖片

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

圖片

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

圖片

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

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

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

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

React + Vite 的缺點(diǎn)：

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

Next.js

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

圖片

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

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

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

圖片

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

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

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

Next.js 的缺點(diǎn)：

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

Remix

Remix 是一個(gè)全?？蚣埽匦露x了 UI，并極大地提升了網(wǎng)絡(luò)性能、速度和用戶體驗(yàn)。通過(guò)集成諸如 esbuild、React Router、服務(wù)器端渲染、生產(chǎn)服務(wù)器和后端優(yōu)化等前沿工具和技術(shù)，Remix 滿足了各種 Web 開發(fā)需求。

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

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

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

Astro

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

圖片

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

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

圖片

Gatsby

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

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

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

其他

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

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

小結(jié)

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

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