[譯]怎樣學習React—從初級到高階路線圖
嘿,夥伴們!
這個指南是為初學React的朋友寫的,在每個部分,我用心收集了最好的視訊和文章,讓我們學習起來更加容易。
注意:我跟下面提到的網站沒有任何關係,純粹是我個人的想法
預備知識
- 基本瞭解HTML,CSS和JavaScript
- 基本瞭解ES6特性,這裡有篇文章介紹ES6特性,從一開始,你至少應該知道以下特性:1.Let; 2.Const; 3.Arrow Functions; 4.Import and Exports; 5.Classes
- npm的基本使用
準備開始
你可以使用線上的程式碼編輯器去練習,或者你可以使用Create React App
為了掌握所有React的基礎內容,你可以從下面的教程開始學習:
現在你應該瞭解了React的基本內容,這足夠我們使用React開發一個簡單的Web應用
那麼現在可以看一下React的官方教程:React Official tutorial,這是一篇很好的文章,它覆蓋了React的基礎內容,並且非常清楚的講解了特定的一些主題
最後並同等重要的是,學習怎樣讓React應用連線API介面:
開始寫一些專案
- 簡單的To-Do應用
- 簡單的計算器應用
- 構建一個購物車
- 使用Github的API展示Github的使用者統計資料
React Router
React Router幫助你的單頁面應用建立路由,它非常強大並且容易使用。
馬上開始:
這些文章足夠你開始使用React路由
專案
- 一個簡單的CRUD應用
- 克隆Hacker News
如果你確實對學習Router非常感興趣,可以看看下面的教程:
Webpack
Webpack是一個著名的JavaScript的模組打包器,它幫助你的專案以靜態檔案維護依賴關係,讓開發者不必做這件事
和Webpack一起的還有載入器,載入器可以幫助專案執行特定的任務
想要更多的學習Webpack,跟隨下面的教程:
要使用Webpack建立本地React環境,你可以看一下下面的Github庫:
上面的教程足夠讓你開始使用Webpack,然後想要更加深入的瞭解,可以看下下面的指南:
伺服器渲染
伺服器渲染是React的最酷的特性之一,它可以被任何後端技術使用
React的伺服器渲染(SSR)幫助你在伺服器建立元件,並且在瀏覽器裡渲染成HTML,當所有的JavaScript模組在瀏覽器裡下載完成之後,React開始登場。簡單!
首先,看下React-DOM API:
想要更深入瞭解,可以學習以下教程:
Redux
Redux是為維護應用程式狀態而開發的JavaScript庫。在構建複雜的應用程式時,會將增加管理元件間狀態的開銷。 Redux可幫助您將所有狀態儲存在一個源中。當然,React與Redux配合得很好!
開始:
這些教程足以開始使用Redux。但是,我也無法抗拒提到下面的教程。它很值得:
資源
如果您喜歡這篇文章,請不要忘記分享它