JQuery實作 — 卡片收合

JQuery實作 — 列表收合

React — 列表渲染 (List Rendering)

📚 列表渲染 (List Rendering) 定義

• 非 JSX 的變數或函數都必須以 { } 包起來!
• 將可辨識的JSX元素陣列，做列表渲染 ➡️ {[<> </>,<> </>,...]}
• 可以用 map() 或 filter() 導出並渲染列表
• React 規定列表渲染的Array裡每個 element 都應該要有一個 key，如此才能給予每個 element 一個固定的身份
  • Key 幫助 React 分辨哪些項目被改變、增加或刪除，所以不可重複且必須是唯一
  • Key 只有在周遭有 Array 的情境中才有意義
  • 用 Key 抽離 Component ➡️ 如果要抽離一個 ListItem component ，應該要把 Key 放在 Array 裡的 <ListItem /> element 上，而不是把它放在 ListItem 裡面的 <li> element 上

React — JSX用法整理

⭐ JSX 語法重點

JSX 語法重點在於:
允許我們在 JS 的檔案中使用 HTML 的標籤，並且使用 JSX 語法建立「一個 React 的 element」，
而這樣的標籤語法比起 HTML，更貼近於 JavaScript!

React — 函式元件(Functional Component)

🔖 Render Element

1️⃣ 建立 React 應用程式最小的單位是 Element

1

const element = <h1>Hello, world</h1>;

React — 條件渲染(Conditional Rendering)

條件渲染 (Conditional Rendering) 定義

• 讓元件依循條件做屬性、內容、配置更動
• 配合Reactjs的資料單向流模式，讓狀態更可預期
• 因為元件即方法，直接將判斷式寫在方法中
• 可以配置"文字內容"、“樣式改變”、“屬性(props)”、“顯示路由(React route)”

🔎 參考資料

• ES6 入门教程

🔎 參考資料

• ES6 入门教程