方正的前端學習路線

最近收到不少私信，關於求職的，也有關於如何學習的，學習什麼的。

不少朋友有一些編程基礎，但是依舊是比較迷茫。在這裡，我也說一下我的前端學習路線。

開發前準備

• 代碼編輯器

其實就是開發工具，我只推薦一款，現在大家都在用的好東西！

Visual Studio Code - Code Editing. Redefined：調試、終端、插件一體化！重點是只有不到100M的大小！

• 代碼調試

沒錯，作為一個前端開發，你必須要跟天天見面的瀏覽器打交道！眾多瀏覽器里，谷歌瀏覽器用的人最多！反正大家用，我也用！

Chrome Dev Tools 淺析：成為更高效的開發人員 - 文章 - 伯樂在線：這是一篇教程

• 代碼、版本管理

剛開始編碼的時候，我根本不知道還能有這種智能化的「回滾，版本控制」功能的軟體！學習了兩個月編程才知道github!慚愧啊！

Github 地址：Build software better, together

github 學習：Git遠程操作詳解 - 阮一峰的網路日誌（不解釋了，我就是看著這篇文章長大的！）

前端開發最基礎

• HTML入門級教程：HTML 教程，不用全部看完，知道套路基本就可以了！現在的開發模式基本都是「div+css」的模式，因此了解一下其他html5的元素！直接寫一個簡單網頁出來看看吧！
• CSS入門學習：HTML+CSS基礎教程-慕課網，稍微註冊一下（或者微信登陸）你就能獲得一整套的HTML+CSS基礎教程！學完包你之後都不用再看了。
• Javascript教程：JavaScript教程，什麼？你沒聽說過 @廖雪峰 大大？在這麼多Javascript教程裡面，我最喜歡廖大的教程！通過講故事，寫小說一般將js的運用娓娓道來！是一個名副其實的好老師！
• HTTP協議：對於一個前端人員（或者web開發），如果你不知道，不了解HTTP協議，那麼它就會在你的開發旅程里，像一個幽靈一般的死鬼纏著你！防火防盜防不懂HTTP協議的人！HTTP 協議入門 - 阮一峰的網路日誌，實際上10分鐘看一遍你就懂完了。
• 課外了解：「互聯網協議入門（一） - 阮一峰的網路日誌」「互聯網協議入門（二） - 阮一峰的網路日誌」，現在單機的應用非常少了，我們每天都在和網路打交道，茶餘飯後花費10-20分鐘了解一下互聯網協議，會對你以後的編程學習有很大幫助！

進階

• HTML 5 教程：別再糾結於什麼htmlxxxxx了，直接看html5。新的html5新增了非常多的元素和特性，前端工業標準！
• CSS 教程：其實css在前面你可能已經了解了，使用css+html5我們可以實現很多的特效。能不用js就不用js!
• 自適應網頁設計（Responsive Web Design）：為什麼現在有些網站，滑鼠放大瀏覽器框，縮小瀏覽器框，他的排版排布會完全不一樣？為什麼現在有些網站，電腦看的時候是一個樣子，手機訪問的時候又是一個樣子？答案全部在這裡！
• CSS動畫簡介 - 阮一峰的網路日誌：又是他！套用阮大大的開頭一句話「現在，我很少寫介紹CSS的文章，因為感覺網站開發的關鍵還是在伺服器端。但是，CSS動畫除外，它實在太有用了。！！！」
• 進階課外學習：「jQuery 教程 | 菜鳥教程」「Bootstrap 教程 | 菜鳥教程」「AJAX 教程」，建於現在大家都往ng/react/vue上面靠，這部分作為新人有興趣了解即可，我們將重點放在後面的ng/react/vue上！

高手之路

• 包／模塊管理：Node.js，直接安裝一個node.js，你就可以擁有了npm包管理工具，基本市面上流行的工具我們都可以使用npm下載到，非常方便！「NPM 使用介紹 | 菜鳥教程」「快速搭建 Node.js 開發環境以及加速 npm」這兩篇文章，十幾分鐘看完，基本上這輩子就不用再看了。
• 前端自動化：入門Webpack，看這篇就夠了。啥？還沒聽說過Webpack？你在寫工程的時候，每次都要<link>啊，什麼什麼的寫一大堆你才能開始做你的工程，太慢啦！大家都在用的Webpack就是幫你做這些事情！花半個小時了解一下Webpack配置，你馬上就可以擁有快速開發H5應用的先決條件了！
• ES6：ECMAScript 6入門，不解釋了。歷史的js有很多二逼得不行的設計，我們說的js變數作用域就是一個非常醜陋的設計！在ES6中，引入了let關鍵字，完美的解決了這個問題。當然ES6語法中，有大量的新的語言特性，快點操作起來！（不要搞錯，不是叫你學一門新的語言，其實es6還是js）
• 更好的css排布方式：Less 中文網。我們的css代碼越寫越亂，沒有層級感，特別丑，我們可以使用less去讓我們的css更好編排，更好看。Sass基礎教程 Sass快速入門 Sass中文手冊 | Sass中文網,同樣sass也是非常成熟的解決方案！不解釋，反正幾分鐘就能上手，隨便選一個開始吧！
• 新的網路請求深入淺出Fetch API - WEB前端 - 伯樂在線：以前我們都用的ajax，現在落伍啦！我們趕緊使用Fetch api來進行網路請求吧！（其實fetch也快落伍了哈哈哈
• 課外：StuQ技能圖譜，這個網站詳細的介紹了前端工程師需要掌握的技巧，課外同學可以查看！

前端三大流行框架之一：React

ng/vue我都非常喜歡！有興趣的人，可以去學習（實際上學好哪一個都好找工作），因為我工作中用到的是React所以我詳細說一下學習路線。

React入門

• React 入門實例教程 - 阮一峰的網路日誌
• React 測試入門教程 - 阮一峰的網路日誌

都是阮大大的教程，都比較古老了，但是依舊是值得我們去學習。深入淺出的介紹了React的工作方式，編程方式，以及重新定義React。測試那一篇可能有點難懂，看不懂可以暫時跳過。（畢竟測試是穿秋褲......

React進階

出學者我只推薦一本react的書，非常好，非常新，用的都是react技術棧的新版本。

• 《深入淺出React和Redux》(程墨)電子書下載、在線閱讀、內容簡介、評論 - 京東電子書頻道，知乎 @程墨Morgan 大大寫的一本關於React和Redux的書籍。我本人非常喜歡程大對軟體架構的一些理解。
• 在書中，你能夠很清晰的看到，如何學習整個React技術棧，從React，到Redux，再到React router，單例測試，最後到伺服器端的渲染、同構，應有盡有，看完這本書你基本上就能很好的了解整個React技術棧.
• 你不僅能從書中學習到React，你還能學習到一個高手如何去排布，組織自己的代碼。程大用淺顯易懂的語言，把現代前端開發架構講得非常透徹，並且以「限制」一詞貫穿始終，大大的點贊。
• 我沒有收錢，我是真的從書中學到很多，因此非常推薦。我本人買了紙質的版本，喜歡的朋友也可以去買。想立即閱讀的同學，馬上去買電子版本吧！

React進階高手

• redux-saga：redux解決了項目結構和數據流的問題，但是非同步問題redux解決得非常屎，可以說更噁心了。React社區的人想出了React-thunk的解決方案，但是依舊是讓人頭疼的一個解決方案。在我們學習ES6以後，我們可以輕鬆的使用redux-saga去排布我們的非同步代碼！掌控 redux 非同步
• Material-UI：一個開箱即用的ui庫，符合現在的審美設計。讓你不再腰酸背疼的去寫一套ui庫！
• A UI Design Language：阿里出品的ui庫，我個人最喜歡的React ui庫之一。風格輕量化，不做作，比起Material-UI油膩的風格，我更喜歡ant design.
• Introduction · redux-observable：有時候，我們的網路請求會有競爭態，這時候，我們可以使用這款中間件去增強我們的redux，借鑒了rx.js。當你有競爭態的時候，你可以使用這樣的一個庫去解決！

這一部分內容我要單獨說一下。在我們開發的路程中，我們不應該直接去使用這種「高級的特性」，上述我說的都是react後來發展出來的高級特性（庫），這些高級庫其實是為了解決react的某個問題而存在的。

你必須去寫最基本的React應用，你才能夠感受，到底React是哪裡蛋疼，是哪裡需要改進，然後你就能明白為什麼會出現這麼多的「亂七八糟的庫」。

實際上，如果你腦力超凡，你可以「不用任何庫，只用React去締造一個屬於你自己的應用」。

一些值得我們關注的前端博客：

• Home - 廖雪峰的官方網站：哈哈，廖老師幽默十足，看他的前端教程你可以樂呵呵的笑出聲來並且學到東西！！
• Ruan YiFeng"s Personal Website：不解釋了，學過React的人，都知道這位神仙，他的教程，文字，深入淺出，無人不曉。重點就是他的博客中還有很多人生道理，開發收集等。（世界流量前6000的網站哦!
• 張鑫旭的個人主頁 " 張鑫旭-鑫空間-鑫生活：張大大的博客，非常多的奇巧淫技，很多鬼怪的功能，他都有寫，是一個非常牛x的博客！
• 聶微東 - 博客園：同樣是一個非常好的博主，博客主要內容包括：HTML5，Python，PHP，Nodejs，MySQL，NoSQL。作者是一位畢業於陸軍航空兵學院，獲計算機科學與技術學士學位的人。熱愛編程，從事JavaScript研發工作。

一些奇巧淫技：

• Redux的副作用處理與No-Reducer開發模式，一篇深度好文，讓你脫離繁瑣的reducer。
• Chrome DevTools 動畫演示，提高你的網頁開發技能：標題詮釋了所有要表達的。
• 用 JavaScript 實現對滾動時頁面布局變化的控制
• ??CoderPad-基於React全家桶寫作/新聞一體綜合應用的實踐總結：一款React做的線上軟體，作者代碼規範統一，屬於優秀的範例。大家在學習React/redux之後，可以看看這款應用，對著自己喜歡的東西，學著做一套出來，上傳github，寫入簡歷，對找工作很有效。
• 前端基礎面試題(JS部分)：去工作，不能少了面試，大家應該去看看面試都考什麼。
• 前端測試框架 Jest：fb官方出品的測試庫
• react 後台管理系統解決方案：一個非常好的react開源項目。
• 繪製隨機不規則三角彩條——小談EvanYou個人主頁的實現：不解釋！知乎大大，vue的作者 @尤雨溪 的博客實現！高端大氣上檔次的博客設計！！！！！
• [譯] 50 行 CSS 代碼擼一個陰陽八卦的 Loading 動效：真的是黑科技了....
• 深入了解Timeago.js：這個庫非常有意思，實現了現代的時間設計：1秒前，3秒前，10分鐘前。過了幾天以後就變成2017-8xxxx之類的，非常輕量化。

最後的一些總結

• 以上就是我個人所看過的所有博客和文章，知識點可能會遺漏，但是我只推薦我看過的，我認為精品的！
• 學習前端難嗎？其實不難，很多東西都是上手後，一星期之內就能下地幹活搬磚。
• 自學前端找工作難嗎？首先，前端基本都是自學的。其次，找工作這件事情，實際上還是看你的態度。態度體現在：你是否在學習過程中做筆記；你是否認真管理過你的代碼（上傳github）;你是否認真完成過一個完整的項目。最後說一點，簡歷用心寫，和不同心寫，是兩個物種。
• 造項目經驗：不是編，而是造。認真學習完以後，一定要做一個用心的應用出來，就算面試簡歷沒用，再不濟，你也能從中學到很多！這個十分關鍵！
• 面試失敗不要心急，總結自己失敗的原因，回來再學過。互聯網工資高，誰都想來，腳踏實地做人，認真學好每一樣東西，這樣就能脫穎而出。
• 最後說一句：切忌編工作經驗，那些說編工作經驗找到高薪的人，有，但是這種方法終究不是正道，而且聰明的面試官，基本上一眼就能看出你是否有這麼久的開發經驗。不要把人當傻逼，你把人家當傻逼，人家一樣把你當傻逼。

關注 我@方正 ，學習更多編程知識（甚至健身知識....