〔 從 0 開始學 React 〕Vite 與 inline Style CSS 的寫法

共 1,242 字

前言

對於前端框架一直有一種莫名的憧憬（感覺很酷很好玩！），近期開始跟著線上課學習，一邊記錄筆記，還有一些延伸的想法～

Vite 是什麼？

Vite 是一個建置工具（Build tool），由 Vue 的創始人尤雨溪創建，是目前主流的建置工具之一。主要有兩大功能：

  1. 在網站開發時，如果開發者有變更部分內容，Vite 可以做到只更新局部，無需整頁更新，這個厲害的功能又稱作 HMR（Hot Module Replacement）。
  2. 背後使用 Rollup（打包工具之一）在運行，確保開發環境與生產環境沒有落差，部署時也更加流暢。

所以，開發專案時並不是一定要使用 Vite，但由於上述兩大益處，在現行專案會採用。

在 React 裡面寫 inline style CSS

首先，現今大多數專案在使用 CSS 時，多半是會使用 Tailwind CSS 或者 CSS modules，但因為 inline style css 在 React 中的寫法比較特別，所以需要特別紀錄，如下。

function WelcomePage(){
    return <>
        <h2 style={{color: "blue" }}>歡迎來到程式散步</h2>
    </>
}

其中，第一個 { } 是代表「我要在 JSX 裡面寫 JavaScript 語法了」；第二個 { } 則代表「我要傳入一個 JavaScript 物件了」。至於要這麼寫的原因是，JSX 與 JavaScript 的語法不同，所以需要使用花括號來明確告訴它，哪裡要寫入 JavaScript 語法。

另外一點值得注意的是，inline style CSS 如果遇到屬性名稱為兩個英文字母構成，例如：background-color, font-weight 等等，需要改寫成 backgroundColor 及 fontWeight 。通常在現行專案中，普遍不建議寫 inline style CSS，因為 inline style CSS 的使用彈性較差，更具體的說：

  1. 無法搭配偽元素，如 :hover, :focus，需要額外使用 JavaScript 才能控制。
  2. 如果專案中有使用大量且重複的 CSS 樣式，使用 inline style CSS 將會讓整個專案變得複雜，長遠來說也不易維護。
  3. inline style CSS 無法達成響應式設計，這對大部分具有商業價值的專案來說會是硬傷。

References