【React學習筆記】React 入門第二課 | 安裝及資料介紹

接續著 React 第一課的內容,以圖文及影片多樣的呈現方式,說明以 terminal 從 2 種不同的方式安裝 React ,並簡要的介紹了安裝後各檔案及資料夾的內容。

如何安裝 React ?

  • 打開已安裝好的 VScode 
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 介面開啟網頁(圖二)。
(圖一)
react-vite
(圖二)

   回到 VScode 接續介紹已安裝的資料,分別為:

  •  node_modules:此資料夾負責管理運行此次 React 專案的各個套件  
  • public:此資料夾負責管理文字、圖片等靜態資源
  • src:此資料夾負責管理專案的各項原始碼資料
  • index.html 檔案:為此專案唯一一個 HTML 檔案,SPA 網頁的核心(還記得 SPA 類型的網頁嗎?
  • package.json:此檔案以文字記錄了專案內所有資料,如專案名稱、版本號及所使用的套件。