我們主要會經由React的官方教學進行學習。
如果在挑戰環節中實作到有趣的題目,也會透過線上IDE分享給大家,方便快速上手。目前主要會採用CodeSandbox,萬一免費版遇到什麼限制,還有JSFiddle和Replit備援。
言歸正傳,在這裡我想將Components譯成組件,否則元件很容易不小心寫成元素Elements,哈哈。
Takeaway
- 組件的名稱必須以大寫開頭
- 不要在組件裡定義組件
- Create React App的根組件在src/App.js
- Next.js的根組件在pages/index.js
- return的括號裡沒有分號,分號要寫在括號後!
- 默認引入沒有{ },具名引入要加{ }
- 每個檔案裡只能有一個export default
![https://ithelp.ithome.com.tw/upload/images/20240806/20163002LNWRpukfpq.png](https://ithelp.ithome.com.tw/upload/images/20240806/20163002LNWRpukfpq.png)
- JSX可以讓React.createElement長得更像HTML
- JSX會透過Babel進行編譯
- jsx-runtime:使用_jsx方法達成React.createElement的工作
- 從17版開始,jsx-runtime讓使用者不用再import React
- JSX需要有父元素包多個元素,如空標籤Fragment
- JSX只能回傳父元素之因:JS裡return也只能傳一個值
- JSX裡的自閉合標籤都要在結尾加斜線,就像XML
- data-*或無障礙的aria-*屬性不受駝峰式命名限制
- 如果在JSX裡寫CSS,font-size也要改成駝峰
- 因為class是保留字,JSX裡的class要寫成className
- React官方推薦的HTML to JSX轉換器:HTML to JSX
- JSX裡可使用{ }引入JS表達式,用途有點類似樣板字面值
- 連接字串時和JS同樣使用加號,如src = {url + id + '.png'}
- 不同於HTML,在JSX裡,空白字元要用引號包住
- { }如何使用:作為文本或屬性,外面不會再包引號
Reference
React JSX in Depth - GeeksforGeeks