摘要：謹記，請勿犯這樣的錯誤。由于在之前的教程中，積累了堅實的基礎。其實，這是有緣由的其復雜度在早期的學習過程中，將會帶來災難性的影響。該如何應對對于來說，雖然有大量的學習計劃需要采取，且有大量的東西需要學習。

前言
倘若你正在建造一間房子，那么為了能快點完成，你是否會跳過建造過程中的部分步驟？如在具體建設前先鋪設好部分石頭？或直接在一塊裸露的土地上先建立起墻面？

又假如你是在堆砌一個結婚蛋糕：能因為上半部分裝飾起來更有趣，而直接忽略了下半部分？

不行嗎？

當然不行。眾所周知，這些做法只會導致失敗。

因此，不要想著通過接觸 React 來將 ES6 Webpack Babel React Routing AJAX 這些知識一次性學會。因為想一下，就能明白這難道不正是導致學習失敗的原因嗎？

既然我把該文章稱作是一條學習路線，那么每一次都應該走好每一步。既不要嘗試去跨越，也不要貪步。

一步一腳印。若把其置身于每一天的那么一點時間，那么也許幾周就能把整個學習完成。

制定該路線的主要目的在于：使你在學習過程中避免頭腦不堪重負。因此，請腳踏實地地去學習 React 吧。

當然，你也可以為整個學習過程制定一個可打印的 PDF 文件，以便在學習過程中能夠查記。

零：JavaScript
在學習之前的你，理應對 JavaScript 有所了解，或至少是 ES5 標準下的 JavaScript。可若了解甚少，那么，你就應該停下手頭上的工作，學習好該基礎部分后，才可邁步前行。

可倘若早已熟知 ES6 所帶來的新特性，那么請繼續。因為如你所料，React 的 API 接口在 ES5 和 ES6 兩標準間存在著較大的差異性。所以對于你來說，熟悉兩種標準其特性的不同至關重要。盡管發生了異常，你也可以通過兩種標準之間的轉換，尋找出廣泛有效的答案。

一：NPM
NPM 在 JavaScript 世界中，可謂是軟件管理方的王者。然而，在這里你卻并不需要學習太多關于 NPM 自身的東西。只要在安裝好后 （連同 Node.js），學習如何使用其安裝軟件即可。（

npm install

）

：React
學習一個新的編程技術，我們往往會從熟悉的 Hello World 教程開始。首先，我們可以通過使用 React 官方教程所展示的原生 HTML 文件來實現，而該文件包含有一些

script

標簽。其次，我們還可以通過使用像 React Heatpack 這樣的工具來快速上手。

嘗試一下該三分鐘運行起 Hello World 的教程。

第二步：構建后摒棄
由于這一步是一個棘手的中間過程，所以往往會有大量的人忽略了該步。

謹記，請勿犯這樣的錯誤。因為，倘若對 React 的概念沒有一個穩固的掌握而擅自前行，那么，最后只會對自己的大腦搪塞過多的知識，以致遺忘。

當然，該步需要一定時間的斟酌：該構建什么呢？是工作中的一個原型項目？還是能貼合于整個框架的一些 Facebook 克隆項目呢？

其實，我們應該構建的都不是這些項目。因為，它們要不是包裹過甚，以致無甚可學；要不是過于龐大，以致成本過高。

尤其是工作中的“原型項目”，它們更為糟糕。因為在你心目中，早已明白這些項目并不會占有一席之地。況且，該類項目往往會長期駐留在原型階段，或變成線上的軟件。最終，你將無法摒棄或重寫。

此外，把原型項目當作學習的項目將會為帶來大量的煩惱。對于你來說，你可能會就未來的因素考慮一切可能發生的事情。而當你認為這不僅僅是一個原型的時候，你就會產生疑惑 —— 是否要測試一下呢？我應該要保證架構能延伸擴展……我需要延后重構的工作嗎？還是不進行測試呢？

為了解決該問題，我希望能用上我所寫的一篇指引《為 Augular 開發者所準備的 React》：一旦你完成了 “Hello World” 的基礎課程，你將如何去學習 ”think in React” 的課程。

在這里，我有一些個人的提議給到大家：那就是，理想的項目是介乎于 “Hello World” 和 ”All of Twitter“ 之間。

另外，請嘗試去構建一些官方文檔列表中所展示的項目（TODOs、beers、movies），然后，借此學會數據流（data flow）的工作原理。

當然，你也可以把一些已有的大型 UI 項目（Twitter、Reddit、Hacker News等）分割成一小塊來構建 —— 即把其瓜分成組件（components），并使用靜態的數據去進行構建。

總的來說，我們需要構建的，理應是一些小型且可被摒棄的應用程序項目。這些項目必須是可摒棄的。否則，你將深陷于一些不為重要的東西，如可維護性和代碼結構等。

值得提醒的是，如果你曾經訂閱于我，那么當《為 Angular 開發者準備的 React》發布的時候，你將會第一時間收到通知。

三：Webpack
構建工具是學習過程中的一個主要的難點。搭建 Webpack 的環境會讓你感覺是一件繁雜的工作，而且，完全不同于 UI 代碼的書寫。這就是為什么我要將 Webpack 放在了整個學習路線的第三步，而不是第零步。

在這里，我推薦一篇名為《Webpack —— 令人疑惑的地方》的文章，作為對 Webpack 的簡介。此外，該文章還講述了 Webpack 本身所具有的一些思考方式。

一旦你清楚 Webpack 所負責的工作（打包生成各種的文件，而不僅僅是 JS 文件） —— 以及其中的工作原理（適用于各種文件類型的加載器），那么，Webpack 對于你來說將會是一個更為欣喜的部分。

四：ES6
如今，進入了整個路線的第四步。上述的所有將會作為下面的鋪墊。之前，在學習 ES6 過程中，所學到的部分也將會讓你寫出更為利落簡潔的代碼 —— 以及性能更高的代碼。回想起一開始那時候，某些問題本不應卡住在那 —— 但現在的你，已然清楚知道為啥 ES6 能完美地融合在其中。

在 ES6 中，你應該學習一些常用的部分：箭頭函數（arrow functions）、let/const、類（classes）、析構（destructuring）和 import

五：Routing
有些人會把 React Router 和 Redux 這兩個概念混為一談 —— 但是，它們之間并沒有任何的關系或依賴。因此，你可以（也理應）在深入 Redux 之前學習如何去使用 React Router。

由于在之前“think in React”的教程中，積累了堅實的基礎。因此，相比于第一天學習 React Router，我們此時更能從基于組件（component-based）的構建方式中，領悟出更多的精髓。

六：Redux
Dan Abramov，作為 Redux 的創造人，他會告訴你們不要過早地接觸 Redux。其實，這是有緣由的 —— Redux 其復雜度在早期的學習過程中，將會帶來災難性的影響。

雖然，在 Redux 背后所隱藏著的原理相當簡單，但想要從理解躍至實踐，卻是一個很大的跨度。

因此，重復第二步所做的：構建一次性的應用程序。通過些許的 Redux 經驗，去逐漸理解其背后的工作原理。

非步驟
在前面列出的步驟中，你曾否看見過”選擇一個模板項目“的字眼嗎？并沒有。

若僅通過挑選大量模板項目中的其中一個，去深入學習 React。那么，后面將只會帶來大量的疑惑。雖然這些項目會含有一切可能的庫，且規定要求一定的目錄結構 —— 但對于小型的應用程序，或開始入門的我們來說，并不需要。

該如何應對
對于 React 來說，雖然有大量的學習計劃需要采取，且有大量的東西需要學習 。

但一切需要循規蹈矩，一步一腳印。

如何快速的學會使用VUE##
用vue的朋友大都用過jQuery，而且都感覺jQuery用得很順手，要控制哪個元素就控制哪個元素,但這里我不是要講為什么要用vue，而是講如何快速的學會使用VUE，從實現方法的角度來講。
一、輸入與輸出場景：一個文本框的內容顯示到div或label等元素內

jQuery的實現方式:

$("#divId").text($("#txtId").val())

  Vue的實現方式：

jQuery的實現方式：A、js生成字符串，然后寫入div中；B、引用模板方法，然后寫入模板展示區；
對table中的修改，讀出修改行的文本數據，修改后替換，流程復雜，代碼量不小，我就不上代碼了；
Vue的實現方式：##
在tr標簽中增加v-for="(item,index) in tabledata"方式實現，對tabledata的直接增刪改后無需對展示的table標簽做任何操作；
三、事件：button事件的綁定

這個和jquery相比，基本上差不多，jQuery可在頁面加載事件中綁定事先寫好的方法，也可直接用onEvent方式綁定事先寫好的方法，vue是用@事件="事先寫好的方法名稱"來綁定，所以這個沒什么好說的

總結：用vue開發時，要想著如何通過修改數據來改變顯示內容；用jQuery開發時，要想著如何通過選擇器來直接改變顯示內容；這是兩者最大的區別；

學習Node的總結的線路##
一.Node以JavaScrip為實現語言

Node起源于2009年，當時Ryan Dahl正在探索基于對功能web的服務器的探索，而Ryan將JavaScript最為首選，是因為他發現設計共性能的web服務器應該具備事件驅動，非阻塞I/O操作，而相較于其他語言，JavaScript可以滿足這種需求并且學習起來的門檻低
二.Node名字的真正含義

剛開始Ryan稱項目為web.js，但是項目的發展超過了他起初單純開發一個web服務器的想法，編程了一個構建網絡應用的一個基本框架，可以在此基礎上構建更多東西，所以將起名為Node，表示每一個node進程構成了網絡應用中一個節點。
三.Node為什么這么火？

由于gooleV8引擎的發布，commonJS規范的提出，不斷完善了JavaScript。而且在開源社區GitHub上，Node高居第二，而且nmp上面模塊的數量和下載量也非常的驚人，并且express,socket.io的優秀框架有機構的排名
四.Node給JavaScript注入了新的力量

JavaScript作為一門圖靈完備的語言，長久以來卻只能限制在瀏覽器沙箱中運行，不過在Node中，JavaScript卻可以隨意的訪問本地文件，搭建webSocket服務器，可以連接數據庫，可以像webWorkers一樣玩轉多進程
五. Node無與倫比的優勢

異步I/O操作，就如同發起了Ajax請求
事件與回調函數，事件具有輕量級，松耦合，關注事務特點
單線程，與其余線程不共享任何狀態
跨平臺，linux和window下都可以運行
六 .學習Node的總結的線路

nodejs基礎視頻，點擊收看
nodejs框架express，socket學習視頻
深入淺出Node.js
動手實踐node.js小案例