v19.2Latest

建立 React 應用程式

如果你想使用 React 建立新的應用程式或網站,我們建議從一個框架開始。

如果你的應用程式有現有框架無法很好滿足的限制、你偏好建立自己的框架,或者你只是想學習 React 應用程式的基礎知識,你可以從頭開始建立 React 應用程式

全端框架

這些推薦的框架支援你在生產環境中部署和擴展應用程式所需的所有功能。它們整合了最新的 React 功能,並充分利用了 React 的架構。

注意

全端框架不需要伺服器。

本頁的所有框架都支援用戶端渲染(CSR)、單頁應用程式(SPA)和靜態網站生成(SSG)。這些應用程式可以部署到CDN或靜態託管服務,無需伺服器。此外,這些框架允許你在適合你的使用案例時,按路由添加伺服器端渲染。

這讓你可以從一個純用戶端的應用程式開始,如果之後你的需求改變,你可以選擇在個別路由上使用伺服器功能,而無需重寫你的應用程式。請參閱你的框架文件來配置渲染策略。

js(應用程式路由器)

js 的應用程式路由器是一個 React 框架,它充分利用了 React 的架構來實現全端 React 應用程式。

npx create-next-app@latest

Next.js 由Vercel維護。你可以部署 Next.js 應用程式到任何支援 Node.js 或 Docker 容器的託管供應商,或到你自己的伺服器。Next.js 也支援靜態匯出,這不需要伺服器。

React Router(v7)

React Router是 React 最受歡迎的路由庫,可以與 Vite 搭配使用來建立一個全端 React 框架。它強調標準的 Web API,並有幾個準備好部署的模板,適用於各種 JavaScript 執行環境和平台。

要建立一個新的 React Router 框架專案,請執行:

npx create-react-router@latest

React Router 由Shopify維護。

Expo(適用於原生應用程式)

Expo是一個 React 框架,讓你建立具有真正原生使用者介面的通用 Android、iOS 和網頁應用程式。它為React Native提供了一個 SDK,使原生部分更易於使用。要建立一個新的 Expo 專案,請執行:

npx create-expo-app@latest

如果你是 Expo 的新手,請查看Expo 教學

Expo 由Expo(公司)維護。使用 Expo 建立應用程式是免費的,你可以不受限制地將它們提交到 Google 和 Apple 應用程式商店。Expo 另外提供可選的付費雲端服務。

還有其他正在發展中的框架,正朝著我們的全端 React 願景努力:

  • TanStack Start(測試版):TanStack Start 是一個由 TanStack Router 驅動的全端 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文件 SSR、串流、伺服器函數、打包等功能。
  • RedwoodSDK:Redwood 是一個全端 React 框架,包含許多預先安裝的套件和配置,使得建立全端網頁應用程式變得容易。
Deep Dive
哪些功能構成了 React 團隊的全端架構願景?

從頭開始

如果您的應用程式有現有框架無法很好滿足的限制、您偏好建立自己的框架,或者您只是想學習 React 應用的基礎知識,還有其他選項可以從頭開始一個 React 專案。

從頭開始提供了更多的靈活性,但確實需要您為路由、資料擷取和其他常見使用模式選擇使用哪些工具。這很像建立您自己的框架,而不是使用現有的框架。我們推薦的框架已經為這些問題內建了解決方案。

如果您想建立自己的解決方案,請參閱我們的指南:從頭開始建置 React 應用程式,其中說明了如何使用建置工具(例如 ViteParcelRSbuild)來設定新的 React 專案。


如果您是框架作者,並希望被列入此頁面,請告訴我們