前端新人的迷茫？

大二，學前端大半年了，html，css，js，jq，less，bootstrap這些不敢說精通，但也熟練掌握，項目也做了不少。最近學react的時候開始感覺力不從心了，之後再去了解webpack，npm，node等簡直一臉懵逼，各種配置命令行根本看不懂，彷彿到了另一個世界。

到了這個階段應該怎麼繼續學下去呢，是我基礎知識不足的問題嗎？

---

授人以魚不如授人以漁。與其教你怎麼學會用 Webpack 和 React，還不如跟你交流一下應該如何應對這些新生的技術和工具、如何建立良好思維習慣，再去接觸這些工具，有時候會事半功倍，甚至這個工具出來的時候你就可以看穿它的本質，你可以根據自己的情況學或者不學它。有些心態問題本質上其實是邏輯問題。

結論先放前面：遇到一個新的工具的時候，先去研究這個工具解決什麼問題，把它解決的問題透徹以後再去研究工具。

這是你日常編程當中遇到 bug 的時候、接觸新的事物的時候都需要做的第一步，也是一個合格工程師基本的素養。很多同學初學的時候會遇到這樣的情況，遇到 bug 的時候首先想的是如何解決這個 bug， 然後匆匆忙忙地改代碼，用一個 bug 去掩蓋這個 bug，而不是首先去想這個問題的根源在哪裡。工具也是，什麼潮流學什麼，概念複雜一點的工具就開始懵逼狀。而很多優秀的工程師，都無不在問題的根源上想得很透徹。

舉個例子，React.js 解決什麼問題。你看了一下官網的介紹：React.js 是一個 View 庫，用來構建用戶交互界面。這是一句廢話，而不是一個問題。然後你不甘心，去看 React.js 的發布視頻（https://www.youtube.com/watch?v=XxVg_s8xAms），你發現了主持人說的：React 避免手動更新視圖。為什麼要更新視圖，因為數據改變了。所以 React.js 本質上解決的問題是：如何在應用數據變化的時候自動更新用戶界面？

然後你想，這個問題不是可以通過 MVVM 模式來解決嗎，它和普通的 MVVM 有什麼區別嗎？然後你發現它和普通的 MVVM 不一樣，它是通過 Virtual DOM 來解決這個問題的，為什麼 Virtual DOM 可以解決這個問題，其實本質上它是在數據變化的時候重新渲染了整個視圖。而 MVVM 是通過數據綁定，本質上是通過事件來解決這個問題的。

於是你總結了：啊，其實 React.js 的 Virtual DOM 解決的問題本質上是和 MVVM 一樣，解決數據和視圖自動同步的問題。但是解決方案不一樣，這兩種解決方案有什麼優劣，然後你就可以思考下去。當你總結完了這點以後你會發現，其實很多框架都是用不同方式解決同一個問題，不同方式有優劣。

發現了嗎，你從頭到尾都沒有學 React.js ，而都是用邏輯工具在研究根源問題。

所以你可以看到，要準確地描述你所面臨的問題（工具所解決的問題），然後不停地的歸因到根源，再從這個根源出發去想你能想到的所有解決方案，再對比所有解決方案的優劣。這是一個先不停歸因到根源，然後在從根源出發想解決方案。是一個先收縮到最根，然後再發散的過程。

但現實當中肯定沒那麼簡單，因為一個工具可能解決多個問題（例如 React.js 有 JSX），你需要多線路考慮。這個需要練習，不停地練習，直到它成為你生活中的一部分。等到再出什麼工具的時候，你已經胸有成竹了，你已經掌握了思考問題的規律，這些工具都是浮雲。

那麼，你可以嘗試做練習了：React.js 的 JSX 到底解決了什麼問題？

UPDATE：這裡有一個 Redux 的例子，關於 Redux 到底解決了什麼問題：redux的state樹應該如何設計？ - 鬍子大哈的回答 - 知乎 可以一起探討。

---

我剛看的時候我也懵逼，你不是一個人。但是看著看著就不懵逼了，同理這樣的人也不是一個人。

年輕的時候多掌握學習方法和自學技巧，老了才不怕老本不夠吃。

---

我也迷茫，webpack我有時候配起來也一臉懵逼。

老實說你才大二哎，已經很不錯了，你都玩那麼轉，讓我們這些干很多年的老臉往哪放呢

不開玩笑了，如果你動手能力比較強可以看看別人怎麼寫的，我最近在看簡聊的源碼，你可以看看，非常有難度，但是別急，哪裡不會補哪裡。

如果你動手能力不強，那還是先補下基礎知識。

因人而異吧，如果我回到大二會惡補計算機基礎知識，不會太著急學習職業性特彆強的技術。就這樣吧 前端方面有問題可以私信我，睡了。

---

大約半年前，我也在遇到過題主所說的這道坎。講講自己的經歷，希望能對題主有所幫助。

半年前剛被第一家公司錄取（十幾個人的創業公司）。當時的水平是兩天做完一個京東首頁，工程化概念完全沒有。還沒入職一位大哥就把一個完整的工程的前端交給了我，那個項目用到了npm，bower，gulp。。。哦對了，因為大哥在gulp腳本里寫了個軟連接，所以項目在我當時用的windows環境下跑不起來。我只能自己琢磨著安ubuntu，node，搞npm，白天寫畢業論文晚上去找那位大哥解決配置環境上的疑難雜症。大哥幫我配置好了環境之後，告訴我什麼命令能啟動項目久對我愛答不理了（因為我問的太弱了。。）。每次改前端代碼都戰戰兢兢，生怕把項目改壞了。

入職後的前兩個月，我用周末時間開始學習nodejs。一遍學一遍看項目里的gulp腳本，開始自己試著改，遇到各種插件就上github上查。之後要調ajax和websocket介面的時候乾脆就自己簡單用node搭一個服務，用假數據開始測。。到後來我們java後台遇到一些小問題我都會快速用node來試一試哪種方法可行。

對了，還有命令行。我是用到哪個學哪個。建議題主試著開始用linux或者mac(前端最好是mac，屏幕好，工具相對成熟還方便以後開發ios)，因為很多工具的都是先有linux版的，win版異常難用還有bug。。。

所以給樓主的建議就是稍微系統性的學學nodejs，前端工具基本都是以此為基礎的。然後找一個寫的相對好的小項目，照著自己臨摹一遍～還有最重要的就是有一顆不斷挑戰未知領域的心。前端技術發展雖然快，但是在網路上一般都是有一手資料的，只要不斷學習，你總不會被淘汰。

————————————————————————

前面 @justjavac 大神說的只會jquey的前端我當初上培訓班的時候認識很多，可能工作了三四年水平還就是那樣，還是不會前端工程化的那套。為什麼呢？我認為不是前端工程化有多難，而是自學的原因。培訓班會教你css，js，jquery，但是新出的框架，構建工具只能靠自己去網上查資料。很多人不願意去學新東西，也沒有養成不斷學習的習慣，那就只能原地踏步。

最後講講我最近的遇到的一件事。

前一陣接了一個私活，是一個「傳統」前端換了家公司，新公司像開發一個管理系統，增刪改查為主，pm想要用上新技術，於是找到我求助教她用angular寫一個。第一次有外快的機會當然特別上心，我自己快速搭了整套開發環境和框架，一步一步教她搭建中的知識點，還建議她看著代碼學學angular。

然後過了三四天，她給我看了她用jquery寫的一個表單（用過ng的都知道angular做這類事情有多方便），讓我幫她改錯。我立刻打電話給她說你為啥不用angular，然後連夜寫了一個給她。周末我當面給她鼓勁+交流。

我以為可以掙錢+拉她學新技術一舉兩得，事情完美了。一天之後她跟我說不用我了，她要用原生+jquery寫，因為時間緊學angular來不及。我說難的我可以寫，你照著我寫過的寫寫重複的業務代碼就好。這種系統用原生寫起來很費勁的。但是她很堅決，之後再未聯繫。

於是我的第一個私活就黃了，錢一分也沒有，她還是寫她的jquery，還拿走了我一本 @徐飛 大大翻譯的《angularjs權威教程》。我開始覺得挺可惜，但是想想至少一年工作經驗的人，不認識瀏覽器跨域報錯，還不知道遇到問題該去百度谷歌，來專門問我怎麼回事，我就釋然了。

祝她好運吧，呵呵。

---

回到你的問題，說是工具鏈太複雜。說實話沒有那些 npm，webpack 一樣可以搞 react 啊。像 NPM，webpack 都是解決什麼問題的，可以想想。

你學前端半年，可以做一些有挑戰的事，在那些事里去學習前端技術棧。比如你不依賴 bootstrap 來自己寫些組件試試搭一個 hacknews 的前台，或是做一個 weibo 的前端，數據都可以用模擬的。先去模仿，從之中去 refactor。然後可以去嘗試去實現一些後台 CRM 的系統，很複雜，很有挑戰。

至於用什麼 jQuery/backbone 還是你熟悉的其它庫無所謂，你先去感受這個過程，再去嘗試去分層，設計分層。再去碰 ng/react 這些東西就會清晰一些了。你如果可以不用任何庫來實現，那就更厲害了，在學習階段真的可以這麼『極端』，哈哈。你學了一堆庫，如果遇到我面試，我一定會問得很深，但實際上很多人只是在用用罷了。

至於你真要學 React 么，看《深入 React 技術棧》這本書，看不懂的地方私信我

---

這種先易後難的學習現象其實不僅僅是在前端領域，在任何一個領域都是一樣的。入門簡單，隨著學習的不斷深入，需要學習的東西越來越多，越來越複雜，這是十分正常的。

你回想下你剛開始學數學的時候，是不是覺得很簡單呢，1+1，1-1。之後慢慢開始學乘法，學方程式，學積分，是否感覺越來越難，步履維艱。

回到題主問的問題。web前端其實在編程界是最容易入門的分支，其中html，css，js，jq，less，bootstrap這些你都可以理解成數學中最簡單的 加減乘除法，所以當你稍微花點心思學習下html，css，js，你就發現你能開始寫頁面了，做簡單的項目了。然後如果只是局限在做頁面，不管做再多項目，你也只是一個頁面仔而已，技術水平不會有所提升。這時你突然去接觸react，webpack，npm這些高級的前端框架和工具的時候，就如同從 1+1跳躍到解微積分，當然會懵逼，覺得這還是前端嘛，我以前學的都是啥啊。

所以首先排除學習者自身的學習態度問題，我們假設大家都是努力學習的人，題主說的問題其實是在前端領域的一個學習順序的問題。
一個簡單的前端項目從開發到上線我認為是要經歷以下幾個步驟的：

1. 用html實現頁面結構

2. css實現頁面樣式

3. js實現頁面交互

4. 使用壓縮混淆工具如 grunt或者gulp 處理css和js，減小css文件和js文件的體積，從這個步驟開始其實就是前端項目的構建了，也就是進入到了題主所說的另一個世界

5. 部署項目

如果你一直局限在前三個步驟，那麼當然不會有什麼進步。 從第4個步驟開始就是真正需要去花大量時間研究學習的了。首先拿構建工具grunt或者gulp舉例，如果說你對js十分熟練的話，那麼grunt或者gulp裡面的每一行代碼你是能看的懂得，你需要學習的是

1. 這些工具為什麼會出現，他在整個前端開發和構建上線過程扮演者什麼樣的角色

2. 他能實現哪些東西，每一項功能的具體代碼實現是怎麼樣的

3. 為什麼要這麼來實現

按著這麼個研究學習順序，你會發現這些東西都是通過很簡單的無數的介面拼裝而成的。研究完一個工具，接著按照整個項目的工程順序，研究接下來需要哪些東西。這樣的話學習webpack，react等都和上文說到grunt沒有任何差別，自己也能循序漸進。

所以希望迷惘的人不要過於焦慮，認清學習路徑，按部就班就行了。

---

題主迷茫是很正常的, 打怪升級當然要一步一步走了, 我轉行的時候, 對計算機網路基本上一無所知, 但是慢慢從 Java 入手, 一步一步, 入手 node , 再入手前端, 缺什麼補什麼, 再系統的看一下底層的原理, 你會覺得越來越開心的...

第一次寫網頁的時候, 我也是小白, 但是沒關係, 拿了 bootstrap 來擼, 第二個項目就去掉 bootstrap 依賴自己用 sass less寫了

後端第一次寫node項目用 回調, 第二次就開始用 promise, 第三次就上了 async await

前端 JS, 第一次用 jQuery, 隨後就開始用原生來擼

模板語言也是, 用 ejs 到 jinjia2

構建工具從 gulp 升級到 webpack

前端框架 backbone =&> react 及 vue

終端 從自帶的 bash 變成 用 iterm2 zsh tmux

升級慢慢來, 打好基礎, 你會發現, 框架只是框架而已, 熟練的 JS 工程師很快就能上手了, 不要害怕, 興趣驅動, 多多嘗試就好了

---

我是14年末開始接觸前端，之前一直是windows下的java，沒用過linux，沒用過命令行。連rm命令都不知道。

14年末我實習完到了一家公司，呆了半個月，居然沒事做。然後我就開始了前端自動化之旅，當時是grunt.js走向沒落，gulp新型崛起，webpack還在萌芽，backbone和angular讓前端的人重新認識了前端。14年，可以說是前端快速發展的一年。而當時，ES6標準並沒有定下......

14年末我在新公司蹲了1個半月，公司的html、css、js、php寫在一個頁面，沒有模板嵌套，沒有分層。作為一個前端新人，我是特別崩潰的，並且只有我自己一個前端，當你說要重構的時候，應屆生的話語權是比較輕的，而且耽誤進度，索性我就修修補補，但對於一個代碼潔癖的人來說那是不可忍的。當時我還記得配grunt的時候，第一眼真的是很懵逼，而且不是在Mac下面配，而是windows。當時我學習的順序還是記得的：

1、先讓grunt跑起來，比如將一個文件複製到另一個地方；

2、讓兩個js文件合併後產出到某個目錄下；

3、將合併的js文件壓縮也就是混淆。

當時我就這麼幹了三件事情，幹了一周時間，總算配好了，但還有一個問題，就是html文件的引入js/css文件路徑替換，當時我是完全不明白原理。

14年末在那家公司待了之後我跳槽到一家創業公司，這家公司也是我真正前端之路的開始。公司以php做view層（當時node剛出不久，老大怕坑多，所以選了php作為view層），fis作為前端構建工具。當時看到fis的時候感覺特別神奇，一行命令，編譯，打包，發布一條龍。然後在公司期間用fis相當順手，當時fis它的原理、幹了什麼事情，我一概不知。然後gulp與webpack這兩個工具不斷的刷著前端圈。然後我開始去了解。

之前配置grunt的時候（也就配置了一次），感覺特別繁瑣，每一個task都要手寫，並且當時grunt的思想就是傳統前端的思想。之後在不斷一步步了解gulp之後，回頭去看fis也就明白市面上的各式前端工具其實原理都是差不多的 。就是合併、壓縮代碼、模塊化。

在15年，我的老大走了，前端由我來負責，fis也升級為fis3，這次升級收穫很大，踩了很多坑，成功將公司的前端自動化工具升級了一遍。

16年，不甘寂寞的我在我的個人項目中玩起了react，這次我沒選擇fis，而是直接用gulp+webpack。從node，到webpack，再到react，業餘時間把整條前端自動化配置好了，當然這都是在其他前輩項目中看他們的源碼一步步去實現的。然後也嘗試react服務端渲染，這過程艱辛萬苦，還有CSS Modules等等，一系列技術都玩了一遍。最後也把它上線了，就兩個頁面(http://www.weizongqi.com)，並且也挺粗糙的，但是很開心，很有成就感。年底的時候，我負責公司前端的移動web，我用了fis+react，目前只有我一個人在開發這個項目，說實話，是我拖了項目的進度，所有的下拉、彈框、時間選擇器都手寫一遍。

今年我打算把fis替換成webpack。目前已經在干這事了，坑不少，但為了以後更好的開發。

說那麼多，我也是從一臉懵逼過來的。我大致看了各個樓層的大神，也都是一臉懵逼過來的。所以如果你喜歡前端，那就堅持下去，了解它們的原理，多試，多踩坑，同類型庫多比較。最重要的是基礎，所有新的技術都是建立在基礎之上。

有說的不好的歡迎各位大神指點一二。

---

別急，webpack就那樣，不是新人剛看也會蒙逼。如果有人熟悉，你就讓他們幫你配置好，不一定需要現在了解。新手可以把現在的重點放在業務內容上。

---

學以致用，沒有目標漫無目地的學，學起來會很累，學的時候自己創個小項目來做做，做的時候碰到問題，解決問題，才會有提好的提高，你看到webpack，npm，node等一大堆東西，你沒有在實際項目中碰到過問題，你不會了解，它們為你解決了哪些痛點，學習是一個過程 ，不要看到新的東西就想學，這樣你學不明白，新的東西，一開始主要是了解就它是幹什麼的就可以，這樣你在實際開發過程 中碰到問題 了，會想到某個東西解決這個問題 好像正好合適，這時個再去學習它也不晚，還會學的更快！

下面是我的學習歷程：

我2003年學校里畢業，在學校里，只學過c。自學asp ,做過幾個小網站,哪個時候,div布局還沒流行,css也是,js也就是用來做滑鼠跟隨什麼的特效,經歷過那個年代的人都應該記得那個時候的頁面上很多眼花繚亂的js特效.

畢業後在一家公司邊學邊做，delphi,vb和繼續用asp寫小網站,從那裡出來以後，我就再也沒有從事過編程相關的工作了,

但是其間十年來編程一直是我的愛好,做一些方便工作的小東西,比如我用python寫過排班表,選擇python因為他是唯一一個，只要安裝一下，配置一下環境變數，就可以用記事本寫代碼的環境,工作電腦的限制，所以只能選它,我還寫了GUl。這個小東西我現在回去，他們還在用。

但這個時候大部分的時間我用的是c#,現在想想好像寫了這麼多c#的代碼，卻什麼東西都沒有寫出來,主要是不知道做什麼，而且，自己又不是從事編程相關的工作。

2010年左右吧，記不太清楚了，我買了一台htc的hero,開始入安卓的坑,當時，android 2.1剛出來我就升級了,結果原來的2.0下能用的凱立德導航不能用了,我反編譯了凱立德的apk,修正了錯誤並把它發布在hiapk bbs上,反正當時應該有超過1萬多的回帖,這可能是我最風光的一次了。原帖不在了,但去百度搜索 "papersnake 凱立德",還能搜索到一點痕迹。

接下來我就開始用業餘時間做安卓開發。寫過幾個共享軟體沒成功。12年去朋友公司幫忙幾個月幫他們做了個android客戶端,做完我就回來了，繼續做我的零售行業。

去年年初的時候，突然想做個小網站。什麼vps,雲主機都花費太大,最後問朋友要了一個虛擬空間。花了幾十塊錢，註冊了一個域名。這時候發現能選擇的開發語言只有php了。我從來沒有用過php。選擇了thinkphp作為框架。這裡要表揚一下thinkphp,入手無難度。但現在用下來有點慢慢滿足不了我的需求了。由於網站簡單，後端所做的只不過是一些資料庫的查詢，插入的動作。對我的挑戰主要在前端。javascript 和 css,

設計漂亮頁面是要靠靈感的。這個估計靠培訓也培訓不出來。就好比你把photoshop所有功能都研究的非常透徹，所有快捷鍵你都滾瓜爛熟。但你沒那個藝術細胞，你還是做不出漂亮的設計。

css的使用也一樣。我現在可以不看css源碼,自己用css模仿出相似的頁面設計。但我做不到自己設計出漂亮頁面。沒那個藝術細胞。因為我懶所以css我抄了很多人家漂亮的設計,也直接複製過人家現成的css,但是經由我手組合到一起，似乎也沒那麼好看。（看來藝術細胞真的很重要）

javascript 以前是我最抗拒的一門語言了。雖然接觸的蠻久了,以前用的它就是抄。但現在也慢慢算是入門了，不用去抄了。網站的第一版javascript是直接寫在頁面裡面的,但現在全是用ES6寫成模塊,並通過webpack打包。然後再在頁面里引用。

寫了這麼多，我只想說其實有心學習的話。這些知識，都可以在網上找到

對新技術新知識保持關心就可以。並不是一出新技術，你就要掌握它。但你至少知道它是幹什麼用的。等要用的時候就可以有選擇。而不盲目。要有的時候再去學習，邊學邊做掌握起來更快。

我雖然不幹開發這一行，但興趣始然，我平時業餘時間 還是很關注開發這一行的，有什麼新的東西出來，我都會去了解一下，當然，只是了解一下這些新東西是做什麼，解決什麼問題的，有個大概的概念，這樣，下次我碰到類似的問題的時候，就會相到，哪個東西正好可以解決我現在的問題，我再去學習它的語法，API之類。

---

看到很多答案安慰題主的。

我說說我學習webpack nodejs命令行之類的小經驗吧

1、webpack配置

文檔。文檔。文檔。

先看一遍文檔，再擼各項配置。

這是學習的先後問題，一定不要瞎猜各項配置含義。

2、nodejs vue cli

命令行的東西，如果了解的深刻點，你要知道下面幾個概念：

1、可執行程序聲明#! /usr/env/node

聲明操作系統的處理程序

2、命令行的參數argv是一個數組，一般會採用yargs等模塊解析為key/value模式，傳入正式的啟動代碼。

命令行和webpack.config只是不同的編寫配置的方式，都屬於聲明式編程的範疇。

一般的學習途徑就是文檔就夠了。

當然，看源碼是最直接了。(：逃

---

我一直覺得某種技術的產生自己運用是因為簡化一些複雜的工作自己繁瑣的配置，而這些複雜與繁瑣是長時間的嘗試與實踐發現的。學一門技術首先學的是它的歷史，解決了什麼問題，背後的技術是什麼樣子的，學會背後的技術，然後再去運用這項技術去解決你面臨的問題。假大空的去學習一門技術，需要仔細斟酌，也許一句話就是一個原理一個觀點。多看幾遍，多實踐，順序走下去，前面不懂看後面肯定懵逼。以上！

---

「心靜自然涼」，踏踏實實的學，循序漸進，不要好高騖遠也不要妄自菲薄，任何事情都需要時間，去積累的。

---

你是對前端傳統應用開發比較熟悉，而前端的現代開發已經不像傳統應用開發一樣了。

es6是現代前端開發的重要基礎，建議題主先去搞明白es6中的大部分重要特性，再去入門react；同樣，先去搞明白js模塊化再去學webpack也會輕鬆許多。學習前最好規划出一個好的學習路線，磨刀不誤砍柴工。

---

轉入node全棧1年半時間，之前有很多年是做c++後端。

期間學習使用了jq，angular，ionic，react，npm，node，typescript，sass，grunt，gulp，webpack等一堆的新東西。

面對前端大量的新工具，我是跟著需求走，先定好要做什麼樣的項目，完成什麼樣的功能，然後一步一步的解決問題，get新技能。

例如前年9月份我要做移動web端的一個眼鏡試戴系統，經過一段時間的調研之後，發現ionic是我的最佳選擇，於是開始項目。找了一個例子，clone下來，進行修改，漸漸完成一些功能。系統初版帶著各種問題就上線了，然後碰見各種問題，每個問題碰見了就去解決，例如瀏覽器緩存需要使用文件命名帶上hash才能解決，於是開始研究例子中的grunt構建，解決了一些問題後，發現gulp更好，可以簡化我的構建代碼，於是把構建系統改成gulp。再後面又發現webpack是大家推薦，也是最佳實踐之後，於是又把構建系統改成了webpack。

經歷了grunt-&>gulp-&>webpack，今天，你如果問我相關的這幾個工具的具體知識，估計我都無法通過面試。但面臨問題，我能夠找到例子，改改就解決了問題，我認為對工具的掌握程度能夠解決問題就夠用了。

對於題主的學習react，我自己的學習方式是找一個好例子，（react使用coryhouse/react-slingshot）在這個例子的基礎上面進行開發，基本不用關心題主的webpack npm node等，例子裡面已經很完美了。只有等你需要做自動雪碧圖、優化構建速度等較高級一些的功能時，才需要自定義其中一些功能，才需要進一步去學習。

所謂基礎知識，我在招人的時候，要求是能夠會任何一門編程語言，能夠閱讀英文文檔，然後能夠掌握基本的數據結構，能夠解決與基本演算法相關的題目即可。有了這些，無論學習前端後端，都是沒有問題的。而把webpack，npm，node做為基礎知識去學習是不必要的。

轉發一個關於前端相關知識的調侃：

知乎專欄

---

## 2017 1 10修改

已收到美團點評offer 前端這條路走到了第一個里程碑。

你好，儘管上面已經有很多我知道的大神回答了你個問題，但是我覺得我還是可以說說我自己感受的。

我目前大四，大二上學期時候和你一樣，覺得自己已經掌握了這些知識，但是很迷茫，迷茫原因是不知道下一步該怎麼走，迷茫不知道該往知識廣度上發展還是知識深度上發展，迷茫是繼續學php還是從頭學node.js（我當時真覺得node.js我一點看不懂，對我就是新語言）。當然兩年前我還不知道webpack和npm react是什麼 。

後來我也是找大神問，我記得我問過 一些大神 等等 然後 給我回復都是在基礎知識上繼續學習。 那時候我確實挺焦躁不安的，感謝一位大大當時告訴我慢慢都會好的，事實上確實慢慢都會好的。之後我開始深入學習js 整天看+抄《js高級程序設計》（我的記憶方式就是抄書 ） 看了整個學期，感覺爽過吸大麻。。之後再看node.js發現能看懂了，了解了node.js後，起手幾個小項目 demo的練手 慢慢的就會了解npm gulp webpack 是什麼 用來幹嘛的。

之後遇到了另外一個坎兒，對於現在的前端框架，思維定式從dom驅動變成數據驅動這個過程很難，不過多寫幾個demo 就好了，期間我養成了寫博客的習慣，也是因為我最開始學習前端時候的認識的一位老大哥告訴我程序員一定要有自己的博客 。 雖然我還是比較菜，但是我還在不停的學習。

不過我現在遇到了另外一個瓶頸。作為應屆生，確實需要找工作了，去年的秋招我投了幾個大公司，最遠的也只是走到了二面。這裡感謝幫我內推過的老師們。真是麻煩了。儘管一無所獲，但是我意識到了自己基礎尤其是 css基礎還是很弱。之後就放棄了去小企業還有學校推薦的企業等等實習，就在寢室老老實實學習。但是這種情況也讓我不舒服。16年接近年末我投了幾家小公司因為種種原因也都沒去（主要是學校太偏遠了，距離市區單程2小時以上地鐵），再加上我還是挺嚮往bat等前端出名的企業的。就一直在等機會和學習基礎知識，數據結構與演算法，計算機組成原理（因為我不算嚴格意義上的科班 ）。慢慢的我覺得這個所謂的瓶頸也只是當時的胡思亂想，不如多學點知識。機會總是留給有準備的人。

---

本來想寫幾句的，沒想到寫了這麼多，可能是因為感觸太深吧。

手機打字，語言組織的也不好，望諒解。

---

別擔心，少年，我剛出來找實習的時候，面試官問我聽過react沒，我說沒有，然後他說準備用這個框架來搭建項目，接著我就獲得了這個機會，最終我進入了react的世界。

你現在的水平應該比我找實習那會強，至少你還知道有react，並且去研究過，在努力一點就能學會了。

---

同大二狗，深有感觸。

之前敲過不少前端的項目。

我覺得要從實際痛點出發思考，學習框架，才會知道框架在做些什麼。

我蠻早之前就關注react（react版本大概是0.1*的時候），開始的時候看文檔，一臉懵圈，只記得什麼單向綁定和virtual DOM。根本不懂為什麼要搞這些東西。

後來做一個比較複雜交互的前端頁面的時候，我忽然發現，用戶的一個操作 會引起各種DOM的改變然後整個頁面還有各種複雜的交互功能，然而按傳統前端獲取DOM結點修改DOM結點的思路，簡直不能管理這些交互，也根本不知道如何優雅的寫清楚這些邏輯。

然後你再去看react，你就會發現框架里 virtual DOM 數據單向綁定能夠很好的解決這些痛點，然後你就會很有興趣的去看react，開始瘋狂入坑。 所以認清痛點很重要。

然後關於學習框架和各種知識，首先，看文檔很重要，要多去看英文的文檔，然後去寫一些DEMO，實在不是很想寫的話 可以看別人寫的小例子。

現在react的資料也很多，webpack這些的話，推薦從create-react-app這個腳手架開始，先去使用腳手架寫一個小的頁面，大概知道腳手架都幹了些什麼，然後去看它的配置是怎麼做的，先看 package.json 了解npm包的結構，然後去看它 webpack的配置，之後，你會發現他不支持 sass，less， css-modules等各種東西，你就可以通過改它的webpack配置 去弄一個自己的腳手架，結合webpack的文檔慢慢的學習。

然後node的話，推薦可以去看koa2，async await寫起來很舒服，也可以去用node寫個小的爬蟲。（推薦你寫ts，配合vscode，寫代碼簡直舒服）反正多去實踐，多寫點小東西就能慢慢理解了。

命令行的話，好像沒什麼東西呀。經常寫的就那麼幾個吧。。

突然想起來這是我的第一次回答，可能是看到提問也是大二的，感觸太深了。。

---

很久沒有正兒八經在知乎上回答過問題了，先蹲牆角認真反思一下……題主絕不是第一個經歷這個階段的人，我就結合自己的經歷從兩方面來講一下我的看法，希望能夠對題主及處於題主類似階段的人有所幫助。

首先是心態，每當我意識到自己處於『學習懵逼』狀態的時候，會思考到很多東西，譬如說『是不是我的學習方法不對？』、『是不是我走入了什麼誤區？』、『是不是我心裡的懶惰小人又要把勤奮小人送進醫院了？』等等，但往往這種思考不出意外的話最後都會以一段思想的神遊作為結束，對解決問題本身毫無意義可言。

後來我就想著要不換一個角度試試——我最早進入『學習』這種狀態是什麼時候呢？很顯然是作為一個新生命第一次接觸這個世界的時候。我會嘗試用自己的思維去理解這個世界，哪怕我一點兒也搞不清楚這些事物究竟是什麼、它們的存在有什麼意義，但我會模仿啊，我身邊的人做什麼我就做什麼；到了我學會說話，得到與人正常交流的能力時，我又會通過不斷去問『為什麼』來補充我的認知，哪怕我前一分鐘知道了答案後一分鐘又忘了，但我通過交流，開始學會將別人的知識進行轉化；某一天我又學會反思與總結了，我就會不自然地把自己的想法分享給周圍的人，哪怕這些想法可能從根本上就是錯誤的，但我學會了將自己的思想與其他人的思想進行碰撞……

這些經歷都是在『學習』，那時候不懂的東西很多、接觸到的東西很多、需要我們去理解去學習的東西也很多，為什麼從來就沒有『懵逼』的感覺？我認為最關鍵的原因在於孩童時期的我們對學習這件事沒有絲毫的功利心，不會因為對某件事物不能理解就感到氣餒，也不會擔心今天所學是否能被明天所用，更加不會因為接觸事物的品類繁多望而卻步，所有的動力都來自於『求知慾』而已，能學到什麼程度，我們一點兒也不在乎。

到此，我想表達的觀點也就呼之欲出了，我認為無論我們處於人生的哪個階段，在學習這件事上都要保持一個初學者的心態，既是為自己減輕壓力，又是為自己增加動力。

只要心態的問題解決了，我們就能將學習的姿態由『退縮』扭轉為『前進』。

其次是方法，我還是結合自己的經歷來談一下對初學者而言如何去學習如此繁多的前端知識。

剛剛接觸前端的時候還是 jQuery 風靡全球之時，之所以會掉入前端這個大坑完全是因為『炫酷』的網頁特效，那時候完全不會去 care 前端到底有多少基礎知識需要學習，也不會去關心 JavaScript 這門語言上的細節，依樣畫葫蘆做出一個個特效讓自己的腎上腺素飆升顯然是更加重要的事情。所以我認為對初學者而言，『不求甚解』地先做出成果，嘗到學習上的甜頭遠比弄懂每一個知識點上的細節更加重要。舉個例子，Webpack 的官方文檔『又臭又長』、配置眼花繚亂，但對於初學者而言，用最簡單的配置將 Webpack 啟動起來遠比把文檔看懂重要，這也是上面所說的『模仿』。

當我們通過依樣畫葫蘆讓自己嘗到了甜頭以後，就需要去思考更加深層次的事情了。在很多領域裡，每件事物的存在往往都是因為這個領域有相應的需要，前端領域也一樣，同樣拿 Webpack 做例子，當我們可以順利跟著 Webpack 的思想將資源輸出為一個 JavaScript 文件的時候，很自然地會想到『如果我想和以前一樣將 JavaScript 文件和 CSS 文件分開打包應該怎麼辦』這個問題，那麼這時候 ExtractTextPlugin 插件將會被你注意到。在這個階段，儘可能地去思考當前使用的這個工具在開發中的應用場景，並且結合應用場景去學習這個工具提供的功能，才更加容易理解工具本身存在的意義，所學到的知識也更加難以被忘記。

當然，有的工具提供的功能目前的我可能根本想不到與之對應的應用場景，那應該怎麼辦？我的做法是粗看一下留個印象但不學習，『不學習』是因為我現在根本用不到即便我花費時間去學習了等將來要使用的時候估計我也全忘了，『粗看』是為了避免將來我真的遇到合適的應用場景時，居然潛意識裡面根本不知道這個工具居然提供了這麼一個功能。除此之外，在這個階段你可能會遇到很多的疑問，那麼是時候與他人交流提出你的問題了（當然大部分問題你都不是一個遇到的人也不是最後一個遇到的人，往往通過合理使用搜索引擎去檢索就能得到答案），這也就是上面所說的問『為什麼』。

當我們對某個工具所提供的功能爛熟於心時，就可以對過往的學習做總結，並對某些特定的應用場景做針對性解決方案，繼續拿 Webpack 舉例子，當我們對它提供的大部分功能都了解了以後，結合我這段時間的開發經歷，我可能已經有了一套針對於『移動設備單頁面應用』的『專屬 Webpack 配置』，不妨梳理沉澱一番將其分享出來，與不同的人交流看看是否還有思考不全面以及迫於見識無法觸及的細節，這也是上面所說的『分享』。

我們接著往下思考，工具的產生必定是由於生產的需要，將視角拉伸一下，在前端飛速發展的這幾年中，工具、框架、理論層出不窮，但唯一不變的一點就是這所有的嘗試的初衷都是希望將前端開發推向高效率、高質量、高穩定性、高可維護性的方向發展，其實也就是大家一致所倡導的『優雅』以及『工程化』。基於這樣的出發點，就可以跳出『為了學習工具而學習工具』的怪圈，我們學習任何工具的初衷都是為了更優雅地解決實際問題的，畢竟工具本身就具備不同的複雜度。

並且，在經歷過這些階段之後，轉過頭就會發現，大多數我們以前在意的基礎知識，已經在無形中都補了上來，這時候我們再進行查漏補缺就行了。

那麼最後，就是行動起來了，在編程這個領域，唯有不斷實踐，才能修成正果。

願我所說能幫助到題主及有需要的人，路漫漫其修遠兮，與君共勉~

---

若無法簡單解釋一事物 那就是沒真懂它

你看見的技術文章多是糊塗人寫的大坨屎

---

推薦閱讀：