React: 實體課程學習心得

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,其型別一定是物件

實際的程式碼範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 來實現。

實際的程式碼範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 允許你傳入一個函式來回傳初始值,這個函式只會被執行一次。是否需要使用這個函式取決於初始化的成本是否昂貴。

實際的程式碼範例:

1
2
3
4
5
6
7
8
9
// 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 的學習上有全面的提升、少走很多彎路!

评论