date: 2021/7/26
⚛️ React - 基礎
React - 基礎環境引入
- Babel
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
- 瀏覽器不認識 ES6,依靠 Babel 把 ES6 轉成 ES5
- 瀏覽器不認識 jsx,依靠 Babel 把 jsx 轉成 js
- 可以更流暢的編碼
- React 核心庫
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
- React 擴展庫(讓 React 幫你操作 DOM)
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
React 起手式
-
首先建立一個 HTML
-
並在 script 內編寫虛擬 DOM
-
畫面呈現
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
React - jsx 語法規則 與 必須知道的地方
-
這時候 HTML 添加樣式
-
script 內將內容用變數的方式展現
-
畫面呈現
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
總結 jsx 語法規則
- 定義虛擬 DOM 時,不要寫引號。
- 標籤中混入 JS 表達式要用
{}
包起來。
- 樣式的類名指定不要用
class
,要用 className
。
- 內聯樣式,要用
style={{ key=value }}
的形式去寫。
- key 如果像是
font-size
,要改成駝峰命名 fontSize
。
- value 需要用引號包起來。
- 虛擬 DOM 必須只有一個根標籤
- 標籤必須閉合
- 標籤首字母
- 如果小寫開頭,則將把標籤轉為 HTML 中同名元素,如果 HTML 中無該標籤同名元素,則報錯。
- 如果大寫開頭,React 就去渲染對應的組件,如果組件沒有定義,則報錯
參考資料