今天的目標

• 了解如何規劃一個頁面中的各個 component

• 了解 RWD 的概念、目的以及實現方式

• 利用各種 React component 建構出以下的畫面

https://www.figma.com/design/RyI4ACBGsO8ktwJE8BjUHR/SDC-Task?node-id=0-1&m=dev

TypeScript

What is TypeScript

https://www.typescriptlang.org/

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

TypeScript 是 JavaScript 的超集，加入了型別相關的語法，可以註記資料型別，並在 lint 和 compile 的時候自動檢查型別。

在 TypeScript 中可以描述資料或函式的結構，讓開發者更容易在編輯器中找到定義。

JavaScript

function verify(result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}

TypeScript

type Result = "pass" | "fail"

function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}

<aside> ⚠️

JavaScript 也有型別的存在，但語法上無法明確宣告資料型別。

</aside>