教你如何打好根基快速入手react，vue，node

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

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

不行嗎？

固然不行。衆所周知，這些作法只會致使失敗。

所以，不要想着經過接觸 React 來將 ES6 Webpack Babel React Routing AJAX 這些知識一次性學會。由於想一下，就能明白這難道不正是致使學習失敗的緣由嗎？

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

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

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

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

零：JavaScript
在學習以前的你，理應對 JavaScript 有所瞭解，或至少是 ES5 標準下的 JavaScript。可若瞭解甚少，那麼，你就應該停下手頭上的工做，學習好該基礎部分後，纔可邁步前行。

可假若早已熟知 ES6 所帶來的新特性，那麼請繼續。由於如你所料，React 的 API 接口在 ES5 和 ES6 兩標準間存在着較大的差別性。因此對於你來講，熟悉兩種標準其特性的不一樣相當重要。儘管發生了異常，你也能夠經過兩種標準之間的轉換，尋找出普遍有效的答案。

一：NPM
NPM 在 JavaScript 世界中，可謂是軟件管理方的王者。然而，在這裏你卻並不須要學習太多關於 NPM 自身的東西。只要在安裝好後 <wbr>（連同 Node.js），學習如何使用其安裝軟件便可。（

npm install <package name>

）

：React
學習一個新的編程技術，咱們每每會從熟悉的 <wbr>Hello World <wbr>教程開始。首先，咱們能夠經過使用 React 官方教程所展現的原生 HTML 文件來實現，而該文件包含有一些 <wbr>

script

<wbr>標籤。其次，咱們還能夠經過使用像 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）和 <wbr>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，從實現方法的角度來說。
1、輸入與輸出場景：一個文本框的內容顯示到div或label等元素內

jQuery的實現方式:

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

Vue的實現方式：

<input type='text' v-model="inputvalue">
<div>{{inputvalue}}</div>
vue不用作額外的工做，只要在標籤內綁定好vue數據就能夠
2、表格修改場景：一個數組循環生成一個Table，而後對每行編輯

jQuery的實現方式：A、js生成字符串，而後寫入div中；B、引用模板方法，而後寫入模板展現區；
對table中的修改，讀出修改行的文本數據，修改後替換，流程複雜，代碼量不小，我就不上代碼了；
Vue的實現方式：##
在tr標籤中增長v-for="(item,index) in tabledata"方式實現，對tabledata的直接增刪改後無需對展現的table標籤作任何操做；
3、事件：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小案例