【React學習筆記】React 入門第二課 | 安裝及資料介紹接續著 React 第一課的內容,以圖文及影片多樣的呈現方式,說明以 terminal 從 2 種不同的方式安裝 React ,並簡要的介紹了安裝後各檔案及資料夾的內容。Allen2024 年 7 月 25 日React 學習筆記 如何安裝 React ? 打開已安裝好的 VScode 在 VScode 中點擊 open 並創建一個新的資料夾以安裝 React 檔案 點擊上方終端機(terminal),此處有 2 種方式可以安裝 React 。 Terminal 安裝 React(輸入 npx create-react-app 專案名稱) Vite 安裝 React(輸入 npm create vite@latest ) 接續根據指示輸入 npm install 完成完整安裝(後續以 Vite 安裝 版本做說明)輸入 npm run dev 即可得到以下資訊(圖一),並將網址輸入於瀏覽器即可順利以 React 介面開啟網頁(圖二)。 (圖一) (圖二) 回到 VScode 接續介紹已安裝的資料,分別為: node_modules:此資料夾負責管理運行此次 React 專案的各個套件 public:此資料夾負責管理文字、圖片等靜態資源 src:此資料夾負責管理專案的各項原始碼資料 index.html 檔案:為此專案唯一一個 HTML 檔案,SPA 網頁的核心(還記得 SPA 類型的網頁嗎?) package.json:此檔案以文字記錄了專案內所有資料,如專案名稱、版本號及所使用的套件。