跳至主要内容

23 篇文章 含有標籤「React Hooks」

檢視所有標籤

React Render HTML 入門教學 | w3schools 學習筆記

· 閱讀時間約 2 分鐘
kdchang

前言​

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>
  1. 使用 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 節點中。

  1. 更換根節點的標籤與 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

React 與 ES6 語法教學入門 | w3schools 學習筆記

· 閱讀時間約 3 分鐘
kdchang

前言​

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 入門教學 | w3schools 學習筆記

· 閱讀時間約 3 分鐘
kdchang

前言​

在當代的前端開發中，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