小菜鳥如何系統性學習React？

01-21

去年七月份步入前端大門，跟隨大神的腳步，從小菜鳥到了大菜鳥。最近在玩angularjs也有半年了，但是我更想去學習React充實自己，我也跟著react官網學習了一點簡單知識，但覺得遠遠不夠，問該如何去學習react呢？當時學angular時候用了2個月把網上能看到的資料全部吃了遍。對於現在的react有點棘手。

「真實用在生產環境中可以大大提升理性認知。」 --- 瞎縮的

首先，明確你系統的學是想學到什麼程度。是學思想還是學API。（ React生態充斥著各種輪子，學這些輪子如果是學API很不值得，逃

不過學思想首先也要用到一定程度，下面給一點建議。

1. 對於React本身的學習可以分兩步走

應用 -》redux/examples/real-world at master · reactjs/redux · GitHub

核心-》學習virtualDOM 演算法 GitHub - Matt-Esch/virtual-dom: A Virtual DOM and diffing algorithm . React (Virtual) DOM Terminology

ps: 應用做到real-world已經足夠面對大部分場景，可以開始深挖了。

2. 對於React做業務的話可以參考國內做的比較好的螞蟻金服
利用React組件能做到什麼樣的程度 -》 ant.design 的頁面

以及他們背後的思考-》 React + Redux 最佳實踐 · Issue #1 · sorrycc/blog · GitHub

3. 深挖核心
ImmutableJS 不可變性帶來的收益 -》 Immutable.js

使用React後單元測試的思路借鑒 -》Getting Started with TDD in React

同構應用的可能 -》【視頻 pete-hunt 關於flux和同構的看法】https://www.youtube.com/watch?v=ZLfe0i2RDtY

GraphicQL和Relay 帶來了什麼 -》【視頻 react-Europe 2016 Relay】https://relaytechtalk.splashthat.com/

痛徹心扉地使用一門技術解決了你工程過程中碰到的真真切切痛點問題是掌握任何一門技術的最佳（並不一定是最快）路徑。

答主本人可以簡略地描述一下自己的在side project中逐步使用React和一些相關庫的經歷。

我和side project一起的兩個小夥伴都是後端出生，最新的前端經驗從一開始幾乎為0。所以產品的第一個版本基本上是純jquery拼起來的。後果是到了一個階段之後，基本上就碰到了可以預見的維護和繼續開發複雜功能的瓶頸：1) 一個js文件有千把行是很正常的, 2) 各種ajax的callback毫無規則的在源文件裡面到處亂飛 3) html代碼和dom操作也是隨性所欲，等等等等。基本上能想到的前端的最差實踐我們都做到了。

第一個試圖解決的問題是component模板（模塊化）的問題。恰逢當時（2015年）React風頭正勁，以及我們對其他前端框架並沒有多少先驗的偏好，就選了React。算是真正開始使用React。

第二個需要解決的問題是前端各種同步/非同步事件的處理和模塊的定義非常混亂（callback滿天飛），以至於在分析整個邏輯的模塊的時候，我根本畫不出來一個清晰的結構圖。我當時的第一反應肯定是崩潰的，但是第二反應是這個問題肯定有解。從React的官方Blog很容易找到Flux這樣的解決方案。尤其是14年F8上Flux的debut talk (Bill Fisher and Jing Chen) (https://www.youtube.com/watch?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0vv=nYkdrAPrdcw)，一針見血地指出「雙向數據流」的弊病，以及提出Flux的「單向數據流」的programming pattern，基本上是點通了我們問題的根本。所以毫不猶豫地就開始大刀闊斧地採用Flux這套模式。

經歷了React + Flux給我們前端構架帶來的極大便利之後，很快又有新的問題出現了：Flux的Store裡面的各種事件之間的依賴以及各種React component對事件的監聽的管理開始變得複雜並難於管理。經常一個Component裡面有很大一堆的addListener和removeListener的代碼。好在這次我們依然不是第一個碰到並意識到這個問題所在的人。Dan Abramov的Redux (Three Principles) 再一次很明確地點出了Flux的問題以及Redux的解決方案(Single source of truth)。所以使用React + Redux來替代React+Flux就變成了顯而易見的選擇。

接下來的新問題變成了我們發現只使用Redux本身很難處理非同步的事件（尤其是Network call）。主要是Flux/Redux對於Action的一開始的定義就是一個Object，很難找到一個地方可以放置處理非同步事件的代碼（Store裡面並不允許Dispatch新的Action）。這一次我們找到的答案是Dan Abramov的Redux-thunk (gaearon/redux-thunk)，很好地把非同步的事件處理封裝成一個function Action，基本上初步解決了這個問題。之後用著用著又發現Redux-thunk的局限性（複雜的非同步事件邏輯寫在一個function裡面也是一件很彆扭的事情，接下來的直覺就是一定有更好的解決方案），從而又發現了Redux-saga(yelouafi/redux-saga)的妙用。

如此，這樣一個（發現痛點-&>分析痛點-&>尋找方案-&>解決痛點）的過程貫穿了我們整個前端進化的歷程。類似的歷程數不勝數（例如，為了debug redux的state, 使用https://github.com/gaearon/redux-devtools；為了管理路徑使用reactjs/react-router-redux）。每一個改進的階段，從想清楚問題的本質，尋找並嘗試相應的解決方案（庫），以及把解決方案應用到最終的產品中的每一次迭代所花費的時間其實很快，但前提在於想清楚問題的本質，對症下藥。那基本上在反覆迭代進化的過程中，React相關的各種庫（全家桶）也瞭然於胸。

到目前為止，我並不敢自稱是React的專家，畢竟也真是沒有認真地去研究一下相關的庫的源碼的具實現，也更是對其他前端庫（Angular, Vue）缺乏最基本的了解，所以也並沒有好惡偏好。但是我相信（猜），前端構架的大多數核心問題在這些框架的設計當中都會有不同程度的體現。

不少人抱怨說React相關的庫太分散，沒有一個系統的學習教程。這過程中我也的確感受到過，但是因為沒有其他前端框架（Angular, Vue）的使用經驗，也無從知曉個中差異。但是知其然，知其所以然，才是真正學習React相關各種層出不窮的庫的正道。當然，任何技術又何嘗不是如此呢？

https://github.com/simongfxu/simongfxu.github.com/issues/21 我搜集的入門集錦希望對樓主有用，基本上最多兩周你就可以完全用react來開發一個完整的應用了。

我開了個Live，希望能夠幫助你理解React https://www.zhihu.com/lives/883022235516960768

謝邀。

如果你是先學了 Angular 1 ，再學 React 的話，可能會相當不習慣（親身感受），相比 Angular 這種 MVVM 框架，React 使用 Virtual DOM、組件化、單向數據流，而且 All in JS，轉換的話需要時間適應。其實在沒有團隊統一技術棧的要求下，可以考慮去學習 Vue。如果確實對 React 很感興趣，下面給出一個我自己學習 React 的過程（前期不用想著把所有技能點都掌握，重要的是邊做邊學）：

使用 Webpack 和 ES6 進行 React 開發 · Issue #17 · huangtengfei/blog · GitHub

GitHub - huangtengfei/react-demo

GitHub - huangtengfei/redux-demo

GitHub - huangtengfei/redux-async-demo

每一個demo 都有對應的知識點總結，供參考~

重點放在學習es6上，理解函數式，理解props 和state ，就入門了

知乎給人一種錯覺，好像每個前端都會 React、Angualr 一樣，好像它們得必學的似的。

其實完全不是，實際上很多人根本沒接觸過這些技術。如果基礎夠好，有其他類似框架的經驗還真是半天時間就能上手擼代碼了。

講道理 React 的文檔真的很簡潔 -&> Hello World - React，而且React 本身其實內容就不多。也沒有比看官方文檔更「系統」的方式了。看完了你還不能上手只能證明你基礎差，應該補基礎。而不是著眼於這些虛幻的新技術。

瀉藥

我覺得題主的問題應該不是react技術問題，而是component思想一時轉不過來。

雖然angular裡面component也有，但畢竟最開始沒有主推，所以很多angular的使用者是將angular作為一個viewmodel來用的。

要理解component，個人覺得應該先用你熟悉的方式（jQuery，原生js等等）試著封裝一些組件，稍微理一下什麼是組件以及組件應該以什麼樣的形式存在才是合理的。

之後去看下TODOMVC網站上看一下angular的TODOlist，再去看下react的，對比下有何不同。

react本身真真是足夠簡單了。所以我覺得題主可能想問的是組件化的問題，冒昧揣測。

Angular都能搞定，還搞不定React

先看官網的最弱智的例子 Tutorial | React

再看官網的flux的例子Flux | Application Architecture for Building User Interfaces

再看react router的例子rackt/react-router · GitHub

再看redux的例子https://github.com/rackt/redux

可以去寫項目了

Trello

我建議你看看這個

跟隨 Pete Hunt 的腳步吧

GitHub - petehunt/react-howto: Your guide to the (sometimes overwhelming!) React ecosystem.

上個項目吧

使用react開發的在線聊天室

在線地址:http://aether.liangsen.tk

Github: https://sam019.github.com/Aether

紙上得來終覺淺，絕知此事要躬行。要躬行就得上全家桶，而全家桶他爹是 Redux。由此一來，您就需要 Redux 莞式教程：GitHub - kenberkeley/redux-simple-tutorial: Redux 莞式教程。本教程深入淺出，配套入門、進階源碼解讀以及文檔注釋豐滿的 Demo 等一條龍服務

我就斷斷續續看了大半天，就開始碼代碼了。不知道題主的angular怎麼學的，明顯react簡單得多啊！

阮一峰老師的博客有一個React入門教程，感覺比較適合新手吧

謝邀但我全力反對react啊

也是剛進公司才接觸的react項目，寫了一篇博客。希望對你有幫助。

一個星期初步了解學習react的心得 - CSDN博客

說下自己的學習經歷吧：從純小白開始。

第一，官方文檔敲一遍，應該很快的。你腦子裡肯定會有一群疑問，先別管，敲一遍文檔感覺下，一兩天差不多了。理解jsx語法，react基本Api的使用。

第二，最好有項目經歷，如果沒有項目經歷，直接拿過來別人的項目，細緻看一下如果自己實現該怎麼做。

第三，看源碼，包括react-redux，react-router，react-thunk等源碼，我github上有一個博客庫，都是自己看源碼的一些拙見，感興趣可以看下。https://github.com/jimwmg/

第四，如果真想學好，一定要把源碼吃透.

前端哪有什麼系統學習之說。

有用react+react router+node（express）+mongodb+webpack 棧搭了一個個人博客，算是用了最基本的react技術棧。可以試著看一下代碼，重構。https://github.com/gaoxianglyx/blog

會說"Hello World"了，並不等於會說英語，中間還差著十萬八千里。React之後的Redux還是很難學，新手別貿然決定用React開發新項目！

我不是故意抬杠啊...

但是我比較好奇你Angular學通了為啥看react覺得棘手？

React對我來說更像是寫原生.......