如果您想使用 React 建立全新的應用程式或網站，我們建議您選擇社群中流行的 React 框架之一。
您可以不使用框架來使用 React，但我們發現大多數應用程式和網站最終都會構建解決方案來解決常見問題，例如程式碼分割、路由、資料擷取和產生 HTML。這些問題是所有 UI 函式庫的通病，而不僅僅是 React。
透過從框架開始，您可以快速開始使用 React，並避免日後 essentially 建立自己的框架。
深入探討
您當然可以不使用框架來使用 React—這就是您將 React 用於現有頁面的部分內容的方式。 但是，如果您要使用 React 建立全新的應用程式或網站，我們建議您使用框架。
原因如下。
即使您一開始不需要路由或資料擷取，您可能也想要新增一些函式庫來處理它們。隨著每個新功能的加入，您的 JavaScript 程式碼包會不斷增長，您可能需要找出如何針對每個路由單獨分割程式碼。隨著您的資料擷取需求變得更加複雜，您可能會遇到伺服器-用戶端網路瀑布效應，導致您的應用程式感覺非常緩慢。隨著您的受眾包含更多網路條件差和低階裝置的使用者，您可能需要從您的元件產生 HTML 以提前顯示內容—無論是在伺服器上還是在建置期間。更改您的設定以在伺服器上或在建置期間執行部分程式碼可能非常棘手。
這些問題並非 React 特有的。這就是為什麼 Svelte 有 SvelteKit、Vue 有 Nuxt 等等。 要自行解決這些問題，您需要將您的 bundler 與您的路由器和您的資料擷取函式庫整合。讓初始設定運作起來並不困難，但在建立一個即使隨著時間推移也能快速載入的應用程式方面，有很多微妙之處。您會希望傳送最少的應用程式程式碼，但在單個用戶端-伺服器往返中完成，並與頁面所需的任何資料並行。您可能希望頁面在 JavaScript 程式碼執行之前就能互動，以支援漸進式增強。您可能希望為您的行銷頁面產生一個完全靜態的 HTML 檔案資料夾，這些檔案可以託管在任何地方，並且仍然可以在停用 JavaScript 的情況下工作。自行建置這些功能需要真正的努力。
此頁面上的 React 框架預設會解決此類問題，而無需您額外的工作。它們讓您可以從非常精簡的狀態開始，然後根據您的需求擴展您的應用程式。每個 React 框架都有一個社群，因此更容易找到問題的答案和升級工具。框架也為您的程式碼提供了結構，幫助您和其他人保留不同專案之間的上下文和技能。相反，使用自定義設定更容易卡在不受支援的相依性版本上，您最終基本上會建立自己的框架—儘管沒有社群或升級路徑（如果它與我們過去製作的框架有任何相似之處，則設計更為隨意）。
如果您的應用程式有不尋常的限制，這些框架無法很好地滿足，或者您更喜歡自己解決這些問題，您可以使用 React 建立自己的自定義設定。從 npm 取得 react 和 react-dom，使用像 Vite 或 Parcel 之類的 bundler 設定您的自定義建置流程，並根據您對路由、靜態產生或伺服器端渲染等的需求新增其他工具。
生產級 React 框架
這些框架支援您在生產環境中部署和擴展應用程式所需的所有功能，並且正朝著支援我們的全端架構願景努力。我們推薦的所有框架都是開放原始碼，擁有活躍的社群提供支援，並且可以部署到您自己的伺服器或主機供應商。如果您是框架作者，並且有興趣將您的框架列入此清單，請告知我們。
Next.js
Next.js 的 Pages Router 是一個全端 React 框架。它功能豐富，讓您可以建立任何規模的 React 應用程式，從大多為靜態的部落格到複雜的動態應用程式。若要建立新的 Next.js 專案，請在終端機中執行
如果您是 Next.js 的新手，請查看Next.js 學習課程。
Next.js 由 Vercel 維護。您可以將Next.js 應用程式部署到任何 Node.js 或無伺服器主機，或部署到您自己的伺服器。Next.js 也支援靜態匯出，這不需要伺服器。
Remix
Remix 是一個具有巢狀路由的全端 React 框架。它允許您將應用程式分解成巢狀的部分，可以並行載入資料並根據使用者操作進行重新整理。若要建立新的 Remix 專案，請執行
如果您是 Remix 的新手，請查看 Remix 的部落格教學（簡短）和應用程式教學（詳細）。
Remix 由 Shopify 維護。當您建立 Remix 專案時，您需要選擇您的部署目標。您可以使用或編寫轉接器，將 Remix 應用程式部署到任何 Node.js 或無伺服器主機。
Gatsby
Gatsby 是一個用於快速建置 CMS 支援網站的 React 框架。其豐富的插件生態系統和 GraphQL 資料層簡化了將內容、API 和服務整合到一個網站中的過程。若要建立新的 Gatsby 專案，請執行
如果您是 Gatsby 的新手，請查看Gatsby 教學。
Gatsby 由 Netlify 維護。您可以將完全靜態的 Gatsby 網站部署到任何靜態主機。如果您選擇使用僅限伺服器的功能，請確保您的主機供應商支援 Gatsby 的這些功能。
Expo（適用於原生應用程式）
Expo 是一個 React 框架，可讓您使用真正的原生 UI 建立通用的 Android、iOS 和 Web 應用程式。 它提供了一個用於React Native 的 SDK，讓原生部分更容易使用。若要建立新的 Expo 專案，請執行
如果您是 Expo 的新手，請查看Expo 教學。
Expo 由Expo（公司）維護。使用 Expo 建置應用程式是免費的，您可以將它們提交到 Google 和 Apple 應用程式商店，不受限制。 Expo 還提供選擇性付費雲端服務。
尖端 React 框架
在我們探索如何持續改進 React 的過程中，我們意識到將 React 與框架（特別是路由、打包和伺服器技術）更緊密地整合，是我們幫助 React 使用者建置更出色應用程式的最大機會。 Next.js 團隊已同意與我們合作研究、開發、整合和測試與框架無關的尖端 React 功能，例如React 伺服器組件。
這些功能每天都越來越接近生產就緒狀態，我們一直在與其他打包器和框架開發人員洽談整合這些功能。我們希望在一兩年內，此頁面上列出的所有框架都能完全支援這些功能。（如果您是框架作者，並且有興趣與我們合作試驗這些功能，請告知我們！）
Next.js (App Router)
Next.js 的 App Router 是 Next.js API 的重新設計，旨在實現 React 團隊的全端架構願景。 它允許您在伺服器上，甚至在建置期間運行的異步組件中提取數據。
Next.js 由 Vercel 維護。您可以將 Next.js 應用程式部署 到任何 Node.js 或無伺服器託管，或您自己的伺服器。Next.js 也支援 靜態匯出，這不需要伺服器。
深入探討
Next.js 的 App Router 打包器完整地實現了官方的 React 伺服器組件規範。這讓您可以在單個 React 樹中混合建置時、僅限伺服器端和互動式組件。
例如，您可以將僅限伺服器端的 React 組件編寫為一個從資料庫或檔案中讀取的 async 函式。然後，您可以將數據從它傳遞到您的互動式組件。
// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
// 1. You're on the server, so you can talk to your data layer. API endpoint not required.
const talks = await db.Talks.findAll({ confId });
// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
const videos = talks.map(talk => talk.video);
// 3. Pass the data down to the components that will run in the browser.
return <SearchableVideoList videos={videos} />;
}Next.js 的 App Router 也整合了 使用 Suspense 進行數據提取。這讓您可以直接在 React 樹中為使用者介面的不同部分指定加載狀態（例如骨架佔位符）。
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>伺服器組件和 Suspense 是 React 的功能，而不是 Next.js 的功能。然而，在框架級別採用它們需要認同和大量的實作工作。目前，Next.js App Router 是最完整的實作。React 團隊正在與打包器開發人員合作，使這些功能更容易在下一代框架中實作。