目錄

• 引言
• Web前端
• 前端三座大山
• 後端中的前端
• 障礙
• 為什麼學習前端？
• 為什麼要學習React？
• 正文
• 1. CSS佈局
• 2. JavaScript ES6
• 3. Npm/Yarn
• 4. 腳手架
• 5. React教程
• 6. Redux
• 7. React-Redux
• 8. React-Router
• 9. Promise
• 10. Fetch API
• 11. React-Native
• 12. Webpack

引言

Web前端

本文討論的前端僅代表Web前端

前端三座大山

前端基礎無非就是HTML、CSS、JavaScript，但凡是程式設計師，說對此不瞭解幾乎是不可能的，這樣想想，看來我們都具備成為前端程式設計師的潛質（偷笑）。

後端中的前端

Web開發中，難道後端程式設計師就不會接觸前端內容了嗎，當然不是！Web後端中有個叫做模板引擎的技術 —— 即在服務端將資料渲染到HTML頁面的技術，該技術是Web後端程式設計師的基本技能之一。

例如：Java中的JSP、Thymleaf、FreeMarker

障礙

對於後端程式設計師，想要突破到前端的最大障礙就是佈局Layout，畢竟不是專職做前端的，而且很多公司，即使前後端尚未分離（使用模板引擎），也要由專職前端先切好Html頁面，再由後端改造成模板引擎需要的形式，步驟很繁瑣，事倍功半，也因此導致後端程式設計師很少能對佈局Layout或者說CSS進行系統的學習。

依賴於模稜兩可的知識體系，最終導致大部分後端程式設計師不願意去寫頁面，不是因為不懂前端基礎，而是因為大部分時間都可能浪費在佈局Layout

為什麼學習前端？

當然，這裡我們所謂“學習”是指“系統的去學習”。原因有三：

• 避免有求於人，比如說自己突然有了個好的Idea，正要去實現它，想到要浪費大量時間去搞佈局，還不如去啃中介軟體原始碼；或者想要構建自己的部落格，苦於佈局，最終還是入坑到現成的靜態部落格構建工具。
• 大前端來了，前端更像後端，Node.js來了，ES6來了，前端有了自己的打包工具Webpack，有了自己的包管理工具npm\yarn，有了成熟的JavaScript框架react、vue、angular，有了腳手架，有了class、import、export和Lamda（箭頭表示式）。前端的生態更像後端了，所以學習起來可以更加系統，不再那麼違和，更容易上手。
• 提高價值，Web開發——中介軟體——大資料——機器學習，這好像更像是後端的進擊路線，但是學習前端與它們相比，門檻和所需時間都不值一提，與其每次都為它所累，不如隨便拿點時間把它幹掉，一勞永逸。

為什麼要學習React？

其特點就不再贅述，至少生態圈和使用者數量表現給我們的是，Angular將死，React與Vue同臺競技——《React還是Vue：你該如何選擇？》

至於筆者為什麼要學習React？

• 身為後端，我受夠了模板（有人也因此更喜歡Vue），而Vue恰好是這樣做的，相比React中只需要熟悉JavaScript ES6+Html的JSX寫法，Vue需要你重新學習更多的HTML擴充套件，類似於下面的v-on:click：

  <button v-on:click="reverseMessage">Reverse Message</button>
  

• React-Native，筆者的女朋友是做Android前端的，為了以後能輔助到她開發原生APP，自然像React這種同時適用於Web端和原生APP的框架，成為了最佳選擇

正文

筆者是一個文件控，但凡有詳盡的官方文件，都會對它忠貞不渝，不得不說在學會使用《Google翻譯》之前，真的是學了不少專業單詞啊，，，給出兩個依賴官方文件的原因：

• 權威性，官方文件不像技術部落格，不摻雜主觀見解；
• 實時性，尤其像React這種不斷更新的技術，官方教程以外的個人教程，很快就過時了，因為其中有些技術可能已經被遺棄或替代，所以不建議觀看個人教程，例如：阮一峰阮老師的《React 入門例項教程》（其實剛開始我也看過，，前車之鑑）

為了更加方便讀者學習，在以下路線中，同樣會給出貼近官方文件的中文文件或部落格，其實它們也大多數是學習官方文件後，翻譯或總結得到！！

1. CSS佈局

最初Html頁面的佈局由Float、Position來實現，再後來出現了display:table表格佈局，但是表格佈局存在效能問題，直到現在我們擁有了兩種更加方便高效的佈局方式，我們可以根據相容性和頁面複雜程度來選擇：
Flex佈局：

• 官方：https://developer.mozilla.org/en-US/docs/Glossary/Flex
• 中文：http://www.runoob.com/w3cnote/flex-grammar.html

Grid佈局：

• 官方：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• 中文：https://www.jianshu.com/p/d183265a8dad

2. JavaScript ES6

React中JSX語法無非就是HTML+JavaScript雜在一起寫，而ES6是JavaScript的新標準，從很早開始React中的JavaScript就已經開始向ES6靠攏，直到現在（v16.6.3）已經完全有ES6來寫。

• 官方：https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
• 中文：http://www.runoob.com/js/js-tutorial.html
• 公開課：https://www.imooc.com/learn/955

3. Npm/Yarn

包管理工具。就像Java中Maven、Gradle，Python裡的Pip、Conda，可以直接從倉庫中下載公共的程式碼，避免重複造輪子，是大前端時代的必備工具。

Yarn筆者沒用過，不做贅述，Npm是Node環境下的包管理工具，安裝了Node環境就安裝了Npm，使用時要注意版本問題，不定時更新就好

• 官方：https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
• 映象：https://npm.taobao.org/

4. 腳手架

所謂腳手架，顧名思義就是一個架子，可以直接拿來用。在沒有腳手架前，大前端專案就需要我們自己去建立檔案結構，整合某些必要工具，建立必要配置檔案，這些都是重複性的但又必不可少的步驟，就像我們在IDE中新建Android專案，新建SpringBoot專案，這裡可以理解成新建React專案。

Web端（PC或手機）腳手架—— Create-React-App：

• Github：https://github.com/facebook/create-react-app
• 官方文件：https://facebook.github.io/create-react-app/docs/getting-started

React-Native（原生APP）腳手架—— Expo

• 官方：https://expo.io/learn

5. React教程

• 官方教程：https://reactjs.org/tutorial/tutorial.html

• 官方主要概念：https://reactjs.org/docs/hello-world.html

• 官方高階指導：https://reactjs.org/docs/context.html

• 中文教程：https://react.docschina.org/tutorial/tutorial.html

• 中文主要概念：https://react.docschina.org/docs/hello-world.html

• 中文高階指導：https://react.docschina.org/docs/jsx-in-depth.html

• 公開課：https://www.imooc.com/learn/1045

6. Redux

隨著 JavaScript 單頁應用開發日趨複雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。考慮一些來自前端開發領域的新需求，如更新調優、服務端渲染、Websocket長連線、路由跳轉前請求資料等等。前端開發者正在經受前所未有的複雜性，難道就這麼放棄了嗎？當然不是，我們可以使用Redux來解決。

• 官方：https://redux.js.org/
• 中文：https://www.redux.org.cn/
• 阮一峰教程（很適合入門）：
  • 基本用法：
    http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
  • 中介軟體與非同步操作 ： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
  • React-Redux 的用法：
    http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

7. React-Redux

為了方便使用，Redux 的作者封裝了一個 React 專用的庫 React-Redux。

• 官方：https://react-redux.js.org/docs/introduction/quick-start
• 中文：
  • http://cn.redux.js.org/docs/basics/UsageWithReact.html
  • https://www.redux.org.cn/docs/react-redux/

8. React-Router

React Router 是一個基於 React 之上的強大路由庫，它可以讓你嚮應用中快速地新增檢視和資料流，同時保持頁面與 URL 間的同步。如果不知道什麼是路由？可以谷歌

• 中文：
  • https://www.redux.org.cn/docs/advanced/UsageWithReactRouter.html
  • http://react-guide.github.io/react-router-cn/docs/Introduction.html
• 官方：https://reacttraining.com/react-router/web/api/Route
• GitHub：https://github.com/ReactTraining/react-router

9. Promise

Promise物件表示非同步操作的最終完成（或失敗）及其結果值。

在JavaScript的世界中，所有程式碼都是單執行緒執行的。由於這個“缺陷”，導致JavaScript的所有網路操作，瀏覽器事件，都必須是非同步執行。非同步執行可以用回撥函式實現，但是寫法顯得冗雜，所以引入了Promise —— 古人云：“君子一諾千金”，這種“承諾將來會執行”的物件在JavaScript中稱為Promise物件。

• 官方：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• 中文：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

10. Fetch API

Fetch API提供了一個用於獲取資源的介面（包括整個網路）。 對於使用過XMLHttpRequest的人來說，這似乎很熟悉，但新API提供了更強大，更靈活的功能集。不同於$.Ajax()、Axios，Fetch是HTML5的API，是標準，是未來的趨勢。

• 官方：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• 中文：https://reactnative.cn/docs/network/

11. React-Native

React Native是一個使用Javascript構建移動端原生應用程式（iOS，Android）的庫。 它與React.js相同，只是不使用Web元件，而是使用原生元件。 如果你學過React.js，很快就能上手React Native，反之亦然。到這裡我們已經基本掌握了React生態，所以可以很容易入坑React-Native了

• 官方：https://facebook.github.io/react-native/docs/getting-started
• 中文：https://reactnative.cn/docs/getting-started/

12. Webpack

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(static module bundler)。腳手架已經為我們整合並配置了Webpack，但為了某些高階特性，我們仍然有必要深入瞭解下Webpack。

• 什麼是Webpack？
  WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
• 為什要使用WebPack？
  今的很多網頁其實可以看做是功能豐富的應用，它們擁有著複雜的JavaScript程式碼和一大堆依賴包。為了簡化開發的複雜度，前端社群湧現出了很多好的實踐方法
  • a:模組化，讓我們可以把複雜的程式細化為小的檔案;
  • b:類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能能裝換為JavaScript檔案使瀏覽器可以識別；
  • c:scss，less等CSS前處理器…

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的檔案往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現提供了需求。

• 官方：https://webpack.js.org/concepts/
• 中文：https://webpack.docschina.org/concepts/
• 公開課：https://www.imooc.com/learn/802