五倍直播間

Blogs - Sidebar

## 關於上課動機

我使用 React 開發約有一年半的時間。一開始和大家一樣從官方文件開始練習，後來找些國外線上影片實作各功能的應用，有幸順利地在自學一點時間後，就找到第一份 React 前端工程師工作。

上班過程中也在同事的教學、下班不斷摸索下，逐漸有獨當一面和後端同事協作專案的機會，陸續在公司開發並上線了數個專案，雖然覺得很有成就感，但仍然覺得自己其實都不是很了解整個運作原理，僅僅是在知道「這些 code 這樣寫就能 work」的狀況裡日復一日地開發著...

## 第一堂課帶來的衝擊

- 其實萬物皆 component，且裡面的值應都從 props 拿
- 程式碼風格能帶給團隊協作開發超乎想像的幫助
- 認識 React Hooks 背後原理原來並不難

回頭看一年多前寫的程式碼，用第一堂課所學內容就可以直接優化，沒比較沒有傷害啊!!!這邊小小分享對比：

```javascript=
/**
 * 第一段為原有程式碼，僅擷取部分內容說明，內容有微調過
 * */
const renderStatus = (status) => {
    if(status === 1){
        return ...
    }else if(status === 2){
        return ...
    }else if(status === 3){
        return ...
    }
}

const renderDetail = (count, price) => {
    return(
        <div style={{color: '#ddd'}}>
            <p>共{count}件</p>
            <p>總計{price}元</p>
        </div>
    )
}

const orderView = () => {
    return(
        {(orderList.map((item) => {
            return (
                <li style={{ width: '100%', marginBottom: '40px' }} className="order-list">
                    {this.renderStatus(item.status)}
                    {this.renderDetail(item.count, item.price)}
                </li>
             )
        })
    );
}
export default orderView;
/** 修正：
 * 1. css 樣式就統一寫到 class 裡，非必要不會同時存在 inline style
 * 2. for loop 產生的 dom 元素一定要給 key 值，並且是唯一值
 * 3. 分號統一都要給，維持優良程式碼撰寫風格
 * 4. component 不要放在同一份檔案裡
 * */
import renderStatus from ...
import renderDetail from ...

const orderView = () => {
    return(
        {(orderList.map((item) => {
            return (
                <li key={item.id} className="order-list">
                    {renderStatus(item.status)}
                    {renderDetail(item.count, item.price)}
                </li>
             );
        });
    );
};
export default orderView;
```

在還沒上這堂課以前，我以為 component 就是切分出常用元件、或將頁面簡單做劃分，方便重複應用時的呼叫等用途，可是每個 component 程式碼卻幾乎都超過 1000 行，主要原因是習慣將元件拆在該檔案裡，而非另外抓出去做新檔案。確實回想起來，這樣的作法，每次在維護或想修正某個地方時，就要在上千行的程式碼裡，瘋狂猜測搜尋關鍵字，無法一眼找到要修正的地方。

## 第二堂課開始習慣大量練習

要當一個好的工程師，我想絕對不是大量無知的撰寫出「會動的程式碼」而已，而是應該要建立在好的品質，也許目前還做不到寫出無瑕的程式碼那樣的境界，可是至少在勤奮的練習中，才會有深刻的記憶～

課堂上不只講解核心知識， **示範程式檔案更是多到不怕你學不會！** 每一個環節上，老師都會準備超好理解的範例程式碼，讓我們可以在課堂上直接練習，偶而也會補充一般工程師常見的寫法、或效能較差的方式，最後在課堂上再一步一步引導出正確的解答。(這種教學真的超棒，不會每天就只是不斷接收、而是也有自己發想的過程)

今天最印象深刻的是在老師的範例解析下，體認到有些套件會讓我們在撰寫時覺得很方便，但也有可能在無形之中因此拖垮整份程式碼效能，像是先前很廣被應用的 emotion-and-css-modules，經過老師講解，才知道使用它後，程式碼其實會再被包裝過而且會隨著使用次數增加、程式碼被包覆的更多層了。老師也在這個例子後，加深帶到其實網路上已有很多關於 CSS in JS 的優劣分析，更能驗證第一堂課時老師曾經提到的樣式與程式分離的重要性！

## 第三堂課有實際回饋與深入探討

學習了這麼多 React 基礎後，第三堂課開始認識了更多的 hook 成員，像是 useContext,  useParams, useReducer 等，搭配老師整理出來的流程示意圖(如下圖)，更容易理解使用時底層是如何運作以達成我們所要的作用。

![react useReducer](//images.ctfassets.net/8er52l3j5u76/64SnF1rqHFLXbLluueWHde/78e6a1679829e3629f1fac5352958015/use-reducer.png)

因為課程很扎實，所以後期會覺得節奏稍快，但老師在課程掌控上非常得宜，總是可以在1小時內講解完相關的技術，學習上不會莫名的中斷或跳來跳去的銜接不上。另外，老師也會不時分享一些面試考題，例如什麼是 pure function？什麼時候需要使用 useContext？

然而課程教材中有超多練習題可以邊學邊練，老師一直用著「**3分鐘隨堂小測驗，每分鐘會有小題示**」的方式引導我們學習，但老師也會精心準備一些練習題，讓我們可以回家吸收後再行實作。在第二堂課結束時，老師出了一份練習作業給我們，大家以私訊方式繳交，所以第三堂課結束前，就有老師的檢討與回饋，完全就是超珍貴的 code review 機會啊！

## 第四堂課是終點也是起點

![React 教室 2](//images.ctfassets.net/8er52l3j5u76/6vJ4S8ye2AqafP4ODwxTR5/bd4085e03cfea77d1541de9af8cb6a1d/classroom-2.jpg)

課程到了尾聲，最後一堂課認識了 Tailwind 導入 React 專案後的優點、一些相似套件的應用與比較、container component 的概念和最重要的 unit test、story book 等，當然也在結尾時有提及 React v18.0 後的新功能、更提到為何會出這些新功能(例如為了解決什麼問題，官方為何做這些改版)。

在課堂上一樣會檢視作業與給予回饋，老師也會適當地帶到可能有些同學會怎麼實作哪個功能，針對這些寫法，給予分析跟實質探討，可以讓同學之間有一點交流和互相學習。畢竟進入職場後，如果公司內部沒有團隊 code review 文化，可能就不會有激勵彼此競爭成長的機會了！

簡而言之，課程中除了主軸 React 以外，老師也會在一些適當時機介紹其他技術、專有名詞由來或未來若有想在專案中整合 Typescript，可能要注意到的地方、可以慢慢養成的習慣等，還有超實用的 debug 技巧，都是超級扎實的技術！

課程結束了，但是學習總是無止盡，期待自己在這次課程中所有收穫，都能轉換成美好果實～

![React 課程封面](//images.ctfassets.net/8er52l3j5u76/6s0GICi0ycPtvPadPwO0iG/f24e61b8737a710d30bba2e3dc9056af/course-cover.jpeg)]

本文節選自 [Annie's Blog](https://annielin28815.github.io/about/) 中文的文章：[React 全攻略-入門到進階學習心得](https://annielin28815.github.io/2023/07/24/React%20%E5%85%A8%E6%94%BB%E7%95%A5-%E5%85%A5%E9%96%80%E5%88%B0%E9%80%B2%E9%9A%8E%E5%AD%B8%E7%BF%92%E5%BF%83%E5%BE%97/)

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


react 教室

React 全攻略 - 入門到進階學習心得

## 從 Level 0 開始學前端

在今天的數位化時代，程式開發成為一個引起廣泛關注的領域。許多人對於寫程式抱有濃厚的興趣，然而初學者常常面臨著一個重要問題：**如何踏出寫程式的第一步？** 尤其對於完全沒有寫過程式的人來說，選擇一個適合的語言和學習平台就成為起步的關鍵。

為了幫助那些對前端開發感興趣的初學者，五倍學院特別專門為了新手推出了全新的免費線上課程：「[開發環境新手村](https://base.5xcampus.com/courses/frontend-novice)」。這門課程的重點並不在於教授程式語言、語法和邏輯等細節知識，而是希望從不同的角度引領學生進入基本的前端開發過程。

無論你是否具備基本的 HTML、CSS、JavaScript 概念，甚至完全不了解這些概念，只要懂得基礎的英文，都能輕鬆參與這門課程。我們的目標是讓你更深入了解前端開發，瞭解工程師日常使用的工具，並為你打開寫程式這個世界的一扇窗戶。

無論你是對於前端開發有濃厚的興趣，或是想要探索程式開發領域的可能性，「開發環境新手村」都將成為你學習的良好起點。透過這個課程，你將獲得實用的知識，並經歷前端開發的基本流程。讓我們一同探索前端開發的奧秘，並共同開啟寫程式的全新旅程！

課程連結：[https://base.5xcampus.com/courses/frontend-novice](https://base.5xcampus.com/courses/frontend-novice)

## 這門課程適合什麼樣的人

這一門課適合各種程度的學習者，包括：

- **完全沒有程式經驗的人，但想進新手村看看**：如果你對程式開發感興趣，但對於寫程式一無所知，不用擔心！我們的課程將從基礎概念出發，以淺顯易懂的方式引導你進入前端開發的世界。你將逐步學習並瞭解所需的工具和技術，為自己打下堅實的學習基礎。

- **已經有一點點 HTML、CSS、JavaScript 概念**：如果你對 HTML、CSS 或 JavaScript 有些基礎認識，但仍然覺得迷茫，不知道如何繼續學習和進步，這門課程將是你的良好選擇。透過「開發環境新手村」，你可以深入瞭解前端開發的實際應用，學習如何有效地運用這些語言和工具，進一步提升自己的能力。

- **新手工程師，想來看看我們怎麼介紹**：如果你是一位新手工程師，希望進一步加強自己在前端開發領域的技能，這門課程將給予你全新的視角和啟發。我們將從實際案例出發，探討工程師在日常工作中所使用的開發環境和工具，讓你更深入瞭解行業內的最佳實踐。

不論你的程式開發經驗如何，「開發環境新手村」都將提供一個友善且互動的學習環境，讓你輕鬆踏出寫程式的第一步。我們期待與你一同探索前端開發的精彩世界，並帶領你成為一名優秀的前端工程師！

## 講師背景

![講師介紹 Lin](//images.ctfassets.net/8er52l3j5u76/Pz2lJrerBqCmbFOdE9d2k/5df6dd3db561d4dc3fcef0054adc556a/speaker.jpg)

Lin
以前是西裝訂製顧問，透過自學轉職成前端工程師，現職五倍學院擔任前端工程師以及 ASTRO Camp 的專業助教。

## 課程特色

### 會員福利

加入我們的會員後，你將享有以下福利：

- 免費觀看「前端開發環境新手村」課程：成為會員後，你可以免費觀看由講師 Lin 所提供的「前端開發環境新手村」課程，讓你事先瞭解課程內容和風格。
- 會員專屬獨家課程：我們不定期上架會員專屬的獨家課程，讓你持續拓展知識和技能，保持學習的動力和成就感。
- 終生觀看制度：不論你下載或購買平台上的任一課程，你都可以無限次觀看影片，並且沒有時間和地點的限制。你可以按照自己的節奏和時間表安排學習，隨時隨地透過電腦、手機或平板觀看課程影片。
- 解決學習疑惑：每個課程單元和作業都設有專屬的留言討論區，你可以在這裡提出問題、分享經驗，並直接與講師和其他學習者互動。無論你遇到什麼問題或卡關的地方，我們都會隨時提供支援，讓你不再孤單面對學習的挑戰。

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

無論你目前是否具備程式經驗，五倍學院都致力於提供清晰易懂的教學內容，並以實際案例幫助你理解前端開發的核心概念。我們將引導你透過有趣且具挑戰性的任務，從一個全新的角度逐步建立起前端開發的技能和信心，而不需擔心語言和語法的複雜性。

誠摯邀請你立即註冊成為五倍學院線上平台的會員，一同展開前端開發的奇妙之旅。我們相信透過這門課程的實作導向，你將深入了解開發的本質和過程，並從零開始學習並掌握解決問題的能力，為未來的工程師職涯打下堅實的基礎。

在學習之旅中，你將獲得以下好處：

- 深入了解前端開發：課程以清晰易懂的方式，從實際案例出發，幫助你理解前端開發的核心概念。無論你是完全沒有經驗還是有一些基礎知識，我們將帶領你進入這個令人振奮的領域。
- 實作導向的學習：我們著重於實踐和應用，透過有趣且具挑戰性的任務，讓你運用所學知識解決真實世界的問題。這將幫助你鞏固概念、培養問題解決能力，並為你日後的專業發展奠定基礎。
- 終身學習的支持：我們重視學習社群和師生互動，在課程中設有專屬的討論區，讓你隨時和講師及其他學習者交流和互動。你可以提出問題、分享經驗，並得到即時的解答和支持。

無論你是剛開始踏入程式開發領域的新手，還是想加強自己在前端開發方面的技能，「開發環境新手村」都將是你寶貴的學習資源。現在就立即註冊成為五倍學院的會員，一同啟航，開始你的前端開發之旅！

五倍學院線上課程平台免費課程：開發環境新手村

 五倍學院線上免費課程：開發環境新手村

## 如何得知課程資訊

在同事的推薦下，我得知了五倍學院的 [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)」課程唷 ❤️️

五倍消息