React
JS
第四堂放課 Component
講師介紹
姓名：吳怡宣
綽號：Coco
社團：景美電資 CMIOC
職位：機動
學術力：Scratch
教學課程：今天第一次教課
Setup
環境設置
讓 JavaScript 跨平台開發的開源執行環境
React 依賴 Node.js 開發
JSX
JavaScript XML 是什麼？
function Card({ name, role }) {
return (
<div className="card">
<h2>{name}</h2>
<p>{role}</p>
</div>
)
}一個簡單的 JSX 程式
把 HTML 當作參數傳遞
function Card({ name, role }) {
return (
<div className="card">
<h2>{name}</h2>
<p>{role}</p>
</div>
)
}- JavaScript 語法擴展
- 應用於 React 框架
- 在 JS 中編寫類似 HTML
function Card({ name, role }) {
return (
<div className="card">
<h2>{name}</h2>
<p>{role}</p>
</div>
)
}1. 一次只能傳遞一個元素
function Card({ name, role }) {
return (
<h2>{name}</h2>
<p>{role}</p>
)
}一次傳遞多個元素時要用 container 包起，例如<> </>、<div> </div>
function Card({ name, role }) {
return (
<div className="card">
<h2>{name}</h2>
<p>{role}</p>
</div>
)
}2. 需要插入 JavaScript 表示式時用 {}
在 HTML 裡需要寫 JS 表示式時用 {}包起
function Card({ name, role }) {
return (
<div className="card">
<h2 style={{ backgroundColor: 'blue' }}>{name}</h2>
<p>{role}</p>
</div>
)
}3. Style 寫法
style 以「物件」形式傳入，屬性名稱「駝峰式命名」
屬性值為「字串」格式
function Card({ name, role }) {
return (
<div className="card">
<h2 style={{ backgroundColor: 'blue' }}>{name}</h2>
<p>{role}</p>
</div>
)
}3. Style 寫法
外層大括號代表包裹 JavaScript 語法
內層大括號代表物件形式
駝峰式命名：background-color = backgroundColor
font-size = fontSize
function Card({ name, role }) {
return (
<div className="card">
<h2 style={{ backgroundColor: 'blue' }}>{name}</h2>
<p>{role}</p>
</div>
)
}4. class 改為 className
因與 JavaScript 保留字衝突，class 要用 className 取代
5. onclick 改為 onClick
JSX 中事件名稱都改為駝峰式命名，如 onClick
以及額外的 onChange、onSubmit 等
<button onclick="handleClick()">
<button onClick={handleClick}>6. 函式綁定
<button onclick="handleClick()">
原 HTML 綁定方法
<button onClick={handleClick}>JSX 改傳入函式本身
<button onClick={() => handleClick(id)}>用箭頭函式可傳入多個函式/傳入參數
Component
函式元件
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton />
</div>
)
}
export default App開啟第二堂課的資料夾，找到 src/App.tsx，並修改為以下程式
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton接著開啟一個新資料夾 src/components
並創建 MyButton.tsx 新增以下程式
運行網頁並開啟瀏覽器檢視結果
網頁如果出現這個按鈕並且可以點擊觸發效果就成功了！
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton />
</div>
)
}
export default App第二堂有介紹過 App.tsx 是將 React 元素放上網頁的起點
元素也通過 App.tsx 放到網頁中
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton />
</div>
)
}
export default App通過 import 匯入指定路徑的元件
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton />
</div>
)
}
export default App和元件的寫法類似（用函式組成），包括整個網頁的內容
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton />
</div>
)
}
export default App直接以元素的方式使用匯入的元件（<名稱/>）
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton />
</div>
)
}
export default App把 App 函式匯出，讓 main.tsx 讀取並架到網頁上
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButtonMyButton 的元件程式，通過分出檔案可以更好的整理
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButtonuseState 會在後面詳細講解
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton函式元件的程式，回傳值是 HTML 元素
Props
Component 傳入資料
將資料傳進 Component 的方式
ex. 三個不同的名牌元件，傳入不同的名字等資料，才能重複使用
接續 MyButton.tsx
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton定義函式時在括號內加入大括號 { 參數名稱, .... }
import { useState } from 'react'
interface MyButtonProps {
name: string
}
function MyButton({ name }: MyButtonProps) {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times by {name}
</button>
)
}
export default MyButtonts 要通過 interface 定義 props 的型別
修改 App.tsx
import MyButton from './components/MyButton'
function App() {
return (
<div>
<MyButton name="tako" />
</div>
)
}
export default App和一般元素的屬性一樣寫法
完成
Props 預設值的寫法
type Props = {
name?: string
}
function Card({ name = "匿名使用者" }: Props) {
return <h1>{name}</h1>
}問號代表可有可無
設定預設值
1. 需注意使用時的傳入資料型態
<MyButton name="67" />假如要傳入數字或布林值時，需要用{}包裹，否則會變成字串
<MyButton name={67} /><MyButton name={true} />2. 傳入值唯讀，不可被更改
傳入的資料不能直接用變數的方法更動
使用 <>中間的資料</>
function App({ children }: { children: React.ReactNode }) {
return (
<button>{children}</button>
)
}
export default App元素包裹的資料為 children，會以 children 的屬性傳入
useState
狀態更新
會改變的資料（與變數差在變數不會即時更改頁面資料）
State
useState
用來建立 State 的工具
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton前面的 MyButton.tsx
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton匯入 useState 工具
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton建立 State (count: 現在的數字, setCount: 更改的方法, 0: 初始值)
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton按鈕被點擊時通過 setCount 更改 State 值，會同時通知頁面更新
import { useState } from 'react'
function MyButton() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}
export default MyButton頁面上顯示的 count 會自動更改
Practice
實作練習 (1)
繼已有的程式，實作一個進階的計數器，需有以下功能：
1. 增加1、減少1、歸零按鈕
2. 數值已經為0時減少1按鈕顯示「計數不得為負」
Thanks
歡迎下次再來！
React (4) Component
By 章魚
