JSX is NOT HTML

1. 《React 思維進化》 by Zet
P.47 ~ 85 關於 JSX 基礎的章節
2-4 JSX 根本就不是在 JavaScript 中寫 HTML (P.47~64)
2-5 JSX 的語法規則脈絡與畫面渲染的實用技巧 (P.65~85)
Steward

2. 📒 我是誰
• Steward 鄒柏軒
• 曾是接案視覺設計師，與工程師曾經創業幾次 😢 (失敗)，有經營自媒體跟寫
Medium , 參考一 this 參考二 vercel+flask
• 最近參與全端轉職營隊，製作前端 作品 (Next.js, React, + Git)
• 正在尋找前端工程師工作
• 以 python/flask 與 MySQL, AWS, SCSS, Flexbox 製作過 電商 Demo 專案
• 略懂 Node.js, mogodb 參考 自串 gpt 聊天 參考 廢話產生器
• 多年接案視覺與部分介面設計師 (UI, figma, graphics) 作品集
https://hidden-gem.xyz/

3. 📒 簡報大綱
P.47~85
• JSX 的本質
• JSX 原來是__
• 📒 語法糖
• Babel 是什麼
• Babel 的運作時機
• JSX 語法規則、渲染技巧
• 標籤嚴格閉合
• 樣板值與表達式
• 動態列表渲染
• 條件式判斷渲染
• 什麼是 Fragment

4. JSX 不是在 JavaScript 裡面寫 Html
• JSX 只是一種語法糖 (Syntactic Sugar)
P.4
8

5. 📒 語法糖能吃嗎？
• Syntactic Sugar
• 語法糖：程式語言中添加的語法，不會影響功能運作，但對人
類更簡潔流暢、好理解
• e.g.,：JS ES6 的 Class, CSS 的 SASS
function User(name){
this.name = name
}
let user1 = new User(name)
User.prototype.getName = function (){
return this.name
}
class User{
constructor (name){
this.name = name
}
getName(){
return this.name
}
}
傳統建構函式
👈 分不出跟一般函式差異
Class 宣告式
🔗 Sass Guidelines
P.4
8

6. D
P.49~51
JSX 語法 React.creatElement 呼叫回傳
JSX 本質上就是 React.createElement 的呼叫
• 更方便地建立樹狀結構
• JSX 更改命名如 className 是因為 React
Element 屬性命名的規則，不是因為 JSX 自己規
定的
const reactElement = React.createElement(
‘div’,
{ id: ‘wrapper’, className= ‘foo’ },
React.createElement(
‘p’,
{className: ‘content’},
‘Hello World’
)
);
const reactElement = (
<div id=“wrapper” className=“foo”>
<p className=“content”>
Hello World
</p>
</div>
); 👈 括號可省略

7. 📒 Babel 是一種 Transpiler 轉譯器
• Translate 翻譯+Compiler 編譯器, 又稱
source-to-source compiler
高階語言寫法轉換
• Compiler 編譯器 如：狗 👉 原子
• Transpiler 轉譯器 如：狗 👉 另一種狗
Compiler 編譯器 👉
高階語言
機器語言 (0, 1)
仍是 高階語言
Transpiler 轉譯器 👉
P.51~52
🥯

8. 💡 Babel 引用作為 JSX Transformer
• Babel => `@babel/plugin-transform-react-jsx`
• React 引用 `@babel/preset-react` 已包含前者
• Next 架設 `next/babel`
• 自定義 `babel.config.js` / `.babelrc`
P.5
3
ES6 箭頭函式
[1,2,3].map( n => n + 1)
[1,2,3].map( function(n){
return n + 1;
}
傳統函式 (瀏覽器相容)
Babel

9. DOM
Babel 的轉譯時機是 Build Time
• 所以 <17 要 `import React`
• React17 還改善 bundle、效能、提示
• 17 import { jsx as _jsx } from ‘react/jsx-runtime’;
Coding Time 編寫階段 Build Time 建置階段 runTIme 執行階段
<17
JSX
React.createElement
HTML
>=17 _jsx
Babel VirtualD
OM
P.54~60
靜態分析處理，產生 output.js
• 🔗 JSX
Transformer
react-dom

10. • 💡 最外圍的表達式 (expression) 外的括號可加可不加
• 本質上是呼叫 React.createElement() 的回傳，所以是表達式
• 括號是 JS 裏頭包住表達式的習慣
P.5
4
JSX 語法
const reactElement = (
<div id=“wrapper” className=“foo”>
<p className=“content”>
Hello World
</p>
</div>
); 👈 括號可省略

11. JSX 的語法規則脈絡與畫面渲染的實用技巧
P.65~85

12. 標籤要嚴格閉合
Tip 1
P.66~68
🌟 `<br>`,`<img>`,`<span>`,`<input>`
🌟 可以單個存在(不用成套)
但不可以漏寫 closing tag `/ `
錯誤 /repl.jsx Unterminated JSX contents
HTML 可以, 如 <img src=‘some.png’ > 沒有也不會噴錯
🌟 沒有第 3 個 React.CreateElements 參數 (html 標籤,
Attributes 屬性, Element 元件) . 屬性、元件 可有若干，屬性
可以是 jsx 語法
🌟 另外，第 2 個沒有屬性 (attributes) 會是 `null`

13. const reactElement = React.createElement(
‘div’,
{ id: ‘wrapper’, className= ‘foo’ },
React.createElement(
‘img’,
{ src : ‘./img.jpg’}
// 沒有第三個參數
)
);
const reactElement = (
<div id=“wrapper” className=“foo”>
<img src=“./img.jpg”>
</div>
);
JSX 語法 React.creatElement 呼叫回傳
🌰
P.6
7

14. • 💡標籤沒有屬性，第二個參數則為 null
P.6
7
JSX 語法 React.creatElement 呼叫回傳
const reactElement = React.createElement(
’span’,
null,,
‘words’
);
const reactElement = (
<span >
words
</span>
);
👈 這邊

15. ✏️ HTML 🥯 JSX
語言
Script Language 標籤語言 Programmung Language
程式語言
讀取 只可讀標籤語法、固定字串
可以用 Literals 字面值與
Expressions 表達式運算
特性
靜態文字，沒有資料型別也
無法運算
程式語言
相當於「配方」
P.68~69

16. JSX 字面值的使用
- 字面值若有固定值，則 HTML 也可達成
- 字面值 以 className=“” 的雙引號把值
包起來
- 代表裡頭的屬性值也是字面值
P.69~71
const div = {
<div className=“bar”>
字串
</div>
);
👈 字面值
👈 有 “” ，為字面值
const div = React.createElement {
‘div’,
{
className=‘bar’
},
‘字串’
);
👈 字面值
JSX
React Element

17. P.69~70
JSX 表達式的使用
表達式在 {} 裏頭
- 被設為獨立元件，增進效能
const div = {
<div onClick={handleClick}>
數字表達為 {number * 99}
</div>
);
JSX
const div = React.createElement {
‘div’,
{
onClick : handleClick
},
‘數字表達為’ ,
number * 99
);
React Element
👈 變數
👈 變數
不只一個元件 👉

18. JSX 語法中的 JSX
- 呼叫 React.createElement 屬於表達式，原本應該要以 {} 包起來
- 為了模擬 HTML，你可以直接使用
P.72~73
JSX 語法 React.creatElement 呼叫回傳
const reactElement = React.createElement(
’ul’,
null,
React.createElement(‘li’, null, ‘item1’),
‘🍇’,
React.createElement(‘li’, null, ‘item 2’),
‘🍎’
);
const reactElement = (
<ul >
{<li> item 1</li>}
🍇
<li> item 2 </li>
🍎
</ul>
);
👈 可省略

19. JSX 支援類別
資料類別 結果
String 字串 字串
Number 數字 會轉字串
Array 陣列 攤開
Boolean 布林值 (包含 0) 忽略
Null 忽略
Undefined 忽略
Object 物件 處理失敗
Function 函式 處理失敗
P.73~74

20. 動態列表渲染 Dynamic Rendering
- array map 產生
- ⚠️ 如果沒有 key
錯誤：Each child in a list should have a unique "key" prop.
-～ key 要用資料的自訂 id，而非 index
Tip 2
P.74~76

21. Warning ⚠️ 使用 index 當 key 會有非預期錯誤
- 順序顛倒，會以為是內容改變，而不是實質改變
（以為是換帽子，但其實是換人）
- 新增刪除項目，會重新渲染
- 新增之後，原本第一項的內容會變到第二項（因為他現在是第二個）
P.7
6

22. 條件式判斷渲染
畢竟就是原生 JS
- &&, 布林會被忽略 藉此決定是否顯示
- Truthy: 特殊值 infinity, {},
- Falsy: 特殊值 null, undefined, NaN (一種number)
- 💡 若為 0 但要判斷是否是數字，要以 typeof 處理，不然會被當 Falsy
而顯示不出來
- a?b:c, 三元運算子 藉此決定如何顯示
Tip 3
P.76~80

23. JSX 只能有一個節點，
本質是呼叫 React.createElement，
回傳一個 React Element
- 所以外圍需要加上 <div></div>
- 會造成無語意的多餘層級
P.81~82

24. Fragment 避免多餘層級
- 全拿仔：能當容器，但不會增加無意義層級
- <Fragment></Fragmanet>
- 可直接 <></>
Tip 4
P.82~84
JSX 語法
const reactElement = (
<Fragment>
<p className=“content”>
Hello World
</p>
</Fragment>
);
const reactElement = (
<>
<p className=“content”>
Hello World
</p>
</>
);

25. 《React 思維進化》 by Zet
P.47 ~ 85 關於 JSX 基礎的章節
2-4 JSX 根本就不是在 JavaScript 中寫 HTML (P.47~64)
2-5 JSX 的語法規則脈絡與畫面渲染的實用技巧 (P.65~85)
Steward