敲不開react，webpack，npm，node的門怎麼辦

轉載自知乎的優秀回答https://www.zhihu.com/question/54440732

授人以魚不如授人以漁。與其教你怎麼學會用 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樹應該如何設計？ - 鬍子大哈的回答 - 知乎 可以一起探討。