五倍直播間

Blogs - Sidebar

## 如何得知課程資訊

在同事的推薦下，我得知了五倍學院的 [Vue.js 3.x 與 Pinia 前端開發實戰](https://5xruby.tw/courses/vue-js)課程。加上同事強烈推薦 Kuro 老師，說他的教學非常詳細且有耐心，聽起來可以學到東西，也讓我比較放心報名。因此，我毅然決然地向主管提出教學補助，展開了 Vue.js 的學習之旅。

## Kuro 老師給我勇氣

Vue 的課程需要具備基礎的 JavaScript 程度，而我對於 JavaScript 基礎非常不熟悉。在課堂上常常看到一些很陌生的程式碼。Kuro 老師在得知我的狀況後，告訴我 **「如果課堂中有什麼不懂的地方，要記得發問！」**。

對於我這個新手來說，本來對於上課發問問題就會膽怯，同時也擔心會害到其他學員的上課進度，畢竟自己程度不夠，但在老師說這句話後，我整個人就像被加了發問勇氣的 Buff。

老師也在課堂上，很認真且很有耐心的解答我的問題，除此之外老師也會帶領其他同學一起解答，課堂整體氣氛對於新手的我來說真的感到非常友善。

> 備註：Buff 在遊戲中是指「增益、增強」。

## 新手實務上的小確幸

回到工作崗位，面對曾經不熟悉的程式碼，在上完 Vue.js 課程後，竟然能夠理解一些程式碼。身為菜鳥工程師的我，利用 v-show 寫出人生第一個 Vue.js 上的功能，非常有成就感。當然，上完課程後還需要花些時間努力複習與鑽研，並完成老師的指定作業，才能更好地掌握 Vue.js。

## 課程結束後續

雖然只有短短三天的課程，但資訊量卻出乎意料地多。我需要花些時間慢慢複習影片，好好消化和理解內容。五倍學院設有課程群組，讓學員在課程結束後，仍然可以向老師詢問問題，這點非常棒。因為我認為在課堂上教的是基本 Vue.js 觀念，實務上遇到的問題卻千奇百怪，且連同期學員也會一同與你尋找問題，讓你在前端工程師的路上不會孤單。

## 害怕接觸 Vue.js 嗎？歡迎來五倍學院

以上就是我對於這次學習 Vue.js 的經驗分享。我覺得 Kuro 老師真的是很好的教師，他非常有耐心，願意回答學生的問題，也會帶領同學一起解決問題。這樣的學習環境非常友善，讓我很快地融入了 Vue.js 的學習中。

對於初學者來說，學習 Vue.js 是一個不斷挑戰自己、不斷突破自己的過程。但是，當你掌握了 Vue.js 的技能，你就能夠輕鬆地開發出具有互動性的 Web 應用程式。

**如果你也想學習 Vue.js，我會強烈推薦 Kuro 老師的課程，他一定會是你學習 Vue.js 的最佳導師之一。**

![Vue.js 3.x 與 Pinia 前端開發實戰 - 學員課後心得 - discord 對話](//images.ctfassets.net/8er52l3j5u76/6jVPhw3IH8e2BOpY5pKHYn/039f0145851a22441b38ed52e7ede458/conversion.png)

>👩‍🏫 課務小幫手：
>
>✨ 想掌握 Vue.js 觀念和原理嗎？ 我們近期也有開設 [Vue.js 3.x 與 Pinia 前端開發實戰課程](https://5xruby.tw/courses/vue-js)喔！

Vue.js 3.x 與 Pinia 前端開發實戰 - 學員課後心得

## 認識 Kuro 老師的契機

初識 Kuro，應該是在 2022 Laravel x Vue conf 的第一天，當時 Kuro 示範了如何使用 Vue 開發一個仿 trello 的功能實作，當時還算是初學 Vue 的我，在還不了解 Vue 2、Vue3 差異，甚至沒碰過 Vue composition API 狀態下就參與這場前端盛宴，有種越級打怪的強烈感受。

那時，在 Kuro 講解的過程，我偷偷觀望四周，感覺身邊的人蓄勢待發，對於 Kuro 的講解是輕而易舉的明白箇中奧妙，但當時的示範對我來說早已超出理解範圍...

「寫到這有沒有問題？」台上的 Kuro 告一個小段落時對大家提問。

想當然爾，依台灣人的個性，台下的人通常是鴉雀無聲，更何況是在這樣的場合之下。這時，Kuro 後續的講解令我特別注意，他並沒有因為無人反應而繼續後續的內容，反而開始解釋起「他認為應該會有人有疑惑的部分」以及「開發過程應該特別注意的細節」。原本以為這只是那部分比較重要，才特別提點，殊不知在後續的內容，Kuro 在每個停頓點，幾乎都會特別講解一些要點細節。就這麼不知不覺，到了表定結束的時間，工作人員進門提醒 Kuro 差不多該告一段落，只見老師注意一下時間，緊張的回覆說：「再給我 30 分鐘好嗎？我要把這段講完！」

當時就在想，Kuro 真的是一位很認真的講者，如果有機會請 Kuro 教授 Vue，不知該有多好。那時大概不會想到，這個願望將會在不久的將來在五倍學院實現！

## 報名 Vue.js 3.x 與 Pinia 前端開發實戰

終於來到五倍學院親自跟老師學技術，Kuro 老師在五倍開的課程是 [Vue.js 3.x 與 Pinia 前端開發實戰](/courses/vue-js)，第一天的課堂上 Kuro 老師就告訴同學：「**我講解到任何地方，如果同學有問題，隨時都可以打斷發問，課程中或回家也可以隨時在社群留下問題，我看到的話都會回**」。

因為這樣的開場，我也就很不客氣的想到什麼問題就提出，在每次的提問過程，總能從 Kuro 閃閃發亮的眼神，感受到 Kuro 真的是一位很樂意的學生解決疑惑的老師。

上課的期間之外，在家練習 coding 的過程如果有疑惑，只要丟到社群詢問老師，幾乎都能在一天之內得到老師的回覆。而發問的問題甚至不限於上課的範疇，提出工作上的問題或是前端相關的知識，也都能從 Kuro 老師身上得到實用的答案。

![Discord 群組討論](//images.ctfassets.net/8er52l3j5u76/3V7UDx20EMoxdgTxtk20i9/2a3f20f4cfcd59ac5f5cbe94b8b41f8e/discuss.jpg)

## 上課教得比預期的還深跟多，完全物超所值

在上課的過程中，Kuro 老師總是能意識到同學會在哪個主題上卡關，每當有這樣的情景，老師一定會放慢講解速度，並且「非常」仔細得拆解程式運作步驟。資料會從哪裡進來、哪裡出去？哪個變數是自己命名？這類初學者常卡關的部分，基本上老師都會特別講解。甚至有時候，同學自己可能還不知道會有雷的地方，老師也都會重點提醒，耳提面命希望同學遇到需求的時候別被雷到。

由於上課的內容正好是工作上實際會派上用場的技術 (Vue.js)，有開發經驗的人應該都知道，程式課程的內容基本只會傳授開發「原則」，當真的上了「戰場」，往往會遇到「原則」之外的事情。

像是說，我們透過 Vue 開發應用程式，能夠很方便的完成那些透過原生 JavaScript 開發會很繁雜的資料操作，但如果客戶在意的不是這些資料需求，而是希望他的網頁在手機瀏覽時能使用「手勢」控制畫面呢？確實這並不是 Vue 所能處理或說擅長的事情，以至於我拋出這個問題的當下，有些擔心老師會不會因為這是 Vue 之外的事情，而簡單的帶過？**想不到的是，老師為了這個議題刻意更新了他原本預計的授課內容，特別示範如果 Vue 無法完成，那我們有辦法怎麼去達到需求，在這個議題講解完的那個當下，身邊的同學看起來也因為多學到一個技巧而感到興奮！**

## 線上社群，保固我的學習

又有一次，工作上遇到了想使用 vite 框架設定 proxy 的需求，爬了好多文章就是無法設定成功，再次把問題透過社群詢問老師，但在老師提供範例、說明完之後，我花了好幾個小時還是遇到了相同的錯誤，硬著頭皮一次又一次的把程式碼、錯誤訊息貼給老師，過程中老師沒有一絲絲的不耐煩，反倒是把我的問題當成他的問題一樣，一步步幫我分析可能出錯的地方，在與老師不斷試錯的過程，最終找到根本的原因。

「啊！我知道了！你等我！」Kuro 老師拋下這句話，視窗持續顯示 Kruo 正在輸入訊息。
「我好像也知道了OAO！！，我試著先完成你給的範例，比對出錯誤問題了！」
「XD」

看起來Kuro老師把原本想解惑的內容刪了，留下了笑臉表情。

在那個當下，即使只是透過訊息對話，感覺像是面對面一起完成任務、解決問題後的那樣相識一笑。

**只能說，能認識像 Kuro 這樣的一位老師，真的是一件很幸福的事情！**

> 👩‍🏫 課務小幫手：
> 
> ✨ 想掌握 Vue.js 觀念和原理嗎？ 我們近期也有開設 [Vue.js 3.x 與 Pinia 前端開發實戰課程](/courses/vue-js)喔！

Vue.js 3.x 與 Pinia 前端課程，讓我學會派得上用場的技術

## 為什麼想來上課

之前在六角學院上課時，就聽過 Kuro 老師的大名，因為當時老師、同學們都很推薦這本書「[0 陷阱！0 誤解！8 天重新認識 JavaScript！](https://www.tenlong.com.tw/products/9789864344130)」，Kuro 老師就是這本書的作者，書本內容非常豐富，很適合新手閱讀，每次閱讀我自己都很有收穫，但是讀書一直不適合我，從兩年前就知道這本書，到現在書本還是沒有讀完，反倒是課程都完課了呢！

## 課程體驗

這次在[五倍學院](https://5xruby.tw/)上課，是以實體課程為主，剛開始上課時，覺得 Kuro 老師有點嚴厲，但最後會發現老師其實蠻幽默的，而且課堂練習很充足，中間遇到不會的時候，即使問題再蠢，老師也都很有耐心指導，甚至在回家功課也會依據同學學習程度開出不同程度的作業，讓大家的挫折感不會這麼大。

老師大概每上課到一個段落，就會來一下課堂小練習，雖然背後有人走過去會有點兒壓力，但是有時候也是救世主啊～因為寫不出來就是寫不出來，我深深記得，我自己筆記的函式方法打錯了，所以課堂小練習邏輯都檢查無數次是沒問題的，卻還是出不來，結果老師發現我把 `.attr()`，打成 `.artt()`，難怪都出不來（自己被自己蠢死）。

## JavaScript

在老師的課程上，可以很清楚的知道 JavaScript 奇妙的邏輯，例如： `NaN`，為什麼 `NaN === NaN` 卻是 false 或是在業界裡經常利用布林做哪些事情，數字在 JavaScript 通常是怎麼被轉成文字，字串＋數字的結果是什麼，這些我們常常搞不清楚的 JavaScript 奇妙邏輯，在 Kuro 老師這邊都可以很容易理解，在使用 JavaScript 的時候，就不會有玩踩地雷的感覺，或是看到璀璨耀眼紅的錯誤。

## jQuery

這門課程教了許多 jQuery 的語法，在三大框架的加持下，jQuery 這幾年比較少人提到它，但你無法阻止前人寫的 code 沒有 jQuery，我也很慶幸好加在當初有認真上課，至少前人的 code 都可以理解，也比較好去 google 相對應的資源，在這堂課中，會教許多 jQuery 的應用，也因為 jQuery 短短幾行就可以輕鬆落實 Javascript 好幾行，所以 jQuery 這邊簡單的測試成功後，再倒推回去 Javascript 會輕鬆很多。（例如：選單按鈕加入 .active Class）

https://codepen.io/xhfgdeaw/pen/mdGvmQq?editors=0011

![JavaScript / jQuery Codepen](//images.ctfassets.net/8er52l3j5u76/1rPrNS7v1pMELO8uzAONHG/4a742898c767f09c5aa552513c9bd15a/codepen.gif)

> 簡單的三行 jQuery 就可以完成按鈕切換效果

## 小結

實體課程雖然體力上會比較累，但是一進教室後，就可以接收到很多知識，Kuro 老師安排的上課節奏不會讓人感覺壓力太大，趁至還拉長練習時間，同時又相對應加碼課程，五點下課都只是表定五點，加碼時間都感覺賺到，下課回家後好好休息，隔天再複習一下、整理筆記，利用平日晚上剩餘的時間練一下作業，在這門課上會覺得很有收穫！

本文引用自 [田佩穎](https://medium.com/@eee317) Medium 文章 - [五倍學院 — JavaScript & jQuery 前端入門課程學習心得](https://medium.com/@eee317/%E9%AB%94%E9%A9%97%E4%BA%94%E5%80%8D%E5%AD%B8%E9%99%A2-javascript-jquery%E8%AA%B2%E7%A8%8B-c8a36cca77ae)

>👩‍🏫 課務小幫手： ✨ 想掌握 JavaScript / jQuery 的基本觀念嗎
> 我們有開設 📒 「[JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript)」課程唷 ❤️️

五倍學院 JavaScript / jQuery 課程

五倍學院 — JavaScript & jQuery 前端入門課程學習心得

## 參加 React 完全進階攻略 動機

在五倍參加完 ASTRO camp 幸運的很快速找到工作，但第一份工作居然是要寫 React ？！因為看到五倍也有開設 [React 完全進階攻略](https://5xruby.tw/courses/react) 課程，加上在 ASTRO camp 其間有上過一堂奶綠老師的基礎 React 課程，喜歡老師在課堂中會穿插一點笑話，讓整體課程不會過於沉悶的教學風格，於是乎我又再度回到五倍的懷抱，利用假日來上奶綠老師的 React 完全進階攻略 課程，如此一來我就可以平日上班實作 React 專案，假日跟著老師了解 React 原理，以及學習怎樣叫做漂亮的 Pure Function 。

## 課程內容貼合業界

雖然課程名稱是 React 完全進階攻略 但老師上課會由淺入深的帶入，從 Components 如何撰寫，到 Testing Library 測試，所以相信跟我一樣對於 JavaScript 有基礎，但對 React 幾乎是零基礎的人，也可以跟得上進度，加上我自認自己滿幸運的，一起上課的學生們大部分都跟我一樣工作上有運用到 React ，除了老師上課舉例是業界工作上實際會遇到的雷外，同學們也會提問自己專案上遇到的問題，這堂課幾我可以說是完全貼合現在業界的需求。

## 怎樣的人適合這門課程

在工作與學習並行的情況下，我每週學習到新的或是更好的寫法時，都可以立即運用在專案上，抑或是遇到一些困難點，也可以跟老師討論一下大方向，非常慶幸自己在剛上工即報名課程，大大縮短了我上工時的陣痛期。我覺得這門課程除了適合對 React 有興趣的人外，更適合目前工作上也會用到 React 的人，可以在課程中發現自己寫 code 的盲點，或是了解更好的做法。

以我自己為例：像是簡單的 Modal 開關，在上課前的我絕對是利用 `useState` 控制開合，再在最外層 `useEffect` 時打 API 資料，內層需要資料時再一層一層將 props 傳入，實際上這個做法會導致傳入一堆 props ，讓自己距離 Pure Function 更加遙遠（因為層層互相影響），且平行層級的 `Components` 用此方法非常難拿到資料；但在上課後，學到了 `useContext` 、 `useReducer` 等更進階的用法原理時，我就像是打通任度二脈，可以節省很多參數傳來傳去的弊端!

在學會更進階的用法後，就變成如下的範例，如此一來程式碼可讀性提高，且光看英文大概都可以知道是在控制不同 Modal 開關！

```javascript
import { BuyListContext } from "components/buyer/list"

// 在最外層的元件包 BuyListContext.Provider 可以使內層的元件在不用傳 props 的狀況下拿到 value
<BuyListContext.Provider value={{ state, dispatch }}> 
    // 元件內容...
</BuyListContext.Provider>
```

```javascript
import { useContext } from "react"
import { Modal } from "components/shared" // 客制 modal 元件
import { SubmitButton } from "components/shared" // 客制 SubmitButton 元件
import { BuyListContext } from "components/buyer/list"

// 用 open 傳入 modal 開合的布林值
const CancelHintModal = ({ open }) => {   
  const { dispatch } = useContext(BuyListContext)

  const handleBackOrderDetial = () => {
    dispatch({ type: "CANCEL_HINT_MODAL_SWITCH", payload: false })
    dispatch({ type: "ORDER_DETAIL_MODAL_SWITCH", payload: true })
  }

  const handleToCancelReason = () => {
    dispatch({ type: "CANCEL_REASON_MODAL_SWITCH", payload: true })
    dispatch({ type: "CANCEL_HINT_MODAL_SWITCH", payload: false })
  }

  return (
    <Modal open={open} showIcon={false}>
      <h3>取消訂單提醒</h3>
      <p>為保障買賣雙方的權利，若商品為已發貨，將不能取消訂單。</p>
      <div>
        // 若點下取消，則關閉此 modal ; 且開啟訂單詳細資訊 modal
        <SubmitButton value="取消" isHollow={true} atClick={handleBackOrderDetial} />
        // 若點下繼續，則開啟取消原因 modal ; 且關閉此 modal
        <SubmitButton value="繼續" atClick={handleToCancelReason} /> 
      </div>
    </Modal>
  )
}
```

## React 完全進階攻略 課程最讓我覺得物超所值的是

因為奶綠老師本職就是業界的資深工程師，除了上述說到老師會舉實際上工作會遇到的雷外，更會介紹很多實際 React 專案會用到的套件或是小工具，讓我們可以更快上手。但撇除以上幾點，我自己最喜歡這堂課的最關鍵點是，每堂課都會有個回家作業，當交作業後，老師會親自幫你 code review ，畢竟要寫得出功能或許不難，但要寫出好的 code ，對現階段的我來說還是非常不足的，而參加 React 完全進階攻略 除了可以學到 React 的運用及原理，附加價值更是可以獲得業界資深工程師親自 code rewiew，對我這個小菜雞來說已經太超值！以上參加課程的心得希望可以幫助到，對 React 有興趣，或是正在猶豫的大家～

本文引用自 [Krystal 的桃花源](https://kkrystalll.github.io/) - [從原理到精通的 React 全攻略課程](https://kkrystalll.github.io/2023/02/19/5xCampus-React-course/)

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React.js 觀念和原理嗎？<br />
> 我們有開設 📒 「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」課程唷 ❤️️

React 課程

從原理到精通的 React 全攻略課程

## 報名契機

寫程式很強的老師，未必就是一個很會教的老師，就好比學校老師跟補教名師的差別，記得以前在學校的時候，雖然教授很厲害，但很遺憾的就是沒遇到很會教的老師，所以在校時學習得不好，技術能力與經驗的欠缺讓我在工作上吃盡苦頭，所以常常在工作上或者工作之餘，遇到問題時就是要 Google 相關資料，或者上相關技術社群發文求助。由於學習到的知識相當零碎片段而不是一個有系統且循序漸進的完整知識，往往都是一知半解，事倍功半，大大減低了工作效率進而影響到工作績效，績效的優劣自然也影響到薪水。

後來選擇到五倍紅寶石專業程式教育機構的 [Vue.js 3.x 與 Pinia 前端開發實戰課程](/courses/vue-js)，來補足技術上的基礎，而這次的課程老師是許國政 (Kuro老師)，老師除了本身是一名程式設計師、技術社群參與者、前端程式設計課程、技術書籍作者之外，還身兼 Vue.js Taiwan 社群主辦人，對 Vue.js 程式圈是為極具有影響力和貢獻的人物，能有機會上到老師所開課的課程是與有榮焉的事情！

![Vue.js 上課照片](//images.ctfassets.net/8er52l3j5u76/65yMWr3vFoa4BGxu5STm6L/f856dc2e964e55697f6cdbd9af4790cb/vue-course.jpg)

## 不用擔心初次接觸Vue.js

在確定要報名該課程之前，我完全沒有接觸過 Vue.js，因為工作上的需要，主管讓我報名該課程，由於沒有接觸過此語言深怕上課時跟不上，還在課程開始前稍微惡補了一點基礎的概念並安裝好開發環境。

正式上課前，老師有特別告知學員需要安裝和建議安裝的開發及除錯套件，正式上課時從基礎概念並配合實例做教學，課程中也會安排實做，且老師會不斷巡視各學員的學習狀況，若有遇到問題也會立即協助學員，課後練習也讓學員更瞭解自身的學習狀況，且也能透過 Discord 與老師互動。對於第一次接觸該程式語言的人完全不用擔心跟不上的問題。

許國政 (Kuro老師) 不僅認真教學，表達能力也相當不錯，就算是初次接觸該語言的人也能一點就通，簡直就是補教名師級的人物，雖然**補習是需要費用的，但上過課之後感覺非常超值**，這些對自我能力的投資將來都能十倍奉還的，好比練功打怪一樣，手無寸鐵的上場很快就被打趴了，來五倍紅寶石專業程式教育機構練功好比配備更多精良的武器，不管是求職面試，或者是工作效率上都能大大加分，很快地就能從未來的收入上展現出來了，千萬別吝嗇於對自我技術上的投資。

![Vue.js 課程封面](//images.ctfassets.net/8er52l3j5u76/wcTofv8uLP7OZsqxHRW5s/c9831ff31002905c89685b151d989d73/course-cover.jpg)

## 從 Vue.js 核心觀念開始打好基礎，將實戰練習應用在工作中

目前 Vue.js 已開始應用在工作專案上，最常使用的就是 `v-for` 列表渲染。如果要把一個陣列渲染到物件，我們最常使用的就是迴圈或 `forEach` 的方式將資料顯示於畫面上，在 Vue.js 裡要遍歷陣列的方法非常的簡單，大大的降低程式碼的撰寫，也增加程式的易讀性。

```
<q-chip v-for="units in unitOptions" :key="units.value" icon="local_library"
  :size="(unitSelected == units.label)?'15px':'14px'"
  :color="(unitSelected == units.label)?'orange-4':'orange'"
  :text-color="(unitSelected == units.label)?'black':'white'"
  :label="units.label"
  clickable v-model:selected="LineModel.Unit[units.value]"
  @click="actSetLineUnit(units.value, LineModel.COUNTRY);actGetLinesData()">
</q-chip>
```

## 完課後的收穫

初次在五倍紅寶石上課，感覺受益良多，而且發現其實報名上課的學生比我想像中的還要多呢，深深體會到自己所學的不足，學如逆水行舟，不進則退，看到別人都這麼認真的學習新技術我怎能偷懶對吧，**未來若有機會仍會選擇五倍紅寶石來增進自己的專業能力。**

>👩‍🏫 課務小幫手：
>
>✨ 想掌握 Vue.js 觀念和原理嗎？
>我們近期也有開設 [Vue.js 3.x 與 Pinia 前端開發實戰課程](/courses/vue-js)喔！


Vue.js 3x 與 Pinia 前端開發實戰

Vue.js 與 Pinia 前端開發實戰 - 學員課程心得

我是在 ASTRO camp 的分組專案第一次碰到 React.js，那時候是在實作前後分離的專案，而前端我們選擇用 React.js 來開發，在沒有上過課的狀態下，只好自己摸索這陌生的框架，卻不知不覺地在實作上喜歡上用 React.js 來開發。因為 React.js 帶來的便利性真的太多了，例如採用 functional programing，讓程式碼好閱讀和維護。

## 基礎到進階，一網打盡

在還沒找到工作前就覺得學會 React.js 是一件重要的事，便再次報名五倍紅寶石的 [React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)。奶綠茶老師是業界非常資深的前端工程師，在這邊最常聽到的就是：「這題我面試一定會考！」事實上，老師講得真的就是業界需要具備的即戰能力。

而我覺得在這邊學扎實的基礎功並具備進階自學的能力，這是一門讓前端開發者可以從 junior 成為 senior 的修煉課，而老師會時不時帶入 JavaScript 的基礎概念，讓你溫故知新，知其所以然。

```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 的我也曾犯了以下的錯：

```javascript
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 全攻略 - 入門到進階](https://5xruby.tw/courses/react)，相信我，你一定會在課堂間得到受用無窮的收穫。

![React - 奶綠茶](//images.ctfassets.net/8er52l3j5u76/l0LhMAJ2pUqPl9GzMpZH6/3cf8956dbcea04fbb19492a53dde2fe3/react-milkmidi.jpg)

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React.js 觀念和原理嗎？
> 我們有開設 📒 「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」課程唷 ❤️️

React

收穫, 不止 React.js

作為一名前端工程師，由於在日常工作中經常使用 React.js，而且也非常地喜愛這個前端框架。所以，為了更加了解 React.js，並且能更精進自我，我決定選擇了「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」這門課程，由五倍學院舉辦，並由奶綠茶老師教導。

## 為什麼選擇這門課？

為什麼選擇上這門課？首先是因為我本身對 React.js的興趣，希望在這門課中學到更多的知識。其次，五倍紅寶石在業界十分著名，師資團隊一字排開都是業界的大神，也都擁有豐富的教學經驗，因此我對這門課非常感興趣，也覺得可以為我的職涯帶來幫助。

## 這門課帶給我什麼幫助

在這門課中，我學到了很多實用的知識。老師會由簡入深帶領我們一步一步學習，老師自己也準備許多有趣並且實際運用的專案。平常一些覺得枯燥乏味的部分，在幽默風趣的奶綠茶老師講解後，也都覺得非常的生動活潑。例如 React.js 元件的生命週期、處理資料與狀態管理等。這些知識不僅讓我更加了解 React.js，也知道了一些程式碼底層如何運作，對於 React.js 有非常深刻的了解。

除此之外，奶綠茶老師也教導我們一些在開發實戰的經驗與技巧，還有如何讓 React.js 能夠更節省效能。例如，我學到了如何實現 React.js 元件的 lazy loading，以提高網頁的載入速度，還有運用 useMemo 和 useCallback 來優化網頁的渲染。

老師除了教導各個 React.js Hooks 的使用以外，同時也與時俱進地更新 React.js 版本，React.js 18 更新了什麼都講解的非常地仔細。而在狀態管理部分，奶綠茶老師也教我們如何使用 Context API 來處理資料與狀態管理，還有使用知名開源套件 Redux，這對我在工作中實現組件間的資料共享和狀態管理有很大的幫助。

除此之外，這門課還教授了 React.js 開發的最佳實踐，例如如何設計優秀的 React.js 元件和如何使用 React Router 來實現頁面路由。最後也一再強調測試對於開發的重要性，教我們該怎麼使用 Jest 和 React Testing Library 來測試。

## 感謝 x 五倍

最後，我要感謝五倍紅寶石。在這門課中，我不僅學到了很多知識，也在一個輕鬆愉快的環境中享受到了學習的樂趣。我對五倍紅寶石的教學團隊表示敬意，每當我有任何疑問想要詢問時，課務人員都會非常有耐心，並且不厭其煩地回答我的任何有關課業上的問題，非常感謝他們為我提供了如此寶貴的學習機會。

我深刻地體驗到了五倍紅寶石對學生的關心和支持，因此我強烈推薦五倍紅寶石的課程給所有對前端開發有興趣的人。如果你對 React 有興趣的話，那麼 React.js 全攻略是一門不可錯過的課程，不管是剛入門或是資深的工程師，它都會為你提供更多有用的知識和實踐經驗。

![React 課程合照](//images.ctfassets.net/8er52l3j5u76/ZDOMIGZkTIK4b0RlPYIFx/24b4a7b4047394a5581f16333c00c3a8/react-group.jpg)

本文引用自 [Bucky's f2e bucket](https://bucky0112.github.io/) 的文章 -  [React.js 全攻略班推薦給想要精進自我的前端工程師](https://bucky0112.github.io/2023/02/15/react-class-experience/)

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React.js 觀念和原理嗎？
> 我們有開設 📒 「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」課程唷 ❤️️

React.js 全攻略班推薦給想要精進自我的前端工程師

喜歡自學的朋友有福了！

五倍學院準備數個月，打造了一個全新的[線上課程學習平台](https://base.5xcampus.com/)，提供給所有的學生和專業人士一個新的學習的管道。課程內容從入門到進階，讓你可以彈性安排自己的時間，挑選合適的課程，扎實打穩網頁基礎。

## 這個線上課程平台適合什麼人呢？

「如果你是 ⋯⋯」

✔︎ 非本科系卻對開發有興趣的人
✔︎ 想要知道怎麼跟工程師溝通的 UI / UX 設計師
✔︎ 已經是工程師，想要對技術做更進階的研究
✔︎ 不住在北部，無法通勤報名實體課程的朋友

那麼你就很適合認識這個[線上課程平台](https://base.5xcampus.com/)，以一名新手來說，平台裡有許多基礎課程可以挑選；又或是你一位已在業界一陣子的工程師，這裡也有合適的進階課程可以進修。

## 課程內容

課程的講師都是業界或技術社群的專業人士，擁有豐富的知識和實務經驗，課程的內容豐富多元，多種主題如：前端、後端和資料庫課程等，讓學習者可以依照興趣選擇需要的課程主題。

## 課程的特色

### 會員福利

- 只要註冊會員後，馬上獲得 [Git 小教室](https://base.5xcampus.com/courses/git-tips)課程首禮！趕快加入會員，跟我們一起開始探索學習之旅。
- 五倍將不定期上架**會員專屬**的免費課程。

### 成為會員後

##### 享有終生觀看制

只要購買課程後，你可以不限時間和地點無限次觀看影片，亦能按照自己的習慣和步調每天安排學習進度。課程上線後，你隨時隨地都可以透過電腦、手機或平板觀看課程影片，沒有時間和地點的問題！

##### 隨時解決你的學習疑惑，學習終身保固

每個課程單元和作業下方都有專屬的留言討論區，可以把遇到的問題或卡關的地方留言給老師，讓你不再求救無門。

## 付費方式

我們提供線上刷卡、ATM 轉帳等多種不同的付款方式。購課後，五倍線上課程平台將合法開立免稅電子發票，若有進一步的問題，歡迎[私訊小編](https://www.facebook.com/5xruby)了解。

## 學習之旅，現在就啟航

五倍紅寶石致力讓「寫程式」這件事，不再只是紙上談兵，而能從零開始解決問題、建立作品，為工程師職涯鋪路。


五倍消息