轉職為 Junior 開發工程師已經有三個月了，目前公司要求開發需要同時具備前端與後端的能力。然而，過去我只會使用原生 JavaScript 進行前端開發，對於流行的前端框架並不熟悉，但公司統一使用 React 做開發。
非常剛好的，五倍學院的奶綠茶老師開設了《React 全攻略 - 入門到進階》這門課程時，我二話不說手刀報名！
在學習 React 的過程中，我對於它的組件化架構有了更深的理解。透過這門課程，老師從最基本的概念如 JSX、組件（Components）和屬性（Props）開始，一步一步帶領我們進入 React 的世界。雖然剛開始時，這些概念對我來說有些抽象，但隨著課程深入，我逐漸掌握了 React 的底層邏輯，並學會如何運用它來開發動態網頁應用程式。
在學習 React 的過程中，useState 是最早接觸到的 Hook，它負責管理組件的狀態。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;
這段程式碼展示了如何使用 useState 來建立一個簡單的計數器。
這段實作讓我印象深刻的是，React 的狀態管理方式與我以往使用的 JavaScript 大不相同。以前我會用變數來記錄狀態，但在 React 中，透過 Hook 可以更有效地同步 UI，並在變數更新時自動重新渲染介面。這讓我深刻感受到 React 強大的地方：它的聲明式編程模式與 UI 自動更新的特性，真的大大提升了開發效率。
此外，另一個常用到的 hook 就是 useEffect
import React, { useState, useEffect } from 'react';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
setUsers(data);
} catch (error) {
console.error("Error fetching users:", error);
}
};
fetchUsers();
}, []);
export default UserList;
這段程式碼展示了如何使用 useEffect 在組件掛載時打 API 並將資料存入狀態中。useEffect 讓我能夠在指定的時機點執行邏輯，像是這裡的「僅在初次掛載時呼叫一次 API」，這樣的設計比傳統 JavaScript 要來得直觀。以前我會使用事件監聽或在其他地方手動觸發，但有了 useEffect，可以清晰地分離 API 邏輯與組件渲染。這不僅讓代碼更乾淨，也降低了出錯的機會！
一開始對於 React 的這些概念真的滿陌生的，特別是 Hook，像 useState、useEffect 這些東西，剛開始怎麼看都覺得抽象又複雜。但透過奶綠老師一步步的講解，讓我發現其實這些概念都蠻有趣的，當你了解了 Hook 的運作方式後，整個開發過程就像是得到了一片新世界！很多過去覺得繁瑣的流程也變得順手非常多！現在的我除了 React 的運用甚至進階的使用了 Next.js 做開發。太太太感謝自己有來上這門課程！！！
最後，如果正在閱讀這篇心得的你跟我一樣，工作需要或是想要了解前端不同架構的朋友，我非常推薦可以報名這堂 React 全攻略，你絕對會收穫滿滿！
