Skip to main content

學好 React 所需要的 JavaScript 基本功

1. JavaScript 基本語法​

React 的程式碼主要用 JavaScript 撰寫，因此你需要熟悉以下基礎語法：

(1) 變數與資料型別​

  • 變數宣告：熟悉 let、const 和 var 的使用，以及它們的區別。

    • let：用於可重新賦值的變數。
    • const：用於不可重新賦值的變數（但物件或陣列的內容仍可修改）。
    • var：舊的變數宣告方式，建議少用，因為有作用域問題。

  • 資料型別：了解基本型別（string、number、boolean、null、undefined）和參考型別（object、array）。

  • 範例程式碼：

let name = "小明";
const age = 25;
let isStudent = true;
const person = { name: "小明", age: 25 };
const numbers = [1, 2, 3, 4, 5];

(2) 運算子與條件語句​

  • 運算子：熟悉算術運算（+、-、*、/）、比較運算 ( ==、===、>、< ) 和邏輯運算 ( &&、||、! ） 。

  • 條件語句：學會使用 if...else 和 switch 來控制程式流程。

  • 範例程式碼：

let score = 85;
if (score >= 60) {
  console.log("及格了！");
} else {
  console.log("不及格...");
}

(3) 迴圈與迭代​

  • 熟悉 for、while 和 forEach 等迴圈，用於處理陣列或重複執行任務。

  • 範例程式碼：

const fruits = ["蘋果", "香蕉", "橘子"];
fruits.forEach((fruit) => {
  console.log(fruit);
});

2. 函式（Functions）​

React 元件本質上就是函式，因此你需要熟悉 JavaScript 的函式寫法：

(1) 函式宣告與箭頭函式​

  • 函式宣告：傳統的函式定義方式。

  • 箭頭函式：React 中常用，語法簡潔，且 this 行為更直觀。

  • 範例程式碼：

// 傳統函式
function greet(name) {
  return `你好，${name}！`;
}

// 箭頭函式
const sayHello = (name) => `你好，${name}！`;

console.log(greet("小明")); // 你好，小明！
console.log(sayHello("小華")); // 你好，小華！

(2) 函式傳遞與回調​

  • 了解如何將函式作為參數傳遞，這在 React 的事件處理中很常見。

  • 範例程式碼：

const handleClick = () => {
  console.log("按鈕被點擊了！");
};

const button = document.createElement("button");
button.addEventListener("click", handleClick);

3. 陣列與物件操作​

React 經常需要操作資料結構，因此熟悉陣列和物件的處理方法至關重要。

(1) 陣列方法​

  • 學會常用的陣列方法：map、filter、reduce、find 等，這些在 React 中用來動態渲染列表非常重要。

  • 範例程式碼：

const numbers = [1, 2, 3, 4, 5];

// map：轉換陣列
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter：篩選陣列
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // [2, 4]

(2) 物件操作​

  • 學會存取、修改物件屬性，以及使用解構賦值（destructuring）。

  • 範例程式碼：

const person = { name: "小明", age: 25 };

// 解構賦值
const { name, age } = person;
console.log(name, age); // 小明 25

// 修改物件
person.age = 26;
console.log(person); // { name: "小明", age: 26 }

4. ES6+ 語法​

React 廣泛使用 ES6+ 的現代 JavaScript 語法，以下是必須掌握的重點：

(1) 箭頭函式​

  • 已在上方介紹，React 中常用於事件處理和元件定義。

(2) 解構賦值​

  • 用於快速提取陣列或物件中的值。

  • 範例程式碼：

const user = { id: 1, username: "小明" };
const { id, username } = user;
console.log(id, username); // 1 小明

(3) 模板字面量​

  • 用於字符串拼接，React 中常用於動態生成內容。

  • 範例程式碼：

const name = "小明";
const greeting = `你好，${name}！今天是星期天。`;
console.log(greeting); // 你好，小明！今天是星期天。

(4) 預設參數與展開運算子​

  • 預設參數：為函式參數設定預設值。

  • 展開運算子（...）：用於複製陣列或物件，React 中常用於傳遞 props。

  • 範例程式碼：

// 預設參數
const greet = (name = "訪客") => `你好，${name}！`;
console.log(greet()); // 你好，訪客！

// 展開運算子
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 };
console.log(obj2); // { a: 1, b: 2 }

5. 非同步 JavaScript​

React 經常需要處理非同步操作，例如從 API 獲取資料。以下是相關知識：

(1) Promise​

  • 了解 Promise 的基本用法，用於處理非同步操作。

  • 範例程式碼：

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("資料已取得！"), 1000);
  });
};

fetchData().then((data) => console.log(data)); // 資料已取得！

(2) async/await​

  • 更簡潔的非同步語法，React 中常用於處理 API 請求。

  • 範例程式碼：

const fetchData = async () => {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
};

fetchData();

6. DOM 操作基礎​

雖然 React 會處理大部分 DOM 操作，但了解基礎 DOM 操作有助於理解 React 的虛擬 DOM。

(1) 選取元素​

  • 使用 document.querySelector 選取 DOM 元素。

  • 範例程式碼：

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  console.log("按鈕被點擊！");
});

(2) 修改 DOM​

  • 學會動態修改元素內容或樣式。

  • 範例程式碼：

const div = document.querySelector("#myDiv");
div.textContent = "這是新的內容！";
div.style.color = "blue";

7. 模組化（Modules）​

React 專案通常使用 ES 模組來組織程式碼，熟悉 import 和 export 是必要的。

(1) 匯出與匯入​

  • 範例程式碼：
// utils.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./utils.js";
console.log(add(2, 3)); // 5

8. 開始學習 React 的準備​

在掌握以上 JavaScript 基礎後，你可以開始學習 React 的核心概念，例如：

  • JSX：React 的語法糖，結合 HTML 和 JavaScript。
  • 元件（Components）：React 的基本單元，可以是函式元件或類元件。
  • Props 和 State：用於傳遞資料和管理元件狀態。
  • 事件處理：React 的事件系統，例如 onClick。
  • Hooks：如 useState 和 useEffect，用於管理狀態和副作用。

以下是一個簡單的 React 範例，展示如何使用上述 JavaScript 知識：

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>計數器: {count}</h1>
      <button onClick={handleClick}>點我加一</button>
    </div>
  );
}

export default App;

學習建議與實作步驟​

1. 練習環境​

  • 使用線上編輯器（如 CodeSandbox 或 Replit）練習 JavaScript 基礎。
  • 安裝 Node.js 和 VS Code，創建本地 React 專案（使用 create-react-app）。

步驟：

npx create-react-app my-app
cd my-app
npm start

2. 學習資源​

  • MDN Web Docs：學習 JavaScript 語法和 DOM 操作。
  • freeCodeCamp：提供免費的 JavaScript 和 React 課程。
  • React 官方文件：學習 JSX、元件和 Hooks。

3. 實作練習​

  • 寫一個簡單的計數器應用，練習 useState 和事件處理。
  • 建立一個待辦事項清單，練習陣列操作（map 和 filter）和狀態管理。

4. 逐步進階​

  • 學習如何使用 useEffect 從 API 獲取資料。
  • 熟悉 React Router 來處理頁面導航。
  • 學習狀態管理工具（如 Redux 或 Context API）。