React：實體課程學習心得 | 五倍紅寶石・五倍學院

作為一名剛起步的 Junior 全端工程師，我過去大多是用 JavaScript 撰寫前端程式。為了提升自己的技能，我決定報名五倍學院開設的《React 全攻略 - 入門到進階》課程，目標是深入學習時下熱門的前端框架：React，並朝著 Senior 工程師的方向邁進。

在學習 React 的過程中，收穫了好多寶貴的經驗。奶綠茶老師是一位業界資深的工程師主管，他從底層邏輯開始講解 React 的基礎知識，並用程式碼作為範例，分享了許多業界的實戰經驗和在工作中實際會用到的 React 寫法。這些內容不僅讓我理解得更深入，也讓我在應用 React 時更加得心應手。

而且老師上課風格幽默有趣，課程中會穿插工作上與 React 或是工程師相關的趣事，也讓課程內容變得更活潑及生活化，每次上課完都覺得除了學習 React 之外，也透過課程內容讓自己開眼界、學習資深工程師的思考方式，每次上課完都覺得收穫滿滿。

課程簡介

《React 全攻略 - 入門到進階》課程是為了幫助學員打好 React 的基礎，成為更加扎實的 React 前端工程師而設計的。課程內容涵蓋了從基礎到進階的各個方面，老師還會分享許多實際開發中的團隊協作經驗和技巧，這些都是書籍和一般線上課程中難以見到的寶貴內容。

奶綠茶老師透過 50+ 份示範程式檔案，從最基礎的 React Components 如何撰寫、Props 傳遞機制等，分享 React 核心語法；還有 Typescript 、styled-components 、Tailwind CSS、Redux 等更進階的實戰應用。

這門課特別適合以下的人：

前端工程師：希望透過學習 React 來精進 JavaScript 技術。
有 Vue.js 或 Angular 開發經驗者：想快速上手 React。
有 React 自學經驗的開發者：希望鞏固基礎觀念。
想了解 React 開發團隊合作與管理的開發者：尋求更高效的團隊協作方法。

React 的基礎知識

在課堂上，老師詳細講解了 JSX、組件（Components）、屬性（Props）、狀態（State）等基礎知識。這些是學習 React 的核心基礎，了解了核心的底層邏輯後，更能進一步學習和應用。

Components & Props

在 React 中，component 是讓程式重複利用的重要基礎。
奶綠茶老師教我們如何創建 component 並使用 props 傳遞數據，並教導了我們幾個重要的概念：

compnent 要獲取變數，一定會從 props 拿
React component 的第一個參數就是 props，其型別一定是物件

實際的程式碼範例：

import PropTypes from "prop-types";

const FunctionalCard01 = (props) => {
  const { img, name, children, price } = props;
  return (
    <div className="category-item">
      <img className="category-item__img" src={img} alt={name} />
      <div className="category-item__name">{name}</div>
      <div className="category-item__price">{price}</div>
      <div className="category-item__quote">{children}</div>
    </div>
  );
};

FunctionalCard01.propTypes = {
  price: PropTypes.number.isRequired,
  img: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  children: PropTypes.node,
};

export default FunctionalCard01;

這是一段簡單的 Functional Component，它接收 props 並在 JSX 中渲染。這種方式讓 component 變得更為靈活和可重複使用。

useState

每個 component 除了可以從 props 拿值外，本身還可以儲存變數。就像物件可以儲存自己的屬性一樣，React component 也可以有自己的狀態。
函數沒有 this 概念，它在呼叫完後就被釋放，無法在函數內部儲存變數的結果。要如何在函數中儲存變數的狀態呢？可以使用 useState 來實現。

實際的程式碼範例：

const [count, setCount] = React.useState(0);

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

return (
  <div className="border p-2 border-black">
    <h2 className="count">count: {count}</h2>
    <button className="button" onClick={atClick}>
      increment
    </button>
  </div>
);

這段程式碼表示使用 useState 來管理計數器的狀態，並在按鈕點擊時更新狀態。

另外 React 的 useState 還有一個重要的觀念：

useState 儲存狀態，只有第一次傳入的值會被使用。所以，React 的 useState 允許你傳入一個函式來回傳初始值，這個函式只會被執行一次。是否需要使用這個函式取決於初始化的成本是否昂貴。

實際的程式碼範例：

// FIXME: Bad
// 這裡會被執行好多次
const [countBad, setCountBad] = React.useState(getInitialState('bad'));

// [x]: Correct
const [count, setCount] = React.useState(() => {
  // 這裡的 function 只會被執行一次
  return getInitialState('correct');
});

從入門到進階

除了以上的範例，奶綠茶老師的 React 課程緊扣課程的標題「從入門到進階」，讓我印象深刻的內容還有：useEffect 第二個參數的差異、深入理解 useRef 幫助我們獲取 DOM 元素，使用 useState 和 useEffect 來處理表單輸入和驗證、使用 React.memo 來優化 component 性能，避免不必要的重渲染、自定義 Fetch Hook 將邏輯提取到可重用的函式使組件更加簡潔，並且更易於測試和維護、使用 Redux Thunk 進行異步操作、使用 testing library 進行單元測試等等，這些都讓我對 React 有了更全面的了解。

如果你在自學 React 的路上，但總覺得卡卡的，或是不懂使用 A 方法或 B 方法哪個比較好、效率比較高、不懂哪個方法在工作上比較常使用，都推薦你來上奶綠茶老師的《React 全攻略 - 入門到進階》課程，除了能解決你以上的問題，更能夠讓你在 React 的學習上有全面的提升、少走很多彎路！

本文節選自 Adora's Blog 文章：React：實體課程學習心得