如果你之前從未接觸過React，你可能會對它的生態感到一頭霧水。這可以理解，因為：

1、React針對的是接受能力強的開發者和行業專家；

2、Facebook僅將它實際生產中應用的框架開源了出來，因此它沒有關注比Facebook量級小的項目；

3、現在網上的React教程魚龍混雜、良莠不齊。

別太擔心，如果你想開始學習React又不知道該從何學起的話，你不妨看看本文。當然，要學習React，你必須具備基本的HTML、CSS和JavaScript的知識，如果你之前從未接觸過前端開發，那么我建議你先學習基礎知識。

“憑什么聽你的？”

React教程那么多，為什么要聽聽我的建議呢？我曾是Facebook團隊的一員并參與創建和開源React，對React有著較深的理解?，F在我已經出來創業，因此我同時還有著不同于Facebook的一些觀點。

如果看待React的生態？

每個軟件都是基于一個技術棧來實現的，因此如果想要創建你自己的應用，你就必須充分理解自己的技術棧。React的生態看上去很復雜的原因便是人們通常沒有按照正確的順序來去學習。

你需要按照下面的順序一步一步地學習，不要跳著學或者同時學習多個內容，否則你會感到非常混亂。

基本內容：

1、React

2、npm

3、JavaScript 打包工具

4、ES6

5、路由

6、Flux

當然，并不是要把這些內容全部學完你才能開始使用React，你完全可以先學一步并著手做一點東西，當你發現這一步的知識不足以解決你現在遇到的問題時你再開始下一步的學習。

下面我還額外列出了一些在社區里非常熱門的話題技術。它們非常有意思，但是理解起來比較困難。你不一定要將它們應用到你的項目里，但是如果你熟悉了上面列出的這些基本技術并且有了一定的項目經驗之后，你不妨了解一下下面這些內容。

進階話題：

1、內聯樣式

2、服務端渲染

3、Immutable.js

4、Relay, Falcor等

下面我會一一介紹每一個技術的學習要領，大家根據自己的需要來看就好。

基礎部分

學習React

開始學習React并不需要大量的準備工作。在官網的文檔里你可以發現一個可以直接復制的HTML模板，將它粘貼到你的本地html文件中就可以開始學習啦。在這一步你不要去管什么工具，你只需要理解React的基礎知識就好，當你熟悉了基礎知識之后再去學習各種工具的用法。

學習npm

npm是Node.js的包管理工具，也是目前前端開發者和設計師們共享代碼的最熱門的工具。它集成了一個模塊系統CommonJS，可以讓開發者安裝一些命令行工具。建議大家看看?這篇?文章來了解一下為什么CommonJS對于瀏覽器來說是必要的，如果想進一步了解CommonJS的API的話可以看看?這篇?。?

學習JavaScript打包工具

出于一些技術的原因，瀏覽器并不原生支持CommonJS模塊。你需要一個JavaScript打包工具來將這些模塊打包成一個.js文件，在網頁中引入這個打包后的文件就可以在瀏覽器中運行了。

典型的打包工具有Webpack和browerify。二者都是個不錯的選擇，但是我更推薦Webpack，因為它具備很多簡化大型項目開發的特性。由于Webpack的文檔比較晦澀難懂，我針對React設計了一個?Webpack模板?，如果你想進一步了解Webpack的進階用法的話，你可以看看?這篇?文章。

有一個誤區需要避免：CommonJS利用require()方法來加載模塊，因此很多人會下意識地認為他們需要一個require.js來完成這項工作。事實上由于一些技術上的問題我并不推薦你使用require.js，更何況不引入這個庫你也可以使用require()方法。

學習ES6

除了JSX（你在React基礎部分會學到）以外，你會在React的示例中看到一些陌生的符號。它們便是ES6（ECMAScript第6版，JavaScript最新的語法標準）的新語法，在你學習基礎JavaScript的時候不曾遇到過。由于它太新了（2015年頒布），因此還沒有得到很好地瀏覽器支持，但是你的打包工具可以在打包的同時將ES6轉成ES5的語法以獲得更好的瀏覽器支持。

當然，使用React不代表一定要使用ES6，你大可以跳過ES6，將重點放在React本身。但是ES6的一些概念解決了很多以往JavaScript的語法問題，建議不打算學習ES6的朋友有精力的時候也了解一下。

強調一點：有些人會推薦你用ES6中新的類來定義React組件，而我建議你不要這么做。事實上多數人（包括Facebook的開發者）在創建React組件時使用的是React.createClass()方法。

學習路由

單頁應用是當今的主流。單頁的應用只加載一次網頁，當用戶點擊鏈接或按鈕的時候，JavaScript代碼會更新頁面的內容和地址欄內容，但是網頁并沒有刷新。地址欄的管理器就被稱為路由。React的生態中最受歡迎的且最好用的路由是react-router，創建單頁應用的朋友一定要嘗試一下。

學習Flux

你可能聽說過Flux，而且很多關于Flux的誤解你可能也聽說過。

很多人在創建應用的使用需要定義一個數據模型，然后他們認為他們需要Flux來實現它。?這不是Flux的正確使用方法?。Flux應該在很多組件加載之后加載。

React組件通常會構成一個層級結構。多數情況下，你項目的數據模型也需要構成一個層級結構。這時Flux并不適合你的項目。然而有時候你的數據模型并沒有構成層級關系。當你的React組件開始接收無關聯的props值，或者你的一些組件開始變得非常復雜的時候，你可能才需要使用Flux。

你會清楚你什么時候需要Flux的。如果你不確定你是否需要使用它，那就不要用。

如果你確定需要使用Flux的話，那么我建議你使用目前最受歡迎且文檔齊全的Flux庫——Redux。當然Flux的框架不止這一個，但是我建議大家去用最熱門的那一個。

以上便是React技術棧中的基礎部分，大部分開發者了解到這一步就可以了。如果你已經熟悉了React的用法并有了一定的項目經驗，你可以接著學習下面這些進階技術。

進階部分

學習內聯樣式

在React誕生之前，很多開發者通過SASS這樣的預編譯器來重用非常復雜的樣式表。因為React簡化了重用組件的方法，因此你的樣式表也可以被簡化了。社區里的很多人（包括我）甚至都開始嘗試不寫樣式表。這是一個非常瘋狂的想法，它使得媒體查詢變得復雜，而且還會對性能產生潛在的影響。因此，建議各位剛接觸React的時候，?用你最常用的方法來編寫樣式?。

如果你已經習慣了React的用法，你可以嘗試使用其他技術來寫樣式。最熱門的技術便是?BEM。 逐步放棄使用那些CSS預編譯器吧，React給你提供了一個更加強大的方法來重用樣式，你的JavaScript打包工具會生成更加高效的樣式表。

你也可以嘗試一下CSS模塊，如?react-css-modules?。你仍可以編寫純CSS或SASS/LESS/Stylus，但是你可以像React的內聯樣式那樣管理、組織你的CSS文件。你不需要像BEM那樣再為管理類的名稱而費心，因為模塊系統都幫你完成了。

學習服務端渲染

服務器渲染通常又稱為“全局”或“同構”JS，是指將React組件在服務端渲染成靜態HTML文件。這會加快首次加載的速度，因為用戶不需要等待瀏覽器下載JS即可看到初始的UI，而且React可以重用服務端渲染的HTML，因此不需要在客戶端創建。

如果你發現你的首次渲染速度太慢或者你想提升你的搜索引擎排名的話，你可以嘗試一下服務端渲染。盡管谷歌以客戶端渲染的內容為索引，但是在2016年1月份開發者通過實際測試發現：由于客戶端渲染有潛在的性能問題，它對排名是有負面影響的。

要想正確使用服務端渲染還需要很多工具。即便你在編寫時沒有考慮到服務端渲染的問題，它也可以很好地支持React組件。因此你應該先創建好你的應用，之后再考慮服務端渲染的問題。你不需要為了支持服務端渲染而去把你的所有組件重寫一遍。

學習Immutable.js

Immutable.js?提供了很多可以解決React性能問題的數據結構。如果你想改進你的應用的性能，你不妨嘗試一下它。

學習Relay和Falcor

這些技術可以幫助你減少AJAX請求的次數。它們是非常前沿的技術，如果你的AJAX請求并不是很多，那么你就不需要使用它們。

結語

說了這么多，你可能還是會覺得要學的東西好多。為什么說你的技術儲備是一個技術棧？因為你會根據需要不斷地去push進去新的東西。這個push的過程不是無腦的。優先將基礎的東西push進去并不斷消化。當你的技術棧的基礎穩固了，出現了更多的需要時，再去push新的東西。如果一股腦的沒有順序的push進太多東西，你的技術棧會瞬間崩塌，你也會變得不知所措。因此，記住一點：

根據你的需要來學習，從基礎開始

via?petehunt/react-howto(github)

總結

以上是生活随笔為你收集整理的React的学习路径——从菜鸟到大牛的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。