X13QQ

ES6篇－物件的增強(Object Enhancement)／Object.assign

屬性初始設定簡寫法

省略冒號(:)

練習REACT（３）

練習1

JSX前後標記語法範例

app.js

ES6篇－函式與作用域／傳⼊參數預設值(Default Parameters)

函式

基本語法結構

//匿名函式 function() {} 

//有名稱的函式 function foo() {}

傳⼊參數預設值

ES6－展開與其餘運算符

展開運算符，其餘運算符

展開運算符(Spread Operator)與其餘運算符(Rest Operator)是ES6中的其中兩種新特性，雖然這兩種特性的符號是⼀模⼀樣的，都是三個點(…)，但使⽤的情況與意義不同。

• 符號都是三個點(…)
• 都是在陣列值運算 ⼀個是展開陣列中的值
• ⼀個是集合其餘的值成為陣列

展開運算符(Spread Operator)

ES6－解構賦值

解構賦值

解構賦值(Destructuring Assignment)是⼀個在ES6的新特性，⽤於提取(extract)陣列或物件中的資料，新 語法可以讓程式碼在撰寫時更為簡短與提⾼閱讀性。

陣列解構賦值

練習REACT （２）／state與props

JSX只能一個ROOT TAG/使用不同元件類型/資料傳遞給子女元件/props使用/state與props

練習REACT （２）

JSX只能有一個root tag

App.js

HOOKS勾子／ESLint Plugin／練習REACT

HOOKS勾子

基本的 Hooks

• useState ‒ 可在函式型元件中使用 state(狀態)
• useEffect ‒ 可在函式型元件中使用生命周期方法
• useContext ‒ 可在函式型元件中使用 Context API

React.js－解構賦值／展開與其餘運算符／類別／模組系統

React.js－解構賦值／展開與其餘運算符／類別／模組系統

React.js－認識-解構賦值／展開與其餘運算符／類別／模組系統

解構賦值

解構賦值(Destructuring Assignment)語法

使用Express.js／靜態檔案

Express

• Node.js 中最流行的 Web 開發框架/模組
• 簡潔靈活的特性
• 豐富完整的 API 文件(https://expressjs.com/zhtw/4x/api.html)
• 能快速地搭建㇐個網站

創建專案資料夾 lab