React-[入門篇]- React 起手式 |CRA建立React專案


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的元件,就是以元素標籤的方式重複寫入


#React入門 #create-react-app







你可能感興趣的文章

運算子與運算元

運算子與運算元

CSS-[盒子的型態]- inline boxes | inline-block | block

CSS-[盒子的型態]- inline boxes | inline-block | block

[JS] 全面解析reduce()函數(二)

[JS] 全面解析reduce()函數(二)






留言討論