1、REACT概述

1.前端/react概述 《從零react》

1.前端工 程概述

 Web跨平臺、跨瀏覽 器的應用開發場景

  網頁瀏覽器（Web Browser）

  經過 CLI 指令去操做的 Headless 瀏覽器（Headless　Application）

   如：phantomJS、CasperJS 等

  運做在 WebView 瀏覽器核心 （WebView Application）的應用

   如：Apache Cordova、Electron、NW.js 等行動、桌面應用程序開發

  原生應用程序（Native Application） 經過 Web 技術撰寫原生應用程序

   如：React Native、Native Script 等

 前端技 術包括

  基礎：HTML、CSS、JavaScript

  Js框架和函數庫： Backbone、Ember、Angular、React、Vue

 革新性 Web觀念

  Virtual DOM

  Web Component

  更直覺的定義式 UI 設計

  更優雅地實現 Server Rendering

 學習目標

  從零開始真的動手用 React 開發跨平臺應用程序

2.React 生態

 定義

  React 是專一於 UI（View）的 Js 函數庫（Library）

 React 生態系（ecosystem） 體現的現代化 Web 開發觀念

  模塊化

  ES6+

  Webpack

  Babel

  ESLint

  函數式程序設計等

 ReactJS

   MVC 框架來看，定位是View的範疇

  ReactJS 0.14 版以後，把處理DOM部分獨立出去（react-dom）

 JSX

  JSX是一種語法糖（Syntatic Sugar）

  相似 XML 的 ECMAScript 語法擴充

  在 JSX 中 HTML 和組建這些元素標籤的程序碼有緊密的關係，這和過去咱們強調 HTML、Js 分離的觀念大不相同

  可不用，但建議用，在編寫React 元件（Component）時有巨大優點

 NPM

  即，Node Package Manager，是 Node.js 下的主流包管理工具

  其上有很是多包，可不用重複造輪子，更可輕鬆用指令管理不一樣包

  基於 CommonJS 的規範，一般必須搭配 Browserify 這樣的工具才能在前端使用 NPM 的模塊

  NPM 基於嵌套依賴關係（Nested Dependency Tree），不一樣的包有可能會在引入依賴時會引入相同但不一樣版本的包，形成檔案大小過大的情形

  另外一個包管理工具 Bower 專一在前端包且使用 Flat Dependency Tree（讓使用者決定相依的包版本）

 ES6+

  ES6+ 係指 ES6（ES2015）和 ES7 的聯集，在 ES6+ 新的標準當中引入許多新的特性和功能，彌補了過去 Js 被詬病的一些特性

  直接學習 ES6+ 用法是相對好的選擇

 Babel

  經過 Babel 這個 Js 編譯器（可想成翻譯機）可讓你的 ES6+ 、JSX 等程序碼轉換成 [部分不支持的瀏覽器] 能夠看的懂得語法

  一般會在數據夾的 root 位置加入 .babelrc 進行轉譯規則 preset 和引用外掛（plugin）的設定

 Js模塊 化開發

  CDN-Based

   即傳統的 <script> 引入方式

   開發中大型 應用程序弊端

1     全局做用域容易形成變數污染和衝突

2     文件只能依照 <script> 順序載入，不具彈性

3     在大型專案中各類資源和版本難以維護

4     必須由開發者自行判斷模塊和函數庫之間的依賴關係

  AMD

   非同步載入模塊的規範（Asynchronous Module Definition ）

   其在定義時模塊時即需定義依賴的模塊

   經常使用於瀏覽器端，如RequireJS

   基本格式：define(id?, dependencies?, factory);

  CommonJS

   是一種同步模塊載入的規範

   以 Node.js 其遵照 CommonJS規範

   用 require 進行模塊同步載入

   經過exports 、 module.exports 來輸出模塊

   主要實現： Node.js 服務器端的同步載入和瀏覽器端的 Browserify

  CMD

   即公共模塊定義（ Common Module Definition）

   其規範和 AMD 相似，但相對簡潔，卻又保持和 CommonJS 的兼容性

   最大特點爲：依賴就近，延遲執行

   主要實現：Sea.js

  UMD

   Universal Module Definition 爲要兼容 CommonJS 和 AMD 所設計的規範，但願讓模塊能跨平臺執行

  ES6 Module

   ECMAScript6 的標準中定義了 Js 的模塊化方式

   優點

    js在開發大型複雜應用程序時,更方便且易管理

    能夠取代過去 AMD、CommonJS 等規範，成通用於瀏覽器端和服務器端的模塊化解決方案

   缺點：目前瀏覽器和 Node 在 ES6 模塊支持度還不完整，大部分狀況須要經過 Babel轉譯器進行轉譯

 Webpack Browserify Gulp

  是進行 React 應用程序開發經常使用的開發工具

  功能：協助進行自動化程序碼打包、轉譯等重複性工做，提高開發效率

  本書：主要搭配 Webpack 進行開發

  Webpack

   是一個模塊打包工具（module bundler）

   功能

1     將 CSS、圖片與其餘資源打包

2     打包以前預處理（Less、CoffeeScript、JSX、ES6 等）的檔案

3     依 entry 文件不一樣，把 .js 分拆爲多個 .js 檔案

4     整合豐富的 Loader 可使用 （Webpack 自己僅能處理 JavaScript 模塊，其他檔案如：CSS、Image 須要載入不一樣 Loader 進行處理）

  Browserify

   是一個可讓你在瀏覽器端也能使用像 Node 用的 CommonJS 規範同樣，用輸出（export）和引用（require）來管理模塊

   也能讓前端使用許多在 NPM中的模塊

  Gulp

   是一個前端任務工具自動化管理工具（Task Runner）

   具體解釋：解決重複性工做，如，打包文件、uglify、將 LESS 轉譯成通常的 CSS 的檔案，轉譯 ES6 語法等工做

   優點

    提升效率

    方便管理這些任務

   選用緣由：Gulp 是經過 pipeline 方式來處理檔案，在使用上比起 Grunt 的方式直觀

 ESLint

  是一個提供 JavaScript 和 JSX 的程序碼檢查工具，可確保團隊的程序碼品質

  優點：支持可插拔的特性，可根據需求在 .eslintrc 設定檢查規則

  主流：目前檢查規則會使用 Airbnb 所發佈的 Airbnb React/JSX Style Guide，在使用上需先安裝 eslint-config-airbnb 等包

 React Router

  做用：是 React 中主流使用的 Routing 函數庫，經過 URL 的變化來管理對應的狀態和元件。

  應用範圍：開發不刷頁的單頁式（single page application）的 React 應用程序一般都會須要用到

 10.Flux/Redux

  Flux

   是一個實現單項流的應用程序數據架構（architecture）

   和 React 專一於 View 的部份造成互補｛facebook開發｝

  Redux

   被認爲是Flux-like 更優雅的做法

   主流搭配React 的狀態（State）管理工具

   做用：在開發複雜的應用程序時能夠更方便管理你的狀態（state）

 11.ImmutableJS

  是一個能讓開發者創建不可變數據結構的函數庫

  優點

   創建不可變（immutable）數據結構不只可讓狀態可預測性更高

   也能夠提高程序的性能

 12. Isomorphic JavaScript

  指先後端（Client/Server）共用相同部分的程序碼，讓js 應用能夠同時執行在瀏覽器端和服務器端

  react實現

   在 React 中能夠經過服務器端渲染（server side rendering）靜態 HTML 的方式達到 Isomorphic JavaScript 效果，讓 SEO 和執行性能更加提高並讓先後端共用程序碼

  Universal JavaScript

   與Isomorphic JavaScript相似，但定義更爲普遍，

   優點：係指能夠運行在不一樣環境下的 JavaScriptCode，並不侷限於瀏覽器和服務器端

   注意：在 Github 和許多技術文章的分享上會把二者定義爲同一件事情

 13.React 測試

  Facebook 自己有提供 Test Utilities，但不夠好用

  主流：用enzyme，由 Airbnb 團隊開發

  enzyme 優點

   可與市面上常見測試工具（Mocha、Karma、Jest 等）搭配使用

   注：jest

    Jest：是 Facebook 所開發的單元測試工具，其主要基於 Jasmine 所創建的測試框架

    Jest 除了支持 JSDOM 外，也能夠自動模擬 (mock) 經過require() 進來的模塊，讓開發者能夠更專一在目前被測試模塊中

 14.React Native

  它讓開發者可使用 React 和 JavaScript 開發原生應用程序（Native App） (讓Learn once, write anywhere 理想變得可能)

  和過去 Apache Cordova 等基於 WebView 的解決方案不一樣

 15.GraphQL/Relay

  GraphQL

   是 Facebook 所開發的數據查詢語言（Data Query Language）

   解決

    主要是想解決傳統 RESTful API 所遇到的一些問題

    並提供前端更有彈性的 API 設計方式

  Relay

   是 Fb提出搭配 GraphQL 用於 React 的一個定義式數據框架

   做用

    能夠下降 Ajax 的請求數量（相似框架：Netflix 推出的 Falcor）

   注： 目前主流的後端 API 仍以傳統 RESTful API 設計爲主，因此在使用 GraphQL 上一般會須要比較大架構設計的變更。所以本書則是把 GraphQL/Relay 介紹放到附錄的部份，讓有興趣的讀者能夠自行參考體驗一下。