React 搭配CRA
選擇專案的環境:這裡以create-react-app為例(範例練習用) /CRA
- 現在正式使用都是推薦Vite,因為create-react-app不會再更新了,這裡是搭配課程練習,所以我也想體驗看看CRA的環境建置
建立專案資料夾+下載CRA環境
node先切成v18版本:
下載成功會出現這樣:
搭建起來,資料夾會這樣:
打開終端機輸入$npm run start 就出現畫面了
其實CRA都幫我搭建好整個環境,包括node_module和git ,所以只要開啟專案就可見畫面
整理資料夾內容
把src所有檔案都刪除,動手重新起手式!
在src中建立index.js進入點檔案
- CRA搭配的webpack,index.js是所有被編譯的檔案進入點
- 在index.js上方:
- import React from 'react'
- import ReactDom from 'react-dom/react'
- 建立根元件App
- 制定App要渲染在頁面的#root區塊內
也可以加入嚴謹模式
寫入第二個元件pizza
把pizza食譜相關資料/物件放在App上方
創建一個pizza元件
將這個pizza元件以元素標籤的方式巢狀在App元件內,畫面就顯示出來pizza的內容了,若要重複使用多次pizza的元件,就是以元素標籤的方式重複寫入