當我需要創建React應用程式並需要後端時,我會首選使用 Next.js 框架。
Next.js 提供了許多內建功能,它非常受歡迎,遵循的約定也避免了我在分析和決策方面的困惑。
但有時我只想創建一個單純的 React 應用程式,也許是為了進行演示或開始一個專案,而不需要 Next.js 提供的所有內容。
我不想擔心這些,我只想自由地進行 React 實驗。
我過去使用過 create-react-app,但現在我使用 Vite。
Vite 是一個現代化的工具,提供了開發伺服器,速度非常快,許多 JavaScript 社群的人認為它是最佳選擇。
此外,它並不是一個特定於 React 的工具,因此你學到的任何東西都可以應用到其他支援的框架,例如Svelte、Vue等。
要使用 Vite 創建一個項目,首先進入你存放所有專案的文件夾,例如我個人的案例中是在用戶的主文件夾中的 dev
文件夾下。
然後運行 npm create [[email protected]](/cdn-cgi/l/email-protection)
。
為項目選擇一個名稱,該名稱也將是項目的文件夾名稱。在這個案例中,我選擇 “test”:
現在可以選擇一個框架,選擇 “React”。
然後選擇 JavaScript 或 TypeScript,依照個人喜好選擇。你也可以選擇使用 SWC。
完成!
現在進入新建立的專案資料夾:
cd test
運行以下指令安裝相依套件:
npm install
然後運行以下指令開始應用程式:
npm run dev
應用程式應該會在 http://localhost:5173 運行(如果該埠口已被使用,則可能會不同)。
現在你已經準備好在此應用程式上工作了!
以下是在 VS Code 中打開的應用程式資料夾。
你可以看到,Vite 已經創建了一個基本的應用程式,現在你可以打開 src/App.jsx
開始在其中進行開發工作。
這樣的工具之美在於,現在你可以新增文件,Vite 會自動識別它們,而無需像我們以前需要在 Node.js 專案中那樣重啟 npm run dev
。
而且當你保存一個組件時,它會自動更新你的瀏覽器。
這使得開發變得非常迅速和有趣!