ReactJS

ReactJS 是 Facebook 推出的 JavaScript 函式庫屡久，若以 MVC 框架來看，React 定位是在 View 的范疇爱榔。在 ReactJS 0.14 版之后被环，ReactJS 更把原先處理 DOM 的部分獨(dú)立出去（react-dom），讓 ReactJS 核心更單純详幽，也更符合 React 所倡導(dǎo)的 Learn once, write everywhere 的理念筛欢。事實(shí)上，ReactJS 本身的 API 相對(duì)單純唇聘，但由于整個(gè)生態(tài)系非常龐大版姑，因此學(xué)習(xí) React 卻是一條漫長(zhǎng)的道路。此外迟郎，當(dāng)你想把 React 應(yīng)用在你的應(yīng)用程式時(shí)剥险，你通常必須學(xué)習(xí)整個(gè) React Stack 才能充分發(fā)揮 React 的最大優(yōu)勢(shì)。

JSX

事實(shí)上宪肖，JSX 并非一種全新的語言表制，而是一種語法糖（Syntatic Sugar），一種語法類似 XML 的 ECMAScript 語法擴(kuò)充控乾。在 JSX 中 HTML 和組建這些元素標(biāo)簽的程式碼有緊密的關(guān)系么介，這和過去我們強(qiáng)調(diào) HTML、JavaScript 分離的觀念有很大不同蜕衡。當(dāng)然壤短，你可以選擇不要在 React 使用 JSX，不過相信我衷咽，當(dāng)你真正開始撰寫 React 組件（Component）時(shí)鸽扁，你會(huì)很慶幸有 JSX 真好蒜绽。

NPM

NPM（Node Package Manager）是 Node.js 下的主流套件管理工具镶骗。在 NPM 上有非常多的套件，可以讓你不用再重造輪子躲雅，更可以讓你可以輕松用指令管理不同的套件鼎姊。由于 NPM 主要是基于 CommonJS 的規(guī)范，通常必須搭配 Browserify 這樣的工具才能在前端使用 NPM 的模組相赁。然而因 NPM 是基于 Nested Dependency Tree相寇，不同的套件有可能會(huì)在引入依賴時(shí)會(huì)引入相同但不同版本的套件，造成檔案大小過大的情形钮科。這和另一個(gè)套件管理工具 Bower 專注在前端套件且使用 Flat Dependency Tree（讓使用者決定相依的套件版本）是比較不同的地方唤衫。

ES6+

ES6+ 系指 ES6（ES2015）和 ES7 的聯(lián)集，在 ES6+ 新的標(biāo)準(zhǔn)當(dāng)中引入許多新的特性和功能绵脯，彌補(bǔ)了過去 JavaScript 被詬病的一些特性佳励。由于未來 React 將以支援 ES6+ 為主休里，因此直接學(xué)習(xí) ES6+ 用法是相對(duì)好的選擇，本書的所有范例也將會(huì)以 ES6+ 撰寫赃承。

Babel

由于并非所有瀏覽器都支援 ES6+ 語法妙黍，所以透過 Babel 這個(gè) JavaScript 編譯器（可以想成是翻譯機(jī)或是翻譯蒟篛）可以讓你的 ES6+ 、JSX 等程式碼轉(zhuǎn)換成瀏覽器可以看得懂的語法瞧剖。通常會(huì)在資料夾的 root 位置加入 .babelrc 進(jìn)行轉(zhuǎn)譯規(guī)則 preset 和引用外掛（plugin）的設(shè)定拭嫁。

JavaScript 模組化開發(fā)

隨著 Web 應(yīng)用程式的復(fù)雜性提高，JavaScript 模組化開發(fā)已經(jīng)成為必然的趨勢(shì)抓于，以下簡(jiǎn)單介紹 JavaScript 模組化的相關(guān)規(guī)范做粤。事實(shí)上，在一開始沒有官方定義的標(biāo)準(zhǔn)時(shí)出現(xiàn)了各種社群自行定義的規(guī)范和實(shí)踐捉撮。

1. CDN-Based

   也就是最傳統(tǒng)的 <script> 引入方式驮宴，然而使用這種方式雖然簡(jiǎn)單方便，但在開發(fā)實(shí)際中大型應(yīng)用程式時(shí)會(huì)產(chǎn)生許多弊端：

   • 全域作用域容易造成變數(shù)污染和沖突
   • 文件只能依照 <script> 順序載入呕缭，不具彈性
   • 在大型專案中各種資源和版本難以維護(hù)
   • 必須由開發(fā)者自行判斷模組和函式庫之間的依賴關(guān)系

2. AMD

   Asynchronous Module Definition 簡(jiǎn)稱 AMD堵泽，為非同步載入模組的規(guī)范，其在宣告時(shí)模組時(shí)即需定義依賴的模組恢总。AMD 常用于瀏覽器端迎罗，其最著名的實(shí)踐為 RequireJS

   基本格式：

   define(id?, dependencies?, factory);
   

3. CommonJS

   CommonJS 規(guī)范是一種同步模組載入的規(guī)范。以 Node.js 其遵守 CommonJS 規(guī)范片仿，使用 require 進(jìn)行模組同步載入纹安，并透過 exports、module.exports 來輸出模組砂豌。主要實(shí)現(xiàn)為 Node.js 伺服器端的同步載入和瀏覽器端的 Browserify厢岂。

4. CMD

   CMD 全稱為 Common Module Definition，其規(guī)范和 AMD 類似阳距，但相對(duì)簡(jiǎn)潔塔粒，卻又保持和 CommonJS 的兼容性。其最大特色為：依賴就近筐摘，延遲執(zhí)行卒茬。主要實(shí)現(xiàn)為：Sea.js。

5. UMD

   Universal Module Definition 是為了要兼容 CommonJS 和 AMD 所設(shè)計(jì)的規(guī)范咖熟，希望讓模組能跨平臺(tái)執(zhí)行圃酵。

6. ES6 Module

   ECMAScript6 的標(biāo)準(zhǔn)中定義了 JavaScript 的模組化方式，讓 JavaScript 在開發(fā)大型復(fù)雜應(yīng)用程式時(shí)上更為方便且易于管理馍管，亦可以取代過去 AMD郭赐、CommonJS 等規(guī)范，成為通用于瀏覽器端和伺服器端的模組化解決方案确沸。但目前瀏覽器和 Node 在 ES6 模組支援度還不完整捌锭，大部分情況需要透過 Babel 轉(zhuǎn)譯器進(jìn)行轉(zhuǎn)譯躬存。

Webpack/Browserify + Gulp

隨著網(wǎng)頁應(yīng)用程式開發(fā)的復(fù)雜性提升，現(xiàn)在的網(wǎng)頁往往不單只是單純的網(wǎng)頁舀锨，而是一個(gè)網(wǎng)頁應(yīng)用程式（WebApp）岭洲。為了管理復(fù)雜的應(yīng)用程式開發(fā)，此時(shí)模組化開發(fā)方法便顯得日益重要坎匿，而理想上的模組化開發(fā)工具一直是前端工程的很大的議題盾剩。Webpack 和 Browserify + Gulp 則是進(jìn)行 React 應(yīng)用程式開發(fā)常用的開發(fā)工具，可以協(xié)助進(jìn)行自動(dòng)化程式碼打包替蔬、轉(zhuǎn)譯等重復(fù)性工作告私，提升開發(fā)效率。本書范例主要會(huì)搭配 Webpack 進(jìn)行開發(fā)承桥。

1. Webpack

   Webpack 是一個(gè)模組打包工具（module bundler）驻粟，以下列出 Webpack 的幾項(xiàng)主要功能：

   • 將 CSS、圖片與其他資源打包
   • 打包之前預(yù)處理（Less凶异、CoffeeScript蜀撑、JSX、ES6 等）的檔案
   • 依 entry 文件不同剩彬，把 .js 分拆為多個(gè) .js 檔案
   • 整合豐富的 Loader 可以使用（Webpack 本身僅能處理 JavaScript 模組酷麦，其余檔案如：CSS、Image 需要載入不同 Loader 進(jìn)行處理）

2. Browserify

   如同官網(wǎng)上說明的：Browserify lets you require('modules') in the browser by bundling up all of your dependencies.喉恋，Browserify 是一個(gè)可以讓你在瀏覽器端也能使用像 Node 用的 CommonJS 規(guī)范一樣沃饶，用輸出（export）和引用（require）來管理模組。此外轻黑，也能讓前端使用許多在 NPM 中的模組糊肤。

3. Gulp

   Gulp 是一個(gè)前端任務(wù)工具自動(dòng)化管理工具（Task Runner）。隨著前端工程的發(fā)展氓鄙，我們?cè)陂_發(fā)前端應(yīng)用程式時(shí)有許多工作是必須重復(fù)進(jìn)行馆揉，例如：打包文件、uglify玖详、將 LESS 轉(zhuǎn)譯成一般的 CSS 的檔案把介，轉(zhuǎn)譯 ES6 語法等工作勤讽。若是使用一般手動(dòng)的方式蟋座，往往會(huì)造成效率的低下，所以透過像是 Grunt脚牍、Gulp 這類的 Task Runner 不但可以提升效率向臀，也可以更方便管理這些任務(wù)。由于 Gulp 是透過 pipeline 方式來處理檔案诸狭，在使用上比起 Grunt 的方式直觀許多券膀，所以這邊我們主要討論的是 Gulp君纫。

ESLint

ESLint 是一個(gè)提供 JavaScript 和 JSX 的程式碼檢查工具，可以確保團(tuán)隊(duì)的程式碼品質(zhì)芹彬。其支援可插拔的特性蓄髓，可以根據(jù)需求在 .eslintrc 設(shè)定檢查規(guī)則。目前主流的檢查規(guī)則會(huì)使用 Airbnb 所釋出的 Airbnb React/JSX Style Guide舒帮，在使用上需先安裝 eslint-config-airbnb 等套件会喝。

React Router

React Router 是 React 中主流使用的 Routing 函式庫，透過 URL 的變化來管理對(duì)應(yīng)的狀態(tài)和組件玩郊。若開發(fā)不刷頁的單頁式（single page application）的 React 應(yīng)用程式通常都會(huì)需要用到肢执。

Flux/Redux

Flux 是一個(gè)實(shí)現(xiàn)單向流的應(yīng)用程式資料架構(gòu)（architecture），同樣是由 Facebook 推出译红，并和 React 專注于 View 的部份形成互補(bǔ)预茄。而由 Dan Abramov 所開發(fā)的 Redux 被 React 開發(fā)社群認(rèn)為是 Flux-like 更優(yōu)雅的作法，也是目前主流搭配 React 的狀態(tài)（State）管理工具侦厚。讓你在開發(fā)復(fù)雜的應(yīng)用程式時(shí)可以更方便管理你的狀態(tài)（state）耻陕。

ImmutableJS

ImmutableJS，是一個(gè)能讓開發(fā)者建立不可變資料結(jié)構(gòu)的函式庫刨沦。建立不可變（immutable）資料結(jié)構(gòu)不僅可以讓狀態(tài)可預(yù)測(cè)性更高淮蜈，也可以提升程式的效能。

Isomorphic JavaScript

Isomorphic JavaScript 是指前后端（Client/Server）共用相同部分的程式碼已卷，讓 JavaScript 應(yīng)用可以同時(shí)執(zhí)行在瀏覽器端和伺服器端梧田，在 React 中可以透過伺服器端渲染（server side rendering）靜態(tài) HTML 的方式達(dá)到 Isomorphic JavaScript 效果，讓 SEO 和執(zhí)行效能更加提升并讓前后端共用程式碼侧蘸。而另一個(gè)常一起出現(xiàn)的 Universal JavaScript 一般定義更為廣泛裁眯，系指可以運(yùn)行在不同環(huán)境下的 JavaScript Code，并不局限于瀏覽器和伺服器端讳癌。但要留意的是在 Github 和許多技術(shù)文章的分享上會(huì)把兩者定義為同一件事情穿稳。

React 測(cè)試

Facebook 本身有提供 Test Utilities，但由于不夠好用晌坤，所以目前主流開發(fā)社群比較傾向使用 Airbnb 團(tuán)隊(duì)開發(fā)的 enzyme逢艘，其可以與市面上常見的測(cè)試工具（Mocha、Karma骤菠、Jest 等）搭配使用它改。其中 Jest 是 Facebook 所開發(fā)的單元測(cè)試工具，其主要基于 Jasmine 所建立的測(cè)試框架商乎。Jest 除了支援 JSDOM 外央拖，也可以自動(dòng)模擬 (mock) 透過 require() 進(jìn)來的模組，讓開發(fā)者可以更專注在目前被測(cè)試的模組中。

React Native

React Native和過去的 Apache Cordova 等基于 WebView 的解決方案比較不同鲜戒，它讓開發(fā)者可以使用 React 和 JavaScript 開發(fā)原生應(yīng)用程式（Native App）专控，讓 Learn once, write anywhere 理想變得可能。

GraphQL/Relay

GraphQL 是 Facebook 所開發(fā)的資料查詢語言（Data Query Language）遏餐，主要是想解決傳統(tǒng) RESTful API 所遇到的一些問題伦腐，并提供前端更有彈性的 API 設(shè)計(jì)方式。Relay 則是 Facebook 提出搭配 GraphQL 用于 React 的一個(gè)宣告式數(shù)據(jù)框架失都，可以降低 Ajax 的請(qǐng)求數(shù)量（類似的框架還有 Netflix 推出的 Falcor）蔗牡。但由于目前主流的后端 API 仍以傳統(tǒng) RESTful API 設(shè)計(jì)為主，所以在使用 GraphQL 上通常會(huì)需要比較大架構(gòu)設(shè)計(jì)的變動(dòng)嗅剖。因此本書則是把 GraphQL/Relay 介紹放到附錄的部份辩越，讓有興趣的讀者可以自行參考體驗(yàn)一下。

總結(jié)

以上就是讀者在 React 生態(tài)系游走時(shí)會(huì)遇到的各種關(guān)卡信粮，也許有些初學(xué)者會(huì)對(duì)于這樣龐大的體系所嚇到黔攒，放棄學(xué)習(xí) React 這項(xiàng)革新性技術(shù)的機(jī)會(huì)。不過別擔(dān)心强缘，接下來筆者將帶領(lǐng)讀者按圖索驥督惰，依序介紹整個(gè) React 生態(tài)系的各種技術(shù)，一步步帶領(lǐng)大家用 React 實(shí)作出生活中會(huì)用到的應(yīng)用程式旅掂。