React 入坑雜談——寫給萌新

據說，React.js 很火很流行，出於對新鮮事物的好奇，或是新項目的需求，你決定對 React.js 一探究竟。

你自信滿滿，覺的 Reac 無非就是一個和 Jquery 同樣的 JS 庫，做爲已經精通 HTML 和 CSS，而且有長達兩年的 Jquery 使用經驗的你來講，學好 React 不在話下，因而早上 08:00 你鬥志昂揚的開始了入門學習...

08:00 am

你火燒眉毛點開 react 官網的 Getting Started，果不其然，按照教程，只須要在頁面的 head 內引入三個 js 文件，就能夠順利的 hello world 了。

寫完 hello，world ，你感受不錯，出於對新事物的好奇，你注意到引入的三個 js 文件中，前兩個與 react 有關（廢話，前兩個文件都包含react），這沒毛病，可第三個是什麼鬼？裏面連個 react 的關鍵字都木有，只有一個叫 babel-core 的東東。

二話不說，直接谷歌，以後你瞭解到，最後那個 JS 文件是用來轉譯 JSX 文件的。因而你花了十分鐘，大體瞭解了JSX——它是一種語法糖，容許你在 JS 中直接寫 HTML 標籤，而這也是React的官方推薦寫法。

不過你又注意到，babel 不只能轉譯 JSX 文件，還能轉譯 ES6 到 ES5，而且你對 ES6（下一代js規範） 早有耳聞，不少前端大牛都在用，React 官方也強烈推薦使用ES6進行react開發。你覺的本身要與時俱進，因而你花30分鐘掌握ES6/ES2015核心內容（上），看完感受不錯，又花30分鐘掌握ES6/ES2015核心內容（下）。看完以後又覺的 ES6 實在是好，又收藏了阮一峯的ECMAScript 6 入門做爲工具書，以備不時之需。

10:00 am

兩個小時就寫了個 hello,world，感受有點慢，不過好在瞭解了 JSX 和學習點 ES6，接下來就要加快速度學習React了，你暗暗鼓勵本身。

繼續學習！看到下一行，一個大大的標題引入眼簾——Using React with npm，這 npm 莫非也是個好東西？否則怎麼會大標題推薦使用呢，你覺的不能錯過這個知識點，因而你花了一個小時瞭解了 npm 的相關知識，而且知道了使用 npm , 必需要安裝 node ，由於 node 附帶 npm，而且 node 能夠爲你提供一個本地服務器極大方便前端開發。一氣呵成，你又花了一小時簡單學習了下 node。

12:00 am

學了一上午，你感受腦殼有點蒙，是時候吃碗麪條犒勞下本身了。

14:00 pm

吃完午餐，睡了個午覺，你精神抖擻，又沏了杯茶，眼角餘光無心瞥到網頁上一行字：npm 基於 CommonJS 規範，一般必須搭配 Webpack 這樣的打包工具才能在前端使用 npm 的各類包。你覺的胸口隱隱有些做痛，這怎麼沒完沒了？！還能不能愉快的學習 React 了？？你憤憤不平，可迫不得已，這些技術一環接一環，必須得學，，，因而你花了兩個小時，學習了 webpack。

16:00 pm

在學習 webpack 的過程當中，你瞭解到，如今 React 開發，講究是工程化，模塊化，組件化。要拋棄傳統的 <script> 的引入方式，這是由於：

• 全局做用域容易形成變量污染和衝突

• 文件只能依照 <script> 順序載入，沒有靈活性

• 在大型應用中，各類資源和版本難以維護

• 必須由開發者自行判斷模塊之間的依賴關係

基於此，你決定，你要從前端的農耕時代向工業化邁進，順便把以前學的 es6，npm，webpack串聯起來，來一個高大上的前端構建。

說幹就幹，勤學好搜的你花了兩小時不到就比葫蘆畫瓢的配置了一個集 babel, webpack, react 於一體的小項目，還順手開啓了有熱替換功能的開發模式，以及有打包優化壓縮的產品模式，瞬間逼格滿滿。

18:00 pm

折騰了一天，從一個 hello,world 到另外一個 hello,world，此時你是否...

雖然忙活了一天，好在你解鎖了 React 開發的正確姿式。總的來講，React 的學習曲線是比較陡峭的，涉及知識點較多，對於萌新來講，在對 React 開端構建有個大體瞭解的前提下，你只須要把精力放在如何開發 React 項目上，優秀的 React 腳手架網上不少，本人也有開源的相似的腳手架，歡迎交流學習 React-Study，因此，你徹底不必浪費大量的時間精力在項目配置上。

結語：

不少朋友初學 React，都會被它複雜龐大的體系搞的暈頭轉向，一不當心，就會走上一條，從入門到放棄的不歸路。雖然入門不易，但一旦入門，你很難再回去了，你會離不開這種工程化的開發模式。React 對前端影響能夠說是顛覆性的，它引領了前端界的」文藝復興「，做爲局中人，若是你還感到一絲迷茫，那麼不妨坐下來，先寫個組件壓壓驚。