Intro
Framework / lib (MVC/MVP, MVVM)
SSR (Server-Side Rendering) Framework
NPM - 套件管理
目前前端生態系主要使用 Node.js 的 NPM 套件管理器來管理前端工具、函式庫與框架。
TypeScript - JavaScript 的超集（Superset）
模板語法 (JSX/TSX)
JSX（JavaScript XML）是 JavaScript 的語法擴展，用於在 JavaScript 中使用類似 XML 的結構來組合並產生 HTML。
TSX 則是 TypeScript 中的 JSX，主要用於 React 或 Next.js 的模板應用。
JSX 範例:
const App = () => {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}| 特性 | JSX / TSX | 傳統樣板引擎（例如 Handlebars, EJS） |
|---|---|---|
| 語法風格 | JavaScript 內嵌 HTML | HTML 內嵌變數 / 邏輯 |
| 邏輯控制 | 直接用 JS / TS 控制 | 使用樣板語言（如 {{if condition}}） |
| 轉譯方式 | 轉譯為 React createElement 語法 |
解析後輸出 HTML |
| 應用場景 | React 組件 UI 渲染 | 伺服器端 HTML 頁面生成 |
Module Bundler - 打包工具
Webpack
SASS / SCSS
SASS 和 SCSS 都是 CSS 的擴展語法，旨在提升 CSS 的可維護性和可讀性。兩者主要區別在於語法。
-
SASS（Syntactically Awesome Stylesheets）：是原始的語法，使用縮排來表示層級，沒有大括號和分號。
$primary-color: #333 body color: $primary-color -
SCSS（Sassy CSS）：是 SASS 的擴展語法，與標準的 CSS 更相似，使用大括號和分號來標註規則。
$primary-color: #333; body { color: $primary-color; }
主要差異：
- 語法：SASS 使用縮排，SCSS 使用標準 CSS 語法（大括號和分號）。
- 功能：兩者功能相同，SCSS 是 SASS 的超集，支持 SASS 語法並且能使用 CSS 標準語法。
簡單來說，SCSS 是 SASS 的一種更加接近 CSS 的語法形式，兩者最終都會被編譯成標準的 CSS。