87 篇文章 含有標籤「前端工程」

前言​

React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）、props、事件處理（Events）、條件渲染（Conditional Rendering）與列表渲染（Lists）的基本觀念與應用，協助讀者掌握建立互動式介面的核心技巧。

渲染列表與使用 key​

基本列表渲染：

function Car(props) {
  return <li>I am a {props.brand}</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => (
          <Car brand={car} />
        ))}
      </ul>
    </>
  );
}

加上 key 改寫版本：

function Car(props) {
  return <li>I am a {props.brand}</li>;
}

function Garage() {
  const cars = [
    { id: 1, brand: 'Ford' },
    { id: 2, brand: 'BMW' },
    { id: 3, brand: 'Audi' },
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => (
          <Car key={car.id} brand={car.brand} />
        ))}
      </ul>
    </>
  );
}

結論 React 提供了彈性而強大的組件機制，透過 props 傳遞資料、事件處理強化互動、條件與列表渲染控制顯示邏輯，讓開發者可以有效建立模組化與資料驅動的使用者介面。熟悉這些基本觀念，將為深入理解 React 的狀態管理與 hooks 打下堅實基礎。

參考文件​

1. React Custom Hooks

前言​

React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）、props 與事件（Events）的基本觀念與應用，並介紹如何透過函式元件建立互動性的使用者介面，進而引入條件渲染的方式，讓介面能根據資料狀態動態改變內容。

重點摘要​

• React 元件就像函式，會回傳 HTML 元素
• 元件是可獨立、可重複使用的程式區塊
• 元件名稱需以大寫開頭
• props 是元件接收的參數，用來傳遞資料
• props 是唯讀的，不能在元件內部直接修改
• 事件處理使用 camelCase 並以大括號包覆事件處理函式
• 可使用箭頭函式傳遞參數至事件處理器
• 可透過 if、三元運算子、邏輯運算子 && 實現條件渲染

React 條件渲染​

React 提供多種條件渲染的方式，以下為三種常見範例：

• 使用 if 陳述式：

function MadeGoal() {
  return <h1>Goal!</h1>;
}

function MissedGoal() {
  return <h1>MISSED!</h1>;
}

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal />;
  }
  return <MissedGoal />;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={true} />);

• 使用 && 邏輯運算子：

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 && <h2>You have {cars.length} cars in your garage.</h2>}
    </>
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

• 使用三元運算子：

function Goal(props) {
  const isGoal = props.isGoal;
  return <>{isGoal ? <MadeGoal /> : <MissedGoal />}</>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

總結​

React 元件是建構 UI 的基本單位，透過 props 傳遞資料與事件處理建立互動，並透過條件渲染控制顯示邏輯。這些基礎觀念為日後深入學習狀態管理、Hooks 與表單處理等主題奠定堅實基礎。

參考文件​

1. React Custom Hooks

前言​

React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）、props 與事件處理的基本觀念與應用，並介紹如何透過函式元件傳遞資料及觸發動作，建立更互動且靈活的 UI 架構。

重點摘要​

• React 元件就像函式，會回傳 HTML 元素
• 元件是可獨立、可重複使用的程式區塊
• React 元件主要有兩種類型：函式元件與類別元件
• 元件名稱需以大寫開頭
• props 是元件接收的參數，用來傳遞資料
• props 是唯讀的，不能在元件內部直接修改
• 使用 props 可以讓元件更具重用性與彈性
• React 事件與 HTML DOM 事件類似，但語法使用 camelCase
• 事件處理函式使用大括號包裹，支援箭頭函式與參數傳遞

實例解說​

1. 建立函式元件 使用 function 或箭頭函式定義元件，直接回傳 JSX 即可：

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

2. 將元件渲染到畫面 使用 ReactDOM 將元件掛載到 HTML 中的指定節點：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

3. 使用 props 傳遞資料 可透過 HTML 屬性語法向元件傳遞資料，資料將以物件形式傳入元件的參數 props：

function Car(props) {
  return <h2>I am a {props.brand}!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car brand="Ford" />);

4. 父子元件資料傳遞 父元件可透過 props 向子元件傳遞資料：

function Car(props) {
  return <h2>I am a {props.brand}!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

5. 傳遞變數與物件 可傳遞變數給 props：

function Garage() {
  const carName = 'Ford';
  return <Car brand={carName} />;
}

也可傳遞物件並在子元件中取用屬性：

function Car(props) {
  return <h2>I am a {props.brand.model}!</h2>;
}

function Garage() {
  const carInfo = { name: 'Ford', model: 'Mustang' };
  return <Car brand={carInfo} />;
}

6. 類別元件使用 props 類別元件接收 props 的方式略有不同：

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}</h2>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car brand="Toyota" />);

7. React 事件處理 React 支援與 HTML 相同的事件（如 click、change、mouseover 等），但語法不同：

• 事件名稱使用 camelCase，如 onClick
• 事件處理函式使用大括號包裹

基本範例：

function Football() {
  const shoot = () => {
    alert('Great Shot!');
  };

  return <button onClick={shoot}>Take the shot!</button>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

8. 傳遞參數到事件處理函式 若要傳入參數，使用箭頭函式包裹：

function Football() {
  const shoot = (msg) => {
    alert(msg);
  };

  return <button onClick={() => shoot('Goal!')}>Take the shot!</button>;
}

9. 取得事件物件 事件處理函式會自動接收事件物件，可用來取得事件類型、目標等資訊：

function Football() {
  const shoot = (msg, event) => {
    alert(event.type);
  };

  return <button onClick={(event) => shoot('Goal!', event)}>Take the shot!</button>;
}

總結​

React 元件是建構 UI 的基本單位，透過 props 傳遞資料可以讓元件之間建立清晰的資料流，而透過事件處理則能讓使用者與介面產生互動。掌握元件、props 與事件的使用，將有助於建立模組化、互動性高且維護性良好的 React 應用程式。接下來可以進一步學習 state、hook 與生命週期等更進階的主題，打造更完整的前端應用。

參考文件​

1. React Custom Hooks

前言​

React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）與 props 的基本觀念與應用，並介紹如何透過函式元件傳遞資料，建立更靈活的 UI 架構。

重點摘要​

• React 元件就像函式，會回傳 HTML 元素
• 元件是可獨立、可重複使用的程式區塊
• React 元件主要有兩種類型：函式元件與類別元件
• 元件名稱需以大寫開頭
• props 是元件接收的參數，用來傳遞資料
• props 是唯讀的，不能在元件內部直接修改
• 使用 props 可以讓元件更具重用性與彈性

實例解說​

1. 建立函式元件 使用 function 或箭頭函式定義元件，直接回傳 JSX 即可：

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

2. 將元件渲染到畫面 使用 ReactDOM 將元件掛載到 HTML 中的指定節點：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

3. 使用 props 傳遞資料 可透過 HTML 屬性語法向元件傳遞資料，資料將以物件形式傳入元件的參數 props：

function Car(props) {
  return <h2>I am a {props.brand}!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car brand="Ford" />);

4. 父子元件資料傳遞 父元件可透過 props 向子元件傳遞資料：

function Car(props) {
  return <h2>I am a {props.brand}!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

5. 傳遞變數與物件 可傳遞變數給 props：

function Garage() {
  const carName = 'Ford';
  return <Car brand={carName} />;
}

也可傳遞物件並在子元件中取用屬性：

function Car(props) {
  return <h2>I am a {props.brand.model}!</h2>;
}

function Garage() {
  const carInfo = { name: 'Ford', model: 'Mustang' };
  return <Car brand={carInfo} />;
}

6. 類別元件使用 props 類別元件接收 props 的方式略有不同：

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}</h2>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car brand="Toyota" />);

總結​

React 元件是建構 UI 的基本單位，透過 props 傳遞資料，可以讓元件之間建立清晰的資料流，提升程式碼的重用性與可維護性。掌握 props 的使用，將有助於建立模組化、彈性化的前端介面，並為日後深入學習 state、hook 與 context 等進階主題奠定基礎。

參考文件​

1. React Custom Hooks

前言​

React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）的基本觀念與應用，並介紹如何透過函式元件（Function Components）與類別元件（Class Components）撰寫可重用的 UI 模組。

重點摘要​

• React 元件就像函式，會回傳 HTML 元素
• 元件是可獨立、可重複使用的程式區塊
• React 元件主要有兩種類型：函式元件與類別元件
• 現代 React 建議使用函式元件搭配 Hooks
• 元件名稱需以大寫開頭
• 類別元件需繼承 React.Component 並實作 render 方法
• 函式元件語法簡潔，易於撰寫與理解

實例解說​

1. 建立類別元件 使用 class 關鍵字定義元件並繼承 React.Component，需實作 render() 方法，該方法需回傳一段 JSX：

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

2. 建立函式元件 使用 function 或箭頭函式定義元件，直接回傳 JSX 即可：

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

這是現代 React 中最推薦的元件撰寫方式，語法簡單且易於維護。

3. 函式元件範例完整呈現 將元件渲染到頁面中：

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

注意 <Car /> 是一個 JSX 自定義標籤，代表我們自訂的元件。

4. 多個元件組合 可以將元件組合成更大的 UI 架構：

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

此例中 Garage 是父元件，包含了一個 Car 子元件。

5. 使用 props 傳遞資料 元件可透過 props 接收參數以提高重用性：

function Car(props) {
  return <h2>I am a {props.brand}</h2>;
}

function Garage() {
  return (
    <div>
      <Car brand="Ford" />
      <Car brand="BMW" />
    </div>
  );
}

6. 類別元件使用 props

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}</h2>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car brand="Toyota" />);

結論​

React 元件是建構 UI 的基本單位，具備獨立、可重複使用的特性。無論是使用函式或類別方式撰寫元件，只要掌握元件的命名規則與回傳 HTML 的模式，就能快速建立簡潔有彈性的前端介面。現代 React 開發已以函式元件為主，建議優先掌握函式元件的寫法並搭配後續的 Hook 技術使用。

參考文件​

1. React Custom Hooks

前言​

React 是一個用於建立 UI 元件的 JavaScript 函式庫，而 JSX 則是屬於 React 中的一個元件模板語法糖。這篇文章將簡要介紹 JSX 是什麼，如何撰寫、條件式使用以及特殊對應，幫助初學者或 React 開發者進一步瞭解 JSX 的基礎應用。

重點摘要​

• JSX 是 JavaScript XML 的縮寫
• 允許在 JavaScript 代碼中直接寫 HTML
• JSX 會被轉譯變成 React.createElement()
• JSX 中的 HTML 項目必須有唯一的層級結點
• 可用小括號 執行 JavaScript 表達式
• 允許使用 fragment (空括號) 以避免額外 DOM 結構
• HTML 元素必須適當關閉，並使用 className 代替 class
• 使用條件語句時， if 必須在 JSX 之外，可用三元表達式

實例解說​

1. JSX 與非 JSX 寫法

使用 JSX 的方式：

const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

未使用 JSX 的方式：

const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

2. JSX 表達式範例

使用 JSX 方式計算數學表達式：

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

3. 多行 HTML 要用 () 包起

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

4. 唯一一層級結點要求

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

或是使用 fragment ：

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

5. 元素必須適當關閉

const myElement = <input type="text" />;

6. 使用 className 代替 class

const myElement = <h1 className="myclass">Hello World</h1>;

7. JSX 條件語句

方式 1：使用 if 在 JSX 之外

const x = 5;
let text = 'Goodbye';
if (x < 10) {
  text = 'Hello';
}
const myElement = <h1>{text}</h1>;

方式 2：使用三元表達式

const x = 5;
const myElement = <h1>{x < 10 ? 'Hello' : 'Goodbye'}</h1>;

參考文件​

1. React Custom Hooks

前言​

React 是一個專門用於構建使用者介面（UI）的 JavaScript 函式庫，其主要目標就是將 HTML 呈現在網頁中。透過 React 的核心函式 createRoot() 和方法 render()，開發者可以將 UI 元件渲染到指定的 HTML 元素中。本文將介紹 React 如何在網頁上渲染 HTML，包括核心函式與方法的用途、應用位置與語法示範，並介紹與 JSX 語法的結合使用方式。

重點摘要​

• React 透過 createRoot() 函式與 render() 方法將 HTML 渲染到網頁上。
• createRoot() 用於指定要渲染的目標 HTML 元素。
• render() 用於將 React 元件實際渲染到指定元素中。
• 標準的 React 專案會在 public/index.html 中提供 <div id="root"> 作為渲染容器。
• JSX 語法允許開發者在 JavaScript 中撰寫類似 HTML 的程式碼。
• 根節點不必一定是 <div>，也不一定要命名為 root。

實際範例​

1. 渲染一段簡單的段落：

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);

上述程式碼會將 "Hello" 文字渲染到 HTML 文件中的：

<body>
  <div id="root"></div>
</body>

2. 使用 JSX 撰寫 HTML 表格並渲染：

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);

此段程式會顯示一個包含名稱的簡單表格，渲染至 root 節點中。

3. 更換根節點的標籤與 id： 不一定要使用 <div id="root"> 作為渲染節點，可以自行命名：

<body>
  <header id="sandy"></header>
</body>

對應的 React 程式碼如下：

const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);

此範例將段落渲染至 header 元素。

總結​

React 的渲染邏輯核心在於兩個部分：定義渲染目標與執行渲染動作。透過 createRoot() 指定 HTML 元素、render() 注入 React 元件，開發者可以將 UI 動態顯示在任何節點上。搭配 JSX 語法，不僅可以撰寫更具可讀性的 UI 結構，也讓程式碼維護更為便利。

參考文件​

1. React Render HTML

前言​

ES6（ECMAScript 2015）是 JavaScript 的第六版，於 2015 年發布，為 JavaScript 帶來了重大語法革新。React 作為現今最受歡迎的前端框架和函式庫之一，其核心設計與語法極度依賴 ES6 的各項功能。因此，學習 React 前，理解 ES6 的語法特性將大幅提升開發效率與理解深度。

本文將說明 React 常用的 ES6 特性，並透過簡明範例幫助你掌握其實作方式。

重點摘要​

• ES6 是 ECMAScript 第六版，又稱 ECMAScript 2015。

• React 使用大量 ES6 語法，包括：

  • Class 類別
  • 箭頭函式
  • let、const 變數宣告
  • 陣列方法（如 .map）
  • 解構（Destructuring）
  • 模組系統（import/export）
  • 三元運算子（Ternary Operator）
  • 展開運算子（Spread Operator）

1. 類別與繼承（Classes & Inheritance）​

ES6 引入了 class 關鍵字來定義類別：

class Car {
  constructor(name) {
    this.brand = name;
  }
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car('Ford');
console.log(mycar.present());

繼承使用 extends 關鍵字：

class Model extends Car {
  constructor(name, model) {
    super(name);
    this.model = model;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

const mycar = new Model('Ford', 'Mustang');
console.log(mycar.show());

2. 箭頭函式（Arrow Functions）​

簡化函式的寫法：

const hello = () => 'Hello World!';
const greet = (name) => `Hello ${name}`;

3. 變數宣告（let、const、var）​

var x = 5; // 函式作用域
let y = 10; // 區塊作用域
const z = 15; // 常數，不可重新指派

const 宣告的是參考不可變：

const arr = [1, 2];
arr.push(3); // 可以修改內容

4. 陣列方法（Array.map）​

在 React 中常用於渲染列表：

const fruits = ['apple', 'banana', 'orange'];
const listItems = fruits.map((fruit) => <p>{fruit}</p>);

5. 解構賦值（Destructuring）​

解構陣列：

const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, , suv] = vehicles;

解構函式回傳值：

function calc(a, b) {
  return [a + b, a - b];
}

const [sum, diff] = calc(5, 3);

6. 展開運算子（Spread Operator）​

複製或合併陣列與物件：

const numbers1 = [1, 2];
const numbers2 = [3, 4];
const all = [...numbers1, ...numbers2];

const car = { brand: 'Ford', color: 'red' };
const update = { color: 'blue' };
const updatedCar = { ...car, ...update };

7. 模組系統（Modules）​

export 和 import 用於模組化程式碼：

命名匯出：​

// person.js
export const name = 'Jesse';
export const age = 40;

// 使用
import { name, age } from './person.js';

預設匯出：​

// message.js
const message = () => 'Hello';
export default message;

import message from './message.js';

8. 三元運算子（Ternary Operator）​

條件判斷簡化語法：

const isAuth = true;
isAuth ? renderApp() : renderLogin();

結語​

ES6 為 JavaScript 帶來嶄新的語法與思維方式，也為 React 帶來強大的表達力與模組化能力。熟練掌握這些語法，將能讓你在開發 React 專案時更加順手、高效並撰寫出更具可維護性的程式碼。若你尚未熟悉這些語法，建議你從簡單的練習開始，搭配 React 實際開發經驗進行吸收與內化。

參考文件​

1. React ES6

前言​

在當代的前端開發中，React 是最具代表性的 JavaScript 函式庫之一。由 Facebook 軟體工程師 Jordan Walke 所開發，React 被廣泛應用於建構動態使用者介面，尤其適用於大型單頁應用（SPA, Single Page Application）。本篇文章將帶你認識 React 的核心概念、其背後的工作原理、使用前的基礎知識與發展歷史，並透過實例進行初步實作。

重點摘要​

1. 什麼是 React？

   • React 是一個前端 JavaScript 函式庫，用來建構使用者介面（UI）。
   • React 的別稱包括 React.js 與 ReactJS。
   • 它專注於「元件化思維」，每個 UI 元素都被視為一個可重複使用的元件（Component）。

2. React 如何運作？

   • React 在記憶體中建立一個「虛擬 DOM」（Virtual DOM）。
   • 所有 DOM 操作會先發生在虛擬 DOM 中，再批次更新實體 DOM。
   • 這樣的差異化更新策略可提升效能，只變更必要的部分。

3. React 的優勢

   • 高效能：避免不必要的 DOM 操作。
   • 組件化：提升程式碼的重用性與可維護性。
   • 單向資料流：資料流動清晰易懂。
   • 強大社群與生態圈：大量開源資源與工具支援。

4. 使用 React 前的必要基礎

   • 熟悉 HTML 結構與語意標記。
   • 理解 CSS 排版與樣式應用。
   • 掌握 JavaScript 基本語法與函數觀念（如 ES6 語法、變數宣告、陣列方法等）。

5. React 的發展歷程

   • 2011 年：React 首次應用於 Facebook 的新聞動態功能（Newsfeed）。
   • 2013 年 7 月：React 對外發布首個公開版本 0.3.0。
   • 2024 年 12 月：React 最新穩定版本為 19.0.0。

實際範例​

以下是一個簡單的 React 程式碼範例，展示如何建立與渲染一個元件。

// 引入 React 與 ReactDOM 函式庫
import React from 'react';
import ReactDOM from 'react-dom/client';

// 建立一個簡單的元件
function Welcome() {
  return <h1>你好，React 世界！</h1>;
}

// 在指定的 DOM 節點中渲染該元件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Welcome />);

解說：​

1. import React from 'react'; 是使用 React 所必須的匯入語句。
2. Welcome 是一個函數式元件（Functional Component），回傳的是 JSX 語法。
3. ReactDOM.createRoot 創建一個 root 對象，負責將元件掛載至網頁的 #root DOM 節點。
4. root.render(<Welcome />) 是將我們的元件渲染到網頁中。

總結​

React 是一個現代網頁開發的重要工具，特別適合構建具互動性與模組化結構的網頁。透過虛擬 DOM 技術，React 讓介面更新更有效率，並提供清晰的元件架構設計。對於有基本前端知識的開發者而言，React 是進階的最佳入門選擇之一。建議你在學習 React 前，先打好 HTML、CSS 與 JavaScript 的基礎，將能更順利掌握 React 的概念與應用。

接著我們將學習 React 的 JSX 語法、狀態管理（useState）、事件處理、生命週期（useEffect）等核心概念，逐步建立自己的 React 專案。

參考文件​

1. React Custom Hooks

1. HTTP/2 簡介​

HTTP/2 是 HTTP/1.1 的後繼版本，由 IETF HTTP 工作小組開發，並於 2015 年 5 月成為正式標準（RFC 7540）。HTTP/2 的主要目標是提高 Web 的性能，減少延遲，並優化資源的傳輸方式。

2. HTTP/2 的核心特性​

2.1 二進制分幀層（Binary Framing Layer）​

HTTP/2 以二進制格式進行數據傳輸，而非 HTTP/1.1 的純文字格式。這使得解析和處理更高效，減少了協議的開銷。

2.2 多路徑傳輸（Multiplexing）​

在 HTTP/1.1 中，一個 TCP 連線同時只能處理一個請求，導致「線頭阻塞」問題。HTTP/2 允許在單個 TCP 連線中並行傳輸多個請求與回應，顯著提高效率。

2.3 流量控制與優先權（Stream Prioritization）​

HTTP/2 允許客戶端為請求設定優先級，讓重要的資源（如 CSS、JS）優先傳輸，提高頁面載入速度。

2.4 頭部壓縮（Header Compression）​

HTTP/2 使用 HPACK 壓縮技術來減少 HTTP 標頭的大小，避免 HTTP/1.1 中重複傳輸 Cookie、User-Agent 等大量標頭資訊的問題。

2.5 伺服器推送（Server Push）​

伺服器可以主動推送客戶端尚未請求的資源，例如 HTML 請求回應時，伺服器可同時推送 CSS、JavaScript 檔案，減少額外的請求時間。

3. HTTP/2 與 HTTP/1.1 的比較​

4. HTTP/2 的使用與設定​

4.1 瀏覽器支援​

現代主流瀏覽器（Chrome、Firefox、Edge、Safari）皆支援 HTTP/2，但通常需要搭配 HTTPS 使用。

4.2 伺服器支援​

常見的 Web 伺服器如 Nginx、Apache、LiteSpeed 都已支援 HTTP/2，但需進行適當的設定。

4.2.1 在 Nginx 啟用 HTTP/2​

若要在 Nginx 中啟用 HTTP/2，需要確保已安裝支援 HTTP/2 的 Nginx 版本（1.9.5 以上）並修改設定檔：

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/cert.key;

    location / {
        root /var/www/html;
        index index.html;
    }
}

在 listen 指令中加入 http2 即可啟用 HTTP/2。

4.2.2 在 Apache 啟用 HTTP/2​

Apache 2.4.17 以上版本支援 HTTP/2，需要啟用 mod_http2 模組。

a2enmod http2
systemctl restart apache2

接著，在 VirtualHost 設定中加入：

<VirtualHost *:443>
    Protocols h2 http/1.1
    DocumentRoot /var/www/html
    ServerName example.com
</VirtualHost>

5. HTTP/2 客戶端測試​

可以使用 curl 測試 HTTP/2 是否正常運作：

curl -I --http2 https://example.com

若顯示 HTTP/2 200，則表示伺服器已成功支援 HTTP/2。

6. HTTP/2 的實際應用​

6.1 使用 HTTP/2 Server Push​

在 HTTP/2 中，可以使用 Link 標頭來主動推送資源。例如，在 Nginx 配置中加入：

location / {
    add_header Link "</style.css>; rel=preload; as=style";
    add_header Link "</script.js>; rel=preload; as=script";
}

這樣當客戶端請求 index.html 時，伺服器會自動推送 style.css 和 script.js，減少 HTTP 請求數量。

6.2 透過瀏覽器 DevTools 觀察 HTTP/2​

打開 Chrome 開發者工具（F12） → Network 分頁，查看 Protocol 欄位，若顯示 h2，則表示該請求使用了 HTTP/2。

7. 總結​

HTTP/2 改進了 HTTP/1.1 的多項限制，透過多路徑傳輸、頭部壓縮與伺服器推送提高了 Web 效能。現代瀏覽器與伺服器已廣泛支援 HTTP/2，建議在新專案中啟用 HTTP/2，以提升用戶體驗與網站速度。