我是在 ASTRO camp 的分組專案第一次碰到 React.js，那時候是在實作前後分離的專案，而前端我們選擇用 React.js 來開發，在沒有上過課的狀態下，只好自己摸索這陌生的框架，卻不知不覺地在實作上喜歡上用 React.js 來開發。因為 React.js 帶來的便利性真的太多了，例如採用 functional programing，讓程式碼好閱讀和維護。
基礎到進階，一網打盡
在還沒找到工作前就覺得學會 React.js 是一件重要的事，便再次報名五倍紅寶石的 React.js 全攻略 - 入門到進階。奶綠茶老師是業界非常資深的前端工程師，在這邊最常聽到的就是：「這題我面試一定會考！」事實上，老師講得真的就是業界需要具備的即戰能力。
而我覺得在這邊學扎實的基礎功並具備進階自學的能力，這是一門讓前端開發者可以從 junior 成為 senior 的修煉課，而老師會時不時帶入 JavaScript 的基礎概念，讓你溫故知新，知其所以然。
const [count, setCount] = React.useState(0);
React.useEffect(() => {
setCount(count + 1);
}, []);
// 像是如果要達成每次執行都要上個數字加一，以上寫法就是錯誤的，錯在閉包，要改成以下寫法
React.useEffect(() => {
setCount((prev) => {
return prev + 1;
});
}, []);
其實任何框架都離不開 JavaScript 的核心觀念，若老師能一起帶入講解，那就能串連並吸收得更完全，再加上老師在 code 上對自己非常要求 (code潔癖？)，所以他會不斷地強調他寫 code 的經驗談，還有各種 React.js 新手或是工作多年的開發者會踩到的地雷！在五倍真的可以吸取更多業界資深工程師的團隊協作經驗，以及業界的第一手消息，這都是自學不曾獲得的收穫。
學 React.js 遇到什麼困難
自己在觀念還不清楚的時候常常會遇到自己無法預期的事件，像是剛認識 React 的我也曾犯了以下的錯：
const Example10 = () => {
const [list, setList] = React.useState(["Ted", "要", "學會"]);
const atAddClick = () => {
list.push("React");
// 這邊的setList無效，因為這邊的帶入值list與第二行的list為相同的記憶體空間，故雖然上一行有用push增加值，但React只要是同一個記憶體空間就不會觸發rerender
setList(list);
};
};
又或是效能上遇到很多瓶頸，因為對觀念不熟或者因為經驗不足，導致很多地方沒有注意到，很多時候都會感到非常無奈，常常在同一個 bug 卡很久，而上網查了非常多資料但都沒有命中重點，最後乾脆就用暴力解決，導致最後的專案有些地方都有效能上的不足，之後面試時也常常就被問起這些狀況該怎麼解決?
來到五倍，聽了奶綠茶的課，才有種豁然開朗的感覺，很多的 bug 都是源自於基礎的不穩，在聽課時，我常有種感覺自己正站在奶綠茶老師肩膀看事情，角度反而更宏觀和多元了！
React.js 上課模式
奶綠茶老師的上課方式由淺入深，基本上都是從觀念入手，老師也很歡迎同學們直接在上課時舉手問問題，在課間因為我有做過專案踩雷的經驗，當下我有滿肚子的疑惑，而老師也不吝解釋，這也是我喜歡五倍的課程的原因，每個老師都提倡有問題就要馬上問，能馬上解決問題讓我很心安。
除此之外，除了讓我們自己把功能寫出來之外，老師還會提供他的程式碼範例，讓我們可以從老師的 Code 去真的認識到正確的寫法跟觀念，老師更會導入大量業界使用情境，聽起來更具體，學習起來也特別有感覺，對於新手來說是非常實用的上課模式，至少我收益良多。
謝謝奶綠茶老師的協助，讓我在面試的時候有好表現
我在面試時只要提到我會 React.js 方面的技能，就會被問到相關的觀念及技術題，通常問題都是觀念導向的，在這方面我也很慶幸能跟到奶綠 React.js 的課，在面試時，能有不錯的發揮。我更相信我在這裡收穫，不僅僅只是 React.js，更是 JavaScript 基礎功的提升，完課之後我終於可以更有信心地繼續我 的 React.js 之旅了。
最後，如果想要更加瞭解 React.js，真的推薦五倍紅寶石的 React.js 全攻略 - 入門到進階，相信我，你一定會在課堂間得到受用無窮的收穫。
👩🏫 課務小幫手：
✨ 想掌握 React.js 觀念和原理嗎？
我們有開設 📒 「React.js 全攻略 - 入門到進階」課程唷 ❤️️