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

前言

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