《基於React的前端工程實戰》大綱，也是筆者心中的前端學習路線圖

本文從屬於筆者的Web 前端入門與最佳實踐。

前幾日偶然接到某出版社編輯大大的私信，邀約看看可否整理出版一本前端方面的書籍，筆者再三肯定即便一本賣不出去（雖然本身確定會買至少一本，或者多買些屯着代替那啥）也不會被打死以後着手準備大綱具體的章節。筆者仍是很惶恐的，畢竟本身的水本身知道。本文是爲書準備的大綱，不過也是筆者心目中的現代前端開發者學習路線圖，即便最終沒法出版筆者也會默默整理出來，但願能幫助到些許童鞋。

不過既然有那麼些機率出版，也很歡迎全部大大給予指教，對於章節內容的選擇，章節目錄的順序，你們以爲還想聊聊的內容均可以歡迎留言或者郵箱：384924552@qq .com。本文的永久地址爲:基於React的前端工程實戰大綱，也是筆者心中的前端學習路線圖。另外筆者前幾日收到某個跨年演講邀請，雖然這幾天爲了畢業論文和項目被虐出翔沒準備，仍是歡迎有興趣的搬個板凳瞅瞅，我給你們講段子。

前言

本書囊括了筆者五年來在前端工程領域的實踐總結，筆者但願對於不一樣等級的開發者都能有所收穫。本書最核心的目標:

• 但願對於沒有經驗的開發者可以在本書選定的最短路徑上快速成爲一名合格的現代前端開發者。每一小節都會講解最基礎的語法或者使用要點，可是不會長篇大論地介紹語法細節這些應該查看文檔的內容。經過簡單的示例快速上手以後，筆者會介紹不少工程當中的具體實踐。可能剛入門的開發者並不能理解這些實踐的意義或者價值，可是首先保證能用，然後在本身的實踐中慢慢回味，逐漸明瞭。

• 而對於有必定前端開發經驗的開發者，本書可以幫你梳理現代紛繁複雜的前端開發情況，探尋百花齊放的工具庫背後蘊藏的設計理念與編程範式，最終融會貫通，造成本身的前端工程化思想與體系。

本書最大的優點在於造成了完整的知識體系結構，讓你合理概括本身學到的知識，將知識放在它該在的地方。另外筆者想強調的是，不管React仍是Vue或者Angular2都是很是優秀的前端框架，使用哪一個框架仍是屬於術的範疇。本書雖然立足於React，可是其中蘊含的設計模式與工程架構能夠通用於任何框架。筆者也着力於不但願受到某個具體框架的太多的束縛，畢竟在這個突飛猛進的前端世界，說不許哪天就落於人後了。

序

第一部分 初窺門徑，看山是山

前端基礎

Hyper Text Markup Language

HTML語法基礎

Semantic HTML

H5

CSS

CSS 語法基礎

盒模型

基於Flexbox的網格佈局

SCSS

CSS 工程實踐

JavaScript

JavaScript 語法基礎

本章節對於JavaScript語法基礎進行簡單介紹，涉及JavaScript/ECMAScript語言的衍化過程，基本的變量定義，變量賦值，變量做用域，常見類型與格式的判斷以及轉換。

JavaScript 數據結構

本章節包含對於基本數值類型、字符串類型、時間與日期類型、數組類型的操做與解釋。

JavaScript 控制流

JavaScript 函數

JavaScript 類與對象

本部分包含對於JavaScript 中Class的使用以及常見的單例模式的編寫介紹。

DOM

元素選擇與操做

事件響應

Ajax

客戶端存儲

簡單的網頁設計規範

本部分會以一步一步來美化網站爲例將上述學到的HTML、CSS與JavaScript的知識加以應用。

經常使用的前端工具庫

jQuery

jQuery 基礎

jQuery 小竅門

jQuery Plugins

你並不須要jQuery

Lodash

Lodash 基礎

你並不須要Lodash

Pattern Library

jQuery UI

BootStrap

Webpack

Webpack語法基礎

經常使用的Webpack插件

Webpack 代碼分割

Webpack

第三章 React 初探

數據流驅動的頁面

本部分主要介紹React設計思想，從命令式編程到聲明式編程的變化，及以jQuery與React實現相同功能的例子對比。

搭建你的腳手架

create-react-app

基於Webpack2的完整腳手架介紹

React組件

組件聲明

組件生命週期

組件樣式

React 事件交互

React 事件綁定與處理

React 拖拽

第五節 React Router

第六節 React 動畫

第三章 React 技術棧

Redux

Flux

Redux設計思想

簡單的Redux實例

MobX

MobX 設計思想

Observable

簡單的MobX實例

第二部分 登堂入室，看山不是山

第五章 深刻JavaScript工程實踐

基於Flow 的 JavaScript 類型檢查

JavaScript 函數式編程

JavaScript 異步編程

Promise

Generator

Async/Await

JavaScript 面向對象

琢磨不透的this

原型鏈與繼承

JavaScript 類的幾種實現方式

JavaScript 數據綁定

髒檢測

ES6 Proxy

JavaScript 性能優化與樣式規範

變量

數據類型

函數

React工程實踐

React 設計模式與樣式指南

High-Order Component

Stateless Functional Component

Pretty Component

React 性能優化

React 組件測試

Jest

Enzyme

第五節 React 打包發佈

包體壓縮

避免XSS漏洞

基於React的Pattern Library

Material UI

antd

第五章 深刻React內部原理

簡單的Virtual DOM實現

React Diff算法

React setState

React Fiber

Virtual DOM Alternatives

前端狀態管理

Redux的得與失

漸進的前端狀態管理

常見的狀態管理模式

合理的狀態設置

第七章 前端性能優化

瀏覽器渲染原理

前端性能評測

資源加載

首頁與關鍵路徑

渲染策略

第八章 前端質量保障

NodeJS

NodeJS 初窺

經常使用NodeJS框架

Express

Koa

服務端渲染

Electron

移動開發

Mobile First

React Native

微信小程序

第三部分 融會貫通，看山仍是山

GUI應用程序架構變遷

MVC

MVP&MVVM

Flux Unidirectional Data Flow

REST 表現層狀態轉化

HTTP

HTTP 協議基礎

HTTP 請求與響應

HTTP 緩存

RESTful API

RESTful API 最佳實踐

REST的不足與GraphQL

第三章 前端工程化

先後端分離與全棧

合理的使用工具

漸進式的工程架構

組件化與Web Components

模塊系統

微服務與微前端

數據可視化

數據可視化範式

常見的數據可視化庫

ECharts

D3.js

Web 安全基礎

第七章 Web的將來

WebAssembly

WebVR