框架是工程師必備的開發工具，而 React 則是現在最多人使用的前端框架。市場對 React 工程師需求旺盛，給薪也較高。想爭取好的前端工程師工作機會、提升薪資競爭力，你絕對不能錯過 React。然而，前端學習要進階到框架，卻令人卻步。而成為業界人才，除了技術，還要準備什麼？要有什麼基礎，才能更順利展開學習？又如何更有效地學會呢？
React 熱門，業界需要 React 工程師
從 State of JS 2021 這份軟體工程師必看的 JavaScript 年度趨勢報告中，可以看到從 2016 年起，React 一直都是最熱門的前端框架。
接著我們再搜尋求職網站，看看市場對 React 工程師的需求。在 CakeResume、104 人力銀行上，可以搜尋到近 300 筆需要 React 的 Junior 工程師職缺。其中，不乏來自大公司與外商，而薪資則落在 60 – 100 萬年薪之間。
學習 React，要有什麼先決條件？
資深前端工程師 Yuri 說明，一是要有紮實的 JS 基礎，其中也會用到許多 ES6 的語法。簡單來說，可以是看完一本 JS 核心語法的書，或是完成一門系統化的課程。所謂紮實的 JS 基礎，大致包含以下：
- 熟悉 HTML & CSS 基礎語法，並至少要能夠使用 Bootstrap 組裝出一頁式網站
- 熟悉 JavaScript 基礎語法，包括
- DOM
- 事件處理
- 函式封裝與調用
- 陣列操作語法
- 要有 ES6 module 的概念 (import & export)
- JS 非同步 (Promise, Async / Await)，打 API 會用到
- 有網際網路的基礎觀念，包括HTTP 的請求與回應、網路資源和 URL 之間的對應關係
- 知道什麼是 MVC 程式架構、RESTful API 設計風格
- 會終端機的基本操作語法，例如檔案建立或在資料夾之間切換移動
前端框架解決了什麼開發問題？想成為前端工程師一定要知道前端技能樹演進史
React 要學到怎樣的程度？
這邊幫大家定義入門 React 必學的範疇，包含：
- 知道什麼是前端框架
- 前端工程師在開發中扮演的角色與關注的重點
- 什麼是前端框架，並且知道前端框架在解決什麼問題
- Single Page Application
- 能夠建立 React 專案
- 本地環境建置
- 線上環境建議 (eg. CodeSandbox)
- 知道什麼是 Virtual Dom 和 React Elements，並且能夠建立 React Elements，也會使用 JSX 語法糖
- 熟悉基本的 React 框架操作，並且有資料流的觀念，能夠建立元件並傳遞資料
- Component & Props
- State & Reconciliation
- Component 的生命週期 & Effect
- Refs
- 掌握 React 基礎實戰技巧，能用 React.js 做到：
- 事件處理
- 表單處理
- 呼叫、串接後端 API
- Routing
- 狀態管理
- React Hooks
- 認識 React Hooks 的原理與想解決的問題
- 能夠使用基本用法如 useState、useEffect
- React Context
也建議大家，從官方文件學習。官方文件是工程師共同技術文件的來源、一份規範，是為沒用過的人設計，更有友善新手的內容。以下也提供一些 React 的學習資源：
- React 官網 – 學習指南
- Reactiflux：一個開發者聊天社群，有 Javascript、React、Redux 和相關主題的學習資源和文章
- Awesome React：蠻完整關於 React 生態系的主題列表整理
- Awesome React Components：React components 的資源
學會框架後，如何成為業界要的工程師？
學完前端框架，你不會馬上就變成工程師。還要建立、累積工程師思維與習慣，更要有開發工作的軟實力。
動手、也要動腦，養成思考的習慣：技術學習上，我們時常比較關注在動手，也就是會不會做、做不做的出來。但比較容易忽略動腦，像思考技術使用時的 why 與 How，例如：這個技術是想解決什麼問題？技術背後的設計邏輯是怎樣？所以在學習中，要刻意練習、養成思考的習慣，這能更加深學習的效果。
主動尋找更多技術應用情境：學習框架是為了成為軟體工程師，解決真實世界的商業問題。所以養成思考習慣後，可以開始找更多情境，來刻意練習技術使用。透過課程作業的練習、做 Side Project，都是很好的方式。
培養軟實力：由於軟體開發是團隊工作，所以要成為業界要的工程師，技術之外，還需要團隊協作、溝通、解決問題等軟實力。從企業雇主角度來看，會希望能找到怎樣的工程師呢？
跨國企業 foodpanda 的 Engineer team lead 說：
- 「工程師除了技術，還要能持續學習、精進專業」
- 「成為獨當一面工程師的關鍵心態，是能解決問題」
台灣區塊鏈新創獨角獸奧丁丁 Engineer Team Lead 則說：
- 「在像區塊鏈這樣變動快速的產業，工程師要能不斷學習，主動找出問題、提出解決方案。」
- 「而在團隊中，溝通、使用者思維、開放學習等軟實力，都不可或缺。」
AC 全端網頁開發課程，怎麼幫你？
學習 React、準備成為工程師時期的學習挑戰，是從被動吸收理論知識，到能帶著問題意識、主動尋找解決方法，並適應真實 open source 世界。例如，你開始能夠從官方文件找答案，就可能會遇到自己基礎學習不足、需要再填補、主動再找資源學習的地方。
ALPHA Camp 全端網頁開發課程，以兩個方向來幫助你起步與踏入 React 工程師的世界。
React 框架課程：在學期三：軟體工程師養成的前端班，與有 10 年授課經驗的奶綠茶老師合作「React 前端框架課程」，利用官方文件導讀，帶同學快速掌握 React 核心；以 exit ticket，驗收技術學習中較抽象的思考，幫助同學建立思考的習慣；提供大量情境練習題，幫助同學刻意練習在不同場景應用技術的能力。
工程師養成資源：課程安排「團隊專案」小組協作，幫助同學在模擬情境中，參與開發工作、建立產品思維。而學習社群不定期舉辦 Side Project 活動，也幫同學有更多應用技術的機會、甚至提早準備作品集。
