如果你想要完全使用 React 建立新的應用程式或網站，我們建議從社群中流行的 React 框架中選擇一個。框架提供大多數應用程式和網站最終需要的功能，包括路由（routing）、資料擷取（data fetching）和產生 HTML。
生產級別的 React 框架
Next.js
Next.js 是一個全端 React 框架。 它非常靈活，讓你可以建立任何大小的 React 應用程式 - 從大部分是靜態的部落格到複雜動態的應用程式。要建立新的 Next.js 專案，在你的終端機中執行以下命令：
如果你是第一次使用 Next.js，請參考 Next.js 教學。
Next.js 是由 Vercel 維護。你可以將 Next.js 應用程式部署到任何 Node.js 或 serverless 主機，或是你自己的伺服器上。完全靜態的 Next.js 應用程式 可以部署到任何靜態主機上。
Remix
Remix 是一個具有巢狀路由（nested route）的全端 React 框架。 它讓你將應用程式分解成巢狀的部分，這些部分可以平行載入資料，並根據使用者的操作更新。要建立新的 Remix 專案，執行：
如果你是第一次使用 Remix，請參考 Remix 部落格教學（短篇）以及應用程式教學（長篇）。
Remix 是由 Shopify 維護。當你建立 Remix 專案時，需要選擇部署目標。你可以使用或撰寫一個 adapter，將 Remix 應用程式部署到任何 Node.js 或 serverless 主機上。
Gatsby
Gatsby 是一個用於快速 CMS 支援網站的 React 框架。 它豐富的外掛生態系，以及 GraphQL 資料層，簡化了將內容、API 和服務整合到一個網站中。要建立新的 Gatsby 專案，請執行以下命令：
如果你是第一次使用 Gatsby，請參考 Gatsby 教學。
Gatsby 由 Netlify 維護。你可以將完全靜態的 Gatsby 網站部署到任何靜態主機上。如果你選擇使用 server-only 的功能，請確保你的主機供應商支援它們用於 Gatsby。
Expo（針對 native apps）
Expo 讓你可以建立有著完全原生的 UI ，且通用於 Android、iOS 和 Web 的應用程式。 它提供了一個 React Native 的 SDK，使原生部分更容易使用。要建立新的 Expo 專案，請執行：
如果你是第一次使用 Expo，請參考 Expo 教學。
Expo 由 Expo（公司）維護。使用 Expo 構建應用程式是免費的，你可以無限制地將它們提交到 Google 和 Apple 應用商店。另外，Expo 還提供可選的付費雲服務。
Deep Dive
你絕對可以在沒有框架的情況下使用 React—這是你如何在頁面的一部分中使用 React。 然而，如果你正在完全使用 React 建立一個新的應用程式或網站，我們建議你使用框架。
以下是為什麼這麼做的原因。
即使在一開始可能不需要 routing 或是 data fetching，你可能還是想要增加一些相關的函式庫。隨著每個新功能的加入，JavaScript bundle 會越來越大，你可能需要找出如何為每個 routing 單獨拆分程式碼。當 data fetching 需求變得更加複雜時，你可能會遇到 server-client 的 network waterfalls，這會使你的應用程式感覺非常緩慢。當你的使用者中包含了有低速網路和低階設備的受眾時，你可能需要從 component 產成 HTML 以提早顯示內容 - 無論是在伺服器上或在建置期間。更改設定以在伺服器上或在建置期間執行部分程式碼可能非常棘手。
這些問題並非 React 特有的。這就是為什麼 Svelte 有 SvelteKit，Vue 有 Nuxt 等等。 要自己解決這些問題，你需要將 bundle 工具與 routing 和 data fetching 函式庫整合在一起。一開始設定不難，但隨著時間的推移，但要製作一個即使隨時間的推移也能快速載入的應用程式，會涉及很多細節。你希望傳送最少量的程式碼，在單個 client-server 往返，且與頁面所需的任何資料並行。你可能希望在 JavaScript 程式碼執行之前就可與頁互動面，以支援漸進式增強（progressive enhancement）功能。你可能還想產生完全靜態的 HTML 文件來顯示行銷網頁，在禁用 JavaScript 時也可以在任何地方托管且正常運作。而自己構建這些功能會很費工。
這個頁面上的 React 框架可以自動解決這些問題，而不需要你做任何額外的工作。 它們讓你可以從非常簡單的開始，然後根據你的需求擴展應用程式。每個 React 框架都有一個社群，因此更容易找到答案和升級工具。框架還可以給你的程式碼提供結構，幫助你和其他人在不同項目之間維持一定的脈絡和技能。相反地，使用客製化設定會更容易陷入不支援依賴版本中，最終你將建立自己的框架 - 雖然沒有社區或升級路徑（就像我們過去做過的那些，更加混亂的設計）。
如果你仍然不信服，或者你的應用程式有這些框架無法很好地滿足的非常規限制，並且你想要自己客制設定，我們不能阻止你 - 去做吧！從 npm 中獲取 react 和react-dom，使用像 Vite 或 Parcel 這樣的 bundle 工具設定自己的客製構建過程，並根據需求新增 routing、static generation 或 server-side rendering 等等的工具。
前沿的 React 框架
當我們探索如何繼續改進 React 時，我們意識到更緊密地將 React 與框架整合（特別是 routing、bundling 和伺服器技術），是我們幫助 React 使用者構建更好應用程式的大好機會。Next.js 團隊已同意與我們合作研究、開發、整合和測試與框架無關（framework-agnostic）的前沿 React 功能，像是 React Server Components 。
這些功能每天都越來越接近 production-ready，我們已與其他 bundler 和框架開發人員進行了交談，以整合它們。我們的希望是，在一年或兩年內，此頁面上列出的所有框架都將完全支持這些功能。（如果你是一位框架作者，有興趣與我們合作實驗這些功能，請告訴我們！）
Next.js (App Router)
Next.js 的 App Router 是 Next.js API 的重新設計，旨在實現 React 團隊的全端架構願景。 它允許你在執行於伺服器上或甚至是構建期間的非同步（asynchronous） component 中取得資料。
Next.js 由 Vercel 維護。你可以將 Next.js 應用程式部署到任何 Node.js 或 serverless 主機，或是你自己的伺服器上。Next.js 還支援靜態匯出，不需要伺服器即可執行。
Deep Dive
Next.js 的 App Router bundler 完全實作了官方的 React Server Components 規範。這讓你可以在單個 React tree 中混合 build-time、server-only 和和互動式元件。
例如，你可以將一個 server-only 的 React component 撰寫為 async 函式，該函式從資料庫或文件中讀取資料。然後，你可以將資料從該 component 傳遞給互動式 component：
// 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 進行 data fetching。這讓你可以直接在 React tree 中為使用者介面不同部分指定載入狀態（例如：skeleton placeholder）：
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Components 和 Suspense 是 React 的功能，而不是 Next.js 的。然而，在框架層面採用它們需要計畫和以及複雜的實現工作。目前，Next.js APP Router 是最完整的實現方式。React 團隊正在與 bundler開發人員合作，使這些功能在下一代框架中更容易實現。