6周學習計劃，攻克JavaScript難關(React/Redux/ES6 etc.)

做者：餘博倫
連接：https://zhuanlan.zhihu.com/p/23412169
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

原文連接：A Study Plan To Cure JavaScript Fatigue

做者：Sacha Greif

和你們同樣，最近我也看了Jose Aguinaga寫的How it feels to learn JavaScript in 2016.

顯然這篇文章擊中了人們的痛處。它在Hacker News上排了不止一次第一。一樣也是/r/javascript上最火的一篇，在Medium上也有超過10k的推薦。

這並不能算是譁衆取寵：我很早之前就瞭解到，JS的生態圈確實很使人困惑。事實上，我開展State Of JavaScript調查正是爲了瞭解真正受歡迎的JS庫，去其糟粕，取其精華。

今天，我不僅是簡單地陳述JS的發展示狀，我將會向你展示一個十分具體，一步一步掌握JS知識體系的學習計劃。

目標人羣

這份學習計劃寫給：

• 你熟悉例如變量方法一類的基本的編程概念；
• 你以前有了解過PHP/Python一類的後端語言，也使用過jQuery一類的庫；
• 你想要更深刻的瞭解前端開發，卻迷失在無數的框架和類庫當中不知道何去何從。

涵蓋內容

• 當前JS應用的構成
• 爲何僅使用jQuery是不夠的
• 爲何React是最合適的選擇
• 爲何你不必一開始就「全面掌握JavaScript」
• 如何學習ES6語法
• 爲何以及如何學習Redux
• GraphQL是個什麼玩意兒
• 在這以後該學些什麼

學習資料說明

免責聲明：文章會提到一些來自Wes Bos的教程連接，僅做推薦，並非推廣廣告。

若是你想要找到別的相關資料，Mark Erikson在Github上有一個收集列表React, ES6, and Redux

此JavaScript非彼JavaScript

首先明確一下這份學習計劃主要目的。隨便你一搜「學習JavaScript」或者「JavaScript學習計劃」，就可以找到無數有關學習JavaScript語言的教程資源。

但這其實屬於比較簡單的部分。對一門語言的學習理解能夠挖的很深，但是事實上大部分Web應用的代碼是很簡單的。換句話講，編寫Web應用所需的80%的知識在你看的JavaScript教程書籍的前幾章就都涵蓋了。

真正的困難在於掌握包含了數不勝數的框架和庫的JavaScript的生態體系。這篇學習計劃主要關注的就是這部份內容。

JavaScript應用的框架結構

爲了理解當前JavaScript應用的複雜性，咱們首先須要瞭解他們是如何運做的。

首先咱們看一下2008年標準的Web應用的構成：

1. 數據庫爲後端提供數據（後端能夠是PHP或Rails等）；
2. 後端解析數據並輸出HTML；
3. HTML被髮送到瀏覽器，以網頁的形式展現。

如今這類應用也有一些客戶端的JS代碼，用來增長交互（例如標籤、模態窗口等），但本質上，瀏覽器還是從服務器獲取HTML的內容。

如今拿當前2016年的Web應用（也稱做：單頁面應用）與之比較：

發現其中的區別了麼？並非從服務器發送HTML內容，而是隻返回數據，數據到HTML的渲染步驟都發生在客戶端（一樣也返回客戶端如何根據會話進行反饋的代碼）。

這麼作有好有壞，首先好處是：

• 對於相同的某塊內容，只發送數據要比發送HTML頁面快。
• 客戶端不須要刷新頁面就能夠進行交互改變內容（這也是爲何稱其爲單頁面應用的緣由）

缺陷是：

• 初次加載須要更久，由於 「數據轉換成HTML」的代碼量會很大。
• 爲了方便緩存和查詢，你在客戶端也須要有一塊地方管理和存儲數據。

比較髒的是：

• 恭喜你，如今客戶端的技術棧和服務器端同樣複雜啦。

客戶端與服務器的範疇

既然有這麼多缺陷咱們爲何還要遭這份兒罪呢？就像之前那樣使用PHP後端很差麼？

那麼，試想一下你開發一個計算器應用。若是用戶想知道2+2的結果，在服務器端計算再返回是很是傻的，由於瀏覽器徹底有能力實現這種需求。

但另一方面，若是你只是搭建博客一類的靜態站點的話，在服務器端直接生成HTML內容就挺合適的。

而事實上，大部分的Web應用都介於這二者之間，問題就是咱們到底採用何種架構。

關鍵是兩種架構是沒法過渡的：你不能開始寫一個純服務器端應用而後慢慢遷移到純客戶端。有些狀況下，你將不得不停下來把全部的部分都重構，或者遺留下一堆沒法維護的雜亂代碼。

這也解釋了你爲何不能在全部項目中「只用jQuery」。你能夠把jQuery想象成萬金油。房間裏須要修修補補的時候它有奇效，而你若是濫用的話只會讓一切看起來很糟糕。另一方面，當前的JavaScript框架就好像3D打印技術革新同樣：耗時更久，但結果更簡潔可靠。

換句話講，掌握當前流行的JavaScript技術棧就是賭絕大多數的Web應用可能最終都將把服務器端客戶端劃分開來。你確實須要付出更多的學習成本。不過少壯不努力，老大隻得徒傷悲。

第一週：JavaScript基礎

除非你以前是個純後端開發者，你多少都應該知道點JavaScript.即便你不懂，JavaScript的語法看起來也很像C，對於PHP或Java開發者來講應該不會太陌生。

要是你以前一點都不瞭解JavaScript也不要緊。網上能夠找到不少相關的免費教程讓你快速入門。例如Codecademy’s JavaScript lessons就很不錯。

• JavaScript 教程
• JavaScript全棧教程
• JavaScript MDN
• JavaScript 標準參考教程

第二週：開始學習React

掌握了JavaScript的基本語法以後，你多少明白些爲何JavaScript應用會如此複雜了，咱們直接說點具體的，從哪裏上手呢？

我想答案就該是React.

React是Facebook開源的UI工具庫。換句話講，它主要用來處理數據到頁面的渲染步驟（視圖層）。

不要誤會我：我推薦你選用React不是由於它是全世界最好的框架（這太過主觀了），而是由於它確實很是受歡迎。

• React也許不是全世界最受歡迎的框架，但真的有不少人都喜歡它。
• React也許不是最輕量的框架，但也並不臃腫。
• React也許並非最易上手的框架，但也挺友好的。
• React也許並非最優雅的框架，但也夠優雅了。

換句話講，React也許不是全部狀況下的最優選擇，但它是最靠譜的。而其相信我，在你剛剛開始的時候，仍是不要太特立獨行的好。

學習React一樣有助於你瞭解一些實用的概念。例如組件、應用狀態、無狀態方法等。這對你學習任何別的框架和庫都是頗有價值的。

最後，React有着當前最大的生態體系，許多包和庫都能和它很是好地協同，同時它龐大的社區也可讓你比較輕鬆地在網上獲取到幫助。

我我的推薦React for Beginners這個教程。我本身當時就學了這個教程，並且它最近剛剛更新了React的最佳實踐。

• React 入門實例教程
• React 教程
• 一看就懂的ReactJs入門教程-精華版
• 十分詳細的React入門實例
• React 入門與最佳實踐

你須要先「全面掌握JavaScript」麼？

假如你是個循序漸進的同窗，你可能但願先踏踏實實地牢固打好JavaScript的基礎。

但對於大多數人來說，這就好像爲了學游泳去學人體解剖和流體力學同樣。確實，這兩門專業知識對游泳來講都相當重要，不過仍是直接跳到池子裏開始遊爽啊！

這個問題沒有對錯，全在於你的學習方法。事實上，大部分的React基礎教程都只須要不多一部分JavaScript知識，你只須要先掌握這部份內容就足夠了。

這個道理一樣適用於廣義上的JavaScript知識體系。你並不須要擔憂不理解Webpack或Babel的輸入輸出。事實上，React推出的命令行工具可讓你徹底沒必要擔憂配置就初始化好應用。

第三週：你的第一個React應用

在你學完了React的教程以後，你可能面臨和我當時相同的情況：

• 你把你剛學的內容可能已經忘了一半了。
• 你等不及要帶着剩下的一半知識上手實踐一下。

我堅信學習一個框架或一門語言的最好方法就是上手實踐。而寫一些我的項目則是實驗新技術的最好選擇。

一個我的開發項目能夠簡單到只是一個頁面，也能夠複雜到一個完整的Web應用。我感受用新技術從新設計你的我的網站難度剛恰好，另外，你估計也好久沒有更新過你我的站的架構了。

我以前提到過，用單頁應用展現靜態內容確實有些大材小用了，不過React有一款很棒的工具Gatsby，一個React架構的靜態站點生成器，可讓你體驗React的全部優勢。

使用Gatsby入門React的好處有如下幾條：

• 一個預先配置好的Webpack，這意味着你要省下不少麻煩（Webpack配置簡直太反人類）。
• 根據你的目錄結構自動生成路由。
• 全部的HTML都會在服務器端渲染，彌補了客戶端渲染的不足。
• 靜態站點也能夠沒必要擔憂服務器端，而且能夠輕鬆託管在Github Pages上。

State Of JavaScript就是我用Gatsby開發的，不須要操心路由、構建工具配置、服務器端渲染等煩人的問題，爲我節約了大量的時間。

第四周：熟悉ES6

在我學習React的過程當中，我很快就發現我能夠很輕鬆地複製粘貼代碼示例，但剩下的不少仍然不懂。

尤爲是不熟悉ES6的語法：

• 箭頭函數Arrow functions
• 對象解構Object destructuring
• 類Classes
• 展開操做符The spread operator

若是你也有相同的感覺，那就是時候花些時間好好學學ES6了。ES6 for Everybody就是一個很不錯的教程。

你想要免費的教程也有，Nicolas Bevacqua的Practical ES6就不錯。

• ECMAScript 6入門

掌握學習ES6的一個比較好的實踐方法是重構你在第三週寫的代碼，儘可能都轉換爲更簡潔的ES6寫法。

第五週：掌握狀態管理

到如今這個階段你應該已經能寫一些靜態內容的React前端了。

但真正的Web應用確定不是靜態的：他們須要從數據庫一類的後端獲取數據。

如今你能夠用React給每一個獨立的組件傳入數據，可應用一旦複雜了使用這種方式就會很凌亂。例如當兩個組件須要展現同一組數據，或者須要相互通訊的時候。

這就是引入狀態管理概念的時候了。與在你的各個組件中一小塊一小塊存儲狀態(state)不一樣的是，你能夠將全部的數據存儲在一個全局store中，而後再分發給每一個React組件：

在React陣營裏，Redux是最受歡迎的狀態管理庫。Redux不只能幫助你集中管理數據，一樣能夠將對數據的操做限制在必定規範內。

你能夠將Redux想象成一個銀行：你不能直接修改你帳戶的存款數字（來來來，讓我在後面多加幾顆零吧！）。而是須要填寫存款表單，讓銀行出納認證後來完成這個操做。

類似的，Redux也不容許你直接修改全局state的數據。而是經過向reducers傳遞actions來進行，reducer其實就是一個接收舊狀態和操做返回新狀態的方法。

這些看似多餘的工做可讓你很好地維護管理你應用中的數據流。Redux Devtools這樣的工具能夠很好地顯示數據流的變化。

一樣你也能夠在Wes的網站上學習Redux 教程，這個是免費的。

或者你喜歡視頻教程，也能夠參考Dan Abramov在egghead.io上的視頻教程

• Redux 入門教程
• Redux 入門與最佳實踐

最後一週：使用GraphQL構造APIs

到目前爲止，咱們談論的大部份內容都在客戶端，這只是整個應用的一半而已。即使你如今不須要徹底瞭解Node的生態體系，你也須要了解對任何Web應用都相當重要的一點：數據是如何從服務器獲取並傳到客戶端的。

一樣也是由Fackbook開源的項目GraphQL，它能夠做爲傳統REST APIs的替代解決方案。

不一樣於REST API根據你預先定義的數據集（例如 /api/posts, /api/comments, etc.）分發出不一樣的REST路徑。GraphQL可讓你只經過一個數據端像操做數據庫同樣按需查詢數據。

想象成一我的分別屢次去生食店、麪包店、果樹店與他帶着一個購物清單去的區別。

這種新的策略在你須要請求多組數據源的時候很是有意義。就像咱們上面舉的購物清單例子，你只須要一次請求就能夠獲取全部的數據。

GraphQL在過去的一年裏火了起來，不少例如Gatsby的項目都開始打算使用它。

GraphQL自己只是一項協議，它最好的實現是能和Redux很是好地協同的Apollo這個庫。如今網上的相關教程確實比較少，不過Apollo 官方文檔已經能讓你很好地瞭解它了。

除了React以外呢

我推薦你從學習React生態體系開始由於選它確實很靠譜。但並不意味着只有這一種可靠的前段技術棧。我這裏還有兩個別的推薦：

Vue

Vue是新近火起來的一個框架，不少百度阿里一類的大公司也都開始使用了。它也一樣是PHP框架Laravel的官方前端實現。

相比React，它的主要賣點是：

• 官方提供維護的路由和狀態管理類庫
• 專一於性能表現
• 更低的學習成本，能夠直接使用HTML模板而不是JSX
• 更少的模板代碼

React更強大的地方在於它龐大的生態體系，例如React Native一類的實現。不過Vue也在愈來愈壯大。

• 新手向：Vue 2.0 的建議學習順序

Elm

若是說Vue還和React比較相似的話，Elm是更加前衛的一種實現。Elm不只是一個框架，更是一種創建在JavaScript之上的語言，相似CoffeeScript/TypeScript等。

它有不少優勢，例如性能提高，語義化的版本，沒有運行異常等。

在State Of JavaScript調查中，有84%使用過它的開發者都很滿意。

接下來學什麼？

相信在學完上述的內容以後你已經熟練掌握了React的前端技術棧了。但願你在實際開發中也能很好地應用它。

但這並不能證實你已經精通了JavaScript！這僅僅是掌握整個JavaScript技術體系的開始而已。這裏還有一些你可能感興趣的內容（內容原本也是英文因此就不翻譯啦）：

• JavaScript on the server (Node, Express…)
• JavaScript testing (Jest, Enzyme…)
• Build tools (Webpack…)
• Type systems (TypeScript, Flow…)
• Dealing with CSS in your JavaScript apps (CSS Modules, Styled Components…)
• JavaScript for mobile apps (React Native…)
• JavaScript for desktop apps (Electron…)

一篇文章遠遠不足以介紹全部這些內容。萬事開頭難，不過你要對本身有信心。等到你瞭解了JS的各部分實現是如何協同以後，接下來要作的也不過就是每月都學習點火起來的新技術而已。