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

1、React針對的是接受能力強的開發(fā)者和行業(yè)專家；

2、Facebook僅將它實際生產(chǎn)中應(yīng)用的框架開源了出來，因此它沒有關(guān)注比Facebook量級小的項目；

3、現(xiàn)在網(wǎng)上的React教程魚龍混雜、良莠不齊。

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

“憑什么聽你的？”

React教程那么多，為什么要聽聽我的建議呢？我曾是Facebook團隊的一員并參與創(chuàng)建和開源React，對React有著較深的理解。現(xiàn)在我已經(jīng)出來創(chuàng)業(yè)，因此我同時還有著不同于Facebook的一些觀點。

如果看待React的生態(tài)？

每個軟件都是基于一個技術(shù)棧來實現(xiàn)的，因此如果想要創(chuàng)建你自己的應(yīng)用，你就必須充分理解自己的技術(shù)棧。React的生態(tài)看上去很復(fù)雜的原因便是人們通常沒有按照正確的順序來去學(xué)習(xí)。

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

基本內(nèi)容：

1、React

2、npm

3、JavaScript 打包工具

4、ES6

5、路由

6、Flux

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

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

進階話題：

1、內(nèi)聯(lián)樣式

2、服務(wù)端渲染

3、Immutable.js

4、Relay, Falcor等

下面我會一一介紹每一個技術(shù)的學(xué)習(xí)要領(lǐng)，大家根據(jù)自己的需要來看就好。

基礎(chǔ)部分

學(xué)習(xí)React

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

學(xué)習(xí)npm

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

學(xué)習(xí)JavaScript打包工具

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

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

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

學(xué)習(xí)ES6

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

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

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

學(xué)習(xí)路由

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

學(xué)習(xí)Flux

你可能聽說過Flux，而且很多關(guān)于Flux的誤解你可能也聽說過。

很多人在創(chuàng)建應(yīng)用的使用需要定義一個數(shù)據(jù)模型，然后他們認為他們需要Flux來實現(xiàn)它。?這不是Flux的正確使用方法?。Flux應(yīng)該在很多組件加載之后加載。

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

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

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

以上便是React技術(shù)棧中的基礎(chǔ)部分，大部分開發(fā)者了解到這一步就可以了。如果你已經(jīng)熟悉了React的用法并有了一定的項目經(jīng)驗，你可以接著學(xué)習(xí)下面這些進階技術(shù)。

進階部分

學(xué)習(xí)內(nèi)聯(lián)樣式

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

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

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

學(xué)習(xí)服務(wù)端渲染

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

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

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

學(xué)習(xí)Immutable.js

Immutable.js?提供了很多可以解決React性能問題的數(shù)據(jù)結(jié)構(gòu)。如果你想改進你的應(yīng)用的性能，你不妨嘗試一下它。

學(xué)習(xí)Relay和Falcor

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

結(jié)語

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

根據(jù)你的需要來學(xué)習(xí)，從基礎(chǔ)開始

via?petehunt/react-howto(github)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。