共用方式為

在 Windows 子系統 Linux 版上安裝 React

  • 發行項

本指南將逐步解說在 Linux 發行版上安裝 React （即.使用 vite 前端工具在 Windows 子系統 Linux 版 （WSL） 上執行的 Ubuntu。

如果您要建立單頁應用程式 (SPA)，以使用 Bash 命令或工具搭配和/或計劃部署至 Linux 伺服器或使用 Docker 容器，建議您遵循這些指示。 如果您不熟悉 React 且只想要學習，建議您考慮 直接在 Windows 上安裝 vite。

如需有關 React、決定使用 React (Web 應用程式)、React Native (行動應用程式) 和適用於 Windows 的 React Native (傳統型應用程式) 的一般資訊，請參閱 React 概觀。

必要條件

  • 安裝最新版本的 Windows 10 (版本 1903+、組建 18362+) 或 Windows 11
  • 安裝 Windows 子系統 Linux 版 (WSL)，包括 Linux 發行版本 (例如 Ubuntu)，並確定它以 WSL 2 模式執行。 可開啟 PowerShell 並輸入下列內容，以此方式進行檢查：wsl -l -v
  • 在 WSL 2 上安裝Node.js：這些指示會使用節點版本管理員 （nvm） 進行安裝，您將需要最新版本的 NodeJS 才能執行 vite，以及最新版的 Node 封裝管理員 （npm）。

重要

使用 WSL 安裝 Linux 發行版本將會建立用來儲存檔案的目錄：\\wsl\Ubuntu-20.04 (將 Ubuntu-20.04 取代為您使用的任何 Linux 發行版本)。 若要在 Windows 檔案總管中開啟此目錄，請開啟 WSL 命令列，使用 cd ~ 選取您的主目錄，然後輸入 explorer.exe .。請勿在掛接的 C 磁碟機 (/mnt/c/Users/yourname$) 上安裝 NodeJS 或儲存您將使用的檔案。 這樣做會大幅降低安裝和建置時間的速度。

安裝 React

若要在 WSL 上安裝完整的 React 工具鏈，建議您使用 vite。

  1. 開啟 WSL 命令列 (即 Ubuntu)。

  2. 建立新的專案資料夾：mkdir ReactProjects，並進入該目錄：cd ReactProjects。

  3. 使用 vite 安裝 React：

    npm create vite@latest my-react-app -- --template react

  4. 安裝之後，請將目錄變更為新的應用程式（“my-react-app”或您選擇呼叫它的任何專案）：cd my-react-app、安裝相依性：，然後啟動您的本機開發伺服器： npm installnpm run dev

    此命令將會啟動 Node.js 伺服器，並啟動新的瀏覽器視窗，以顯示您的應用程式。 您可以使用 Ctrl + c 來停止在命令列中執行 React 應用程式。

注意

Vite 包含使用 Babel、esbuild 和 Rollup 的前端組建管線，但不會處理後端邏輯或資料庫。 如果您要使用使用Node.js後端的 React 建置伺服器轉譯的網站，建議您 安裝Next.js，而不是此 Vite 安裝，其用途更適用於單頁應用程式（SPA）。 如果您想要建置靜態內容導向的網站，您也可以考慮安裝 Gatsby。

  1. 當您準備好將 Web 應用程式部署至生產環境時，請執行 npm run build 以在 “dist” 資料夾中建立應用程式的組建。 您可以在部署靜態網站中深入瞭解。

其他資源