React 學習資源推薦

發表於 2019-09-01 分類於 frontend

前言

目前是學習 React 約兩個禮拜的初學者，菜到爆，到現在都還在卡關啦其實，不過當菜雞的優勢是還沒受到知識的詛咒，了解初學的困境，下面的東西都是我剛接觸 React 卡關後幫助我蠻多的東西。

需要的前置知識： Webpack、JavaScript、OOP

學習目標：搞懂 React 基礎，知道 React 的思維、原理，知道 state、props，各種 life cycle，JSX 語法。

當中我首推 React 小書。

我剛開始學習的障礙是 state 對應 UI 這件事情，觀念上應該能夠理解，因為就是改 state 畫面就變，很直覺。

但資訊量頗大，沒辦法把原本操作 DOM 的思維馬上轉換成這樣的思考方式，加上把程式碼切分成很多 component 後，又多了父子 Component 溝通，還有各種 life cycle，其實頗複雜的，有一陣子我真的不知道自己在學三小。

另外如果對 JavaScript 的 filter、map 不熟的話，蠻建議多看一下文件然後隨意實作一下多熟悉，React 會有很多相關的應用方式。

React 小書 -> 影片 -> 官方文件

我認為教學比較忌諱的是理所當然的塞給你一些原本不懂的資訊，然後操作又很快，略過太多細節，你只會想說這是什麼？為什麼你理所當然的講出來了？我在這裡幹嘛？

React 小書是我剛接觸 React 覺得最友善的資源，先從 JavaScript 物件說起，慢慢從原理說理，一步一步帶你，每個章節的結尾還有評論系統的實作，在理論和實作都沒有遺漏。

另外，React 小書很棒的地方是有把 Component 之間的關係畫成樹狀圖，一開始看到的時候大大幫助我理解 React，剛接觸 React 會迷失在父子Component 溝通的大海中，在腦中建立 Component 的樹狀圖就會清楚許多！

React 官方文件大家好像蠻推的，的確是不錯的資源，但我認為 tic tac toe 的範例教學就有節奏太快的問題，剛開始做可能就很懞懂的照做，結束後不懂自己到底剛剛做了什麼，所以會推薦 React 小書建立觀念後碰官方教學會好一點。

Mosh 的影片口條不錯，然後也超級詳細，推推，不過我看影片容易恍神，所以排序就在 React 小書後面，單純是個人學習方式的偏好。

結尾來一張巴哥

photographed by Matthew Henry