前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 React 相關的教程實踐與開源專案的盤點，可以檢視這裡獲得往期清單或者其他盤點篇。
教程實踐
Twitter 宣佈移動 Web 技術棧遷移到 Node.js，Express，React PWA：近日，Twitter 工程師 Nicolas 宣佈 Twitter 幾乎所有的移動流量遷移到了以 Node.js 為基礎的服務中（Today we moved all of Twitter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA.）。在過去的兩年中，Twitter 移動 Web 技術棧主要是基於 Scala，Google Closure Templates 以及少量的 JavaScript。後來 CharlieCroom 開始嘗試將登出服務遷移到 JavaScript 技術棧中，並且進行了約 9 個月的線上測試，效果尚可，因此 Twitter 決定全部遷移到 JavaScript 技術棧中。同時，Twitter Web APP 還支援所謂的 PRPL 正規化：主動推送首屏關鍵資源、僅渲染初始路由、預存其他路由、按需懶載入與建立剩餘路由。
來自 MuseFinder 的 React 元件編寫實踐：該指南來源於 MuseFind 在多年的產品開發中總結而來的 React 實踐經驗，其包含了對於元件宣告方式、樣式類的使用、初始狀態宣告、Props 宣告、方法宣告、Props 結構、裝飾器的使用、函式式元件的宣告等等多個方面。
基於 React 與 Redux Sagas 的許可權驗證應用開發教程：此文中作者深入地介紹瞭如何利用 Redux、Redux Saga、Redux Form、React Router 這些工具開發常見的許可權驗證應用。單獨地使用某個工具似乎沒啥難度，但是在工程應用中將它們較好地組合在一起卻不是件容易事。而本文則是作者從自身工程實踐的角度進行了介紹。
基於 ReactNative 與 MobX 的 Imgur 應用開發教程：此文中作者結合 ReactNative 與 MobX 開發一個展示 Imgur 中圖片的應用，涉及到了如何使用 MobX 進行狀態管理、如何與 RESTful API 進行互動、如何在 ListView 中渲染全屏圖片以及如何監聽裝置狀態等。
在 React 中構建微互動動畫：微互動能夠更好地引導使用者，提升使用者體驗，而文字則是基於 CSS Transitions、react-motion、react-animations 構建可互動的搜尋框。
2017 年 React 與 Redux 學習建議: 此文是作者數年來學習與使用 React 以及 Redux 的感悟，不一定適合純初學者，不過對於有一定基礎概念的很推薦一看。
Twitter Redux Store 探祕：複雜應用的 Store 設計一直是開發中的難點，而作為大型內容社交軟體 Twitter 之前宣佈 Web 移動端逐步遷移到 Node.js、Express、React PWA 架構，本文就是對於 Twitter 的 Redux Store 設計分析與探祕。
React Native 與 Swift 效能對比：作為混合式開發框架，React Native 在執行時仍然會實際呼叫 Objective-C 或者 Java。此文作者同時用 Swift 與 React Native 構建了相同的應用，並且從 CPU、GPU、記憶體使用、電池耗費等多個角度對這二者進行效能分析。結果表明二者效能相差無幾，Swift 在 CPU 佔用略佔優勢，二者的 GPU 佔用不相伯仲，而 React Native 在記憶體上則有一定長處。( suo.im/2MWZnA )
React 與 MobX 開發中的測試驅動開發: 本文對於 React 與 MobX 的基本使用進行了介紹，闡述了為何作者認為 MobX 是個不錯的 Redux 的替代以及如何對 MobX 進行單元測試。( suo.im/2PE2A6 )
基於 React 與 GraphQL 的全棧開發指南：GraphQL 最早由 Facebook 提出以解決複雜多變的查詢問題，彌補 REST 中的不足。它允許介面元件以宣告式獲取資料而忽略後端實現細節。本系列文章是由 Apollo 團隊提供，講解如何基於 React 與 GraphQL 開發應用。( 6me.us/O6p )
React 開發中的 10 個微模式：此文是 Gilbertson 在工作中總結而來的 React 開發中常見的設計模式總結，譬如輸入域的唯一標識分配、CSS 控制等等 。 ( suo.im/42S8Kb )
Airbnb 使用 React 重構搜尋功能的實踐：早在 2015 年，Airbnb 的工程團隊就決定將 React 作為主要的前端開發棧，不過因為其搜尋頁面過於複雜因此直到 2016 年初才開始遷移工作。本文就是 Airbnb 進行程式碼重構的經驗介紹。( 6me.us/2mS )
React Native 中的 FlatList 元件：3 月 1 日開始 ReactNative 中的 FlatList 正式從測試包中移動至正式包中；我們在專案開發中可以使用 FlatList、SectionList、VirtualizedList 來替代傳統的即將被移除的 ListView。( 6me.us/dqiO1 )
ReactNative 效能優化實踐：日前有人表示 React Native 在 Android 上表現不佳，本文則是作者對於潛在的效能問題提出的優化方案。作者首先分析了常見的 Overdraw 問題以及可能的問題源與解決方案，然後介紹了列表中常見的 GPU 渲染瓶頸以及解決方案。( 6me.us/qX63f )
React 中 setState 的函式式用法：React 生態圈中一直崇尚所謂函數語言程式設計理念，而本文作者介紹瞭如何利用 setState 函式的回撥來實現 setState 的函式式用法；就像 Redux 中的 reducer 一樣，能夠獨立宣告於元件外，然後宣告式的使用，從而保證元件更新邏輯的清晰與可測試性。
我理解的“大前端”或“大無線”：本文主要是介紹作者所在團隊最近的一些變化和思考，包括前言、NodeJS職能變化、ReactNative的大規模應用、專門的架構組職能、總結五部分。。( 6me.us/Md2 )
ReactRouter-V4 構建之道與原始碼分析：本文介紹了 React Router V4 的設計思想，一步一步由淺入深地介紹如何從零開始構建一個類似於 React Router V4 這樣的秉持路由即元件的思想的路由框架。( 6me.us/jfUwEw )
來自 Formidable 的 2017 React Naive 技術棧：本文是來自 Formidable 的工程師 Jani Eväkallio 介紹的他們在 2017 選定的 React Native 開發技術棧，包括構建工具、元件庫、狀態管理等等方面。( 6me.us/yH2yE )
Sketch：React Native 的 Playground ：隨著 Create React Native App 的釋出，Expo 釋出了能夠線上編輯 React Native 應用的工具 Sketch。開發者可以在 Web 上直接編輯 React Native 應用程式碼，或者拖拽方式加入元件，然後通過 Expo 客戶端完成本地預覽。( 6me.us/aGFX )
以元件為中心的 React 懶載入：React Loadable 是以元件為中心的懶載入框架，其基於 Webpack 2 提供的
import提供的非同步程式碼分割與載入功能進行了一系列的封裝。( 6me.us/mNHi )來自 Vixlet 的 React 優化策略：在過去的數年中，來自 Vixlet 的前端開發團隊一直使用 React 與 Redux 的開發架構，本文即是該團隊分享其在開發過程中發現的 React 優化策略的介紹。( 6me.us/dx5 )
Preact 內部原理探祕：Preact 是提供了類似於 React API 不過速度更快、包體更小的 React 替代包，本系列文章是 Preact 的開發者介紹其內部工作原理 。( parg.co/bOj )
CSS Grid 典型案例：該網站提供了一系列基於 React 編寫的 CSS Grid 佈局的測試樣例，是個不錯的從例項中學習 CSS Grid 語法與使用的教程。( sii.im/playground/… )
開發 React Native 與 Redux 應用一年來的錯誤總結：本文作者總結了他在過去一年中 React Native 與 Redux 開發中遇到的錯誤的覆盤與總結，譬如佈局檔案分割、Redux Store 設計、專案目錄結構、表單驗證等多個方面。( parg.co/bQS )
React Conf 2017 盤點：本文作者對於近日舉辦的 React Conf 2017 中的精彩演講進行了盤點，包括 Redux 與 MobX 在狀態管理領域的對比、ReactVR 等一系列優秀的基於 React 的擴充套件專案、程式碼格式化與樣式元件、服務端渲染等等。( parg.co/bsg )
Redux 實踐大討論：此篇是 Markerikson 在 Redux Issue 中發起的討論，主要涉及 Redux 模板冗餘、過度抽象、學習曲線過於曲折、太多的 Opinioned 最佳實踐等問題。( github.com/reactjs/red… )
2017 簡明 React 入門指南：本文是針對那些熟悉 jQuery 與傳統 JavaScript 開發的前端工程師準備的現代 React 開發入門指南，其包括了環境配置、create-react-app 使用、學習資料、應用編寫與釋出等等章節。( parg.co/bCx )
React Bits：一本關於 React 設計模式、技術與技巧的書，涵蓋了常見的 React 應用開發中的設計模式、需要規避的反模式、處理 UX 變種、效能除錯與樣式處理等等。（ github.com/vasanthk/re… ）
基於 ReactNaive 與 Uber 工程基礎構建 UberEATS：本文是 UberEATS 的工程師團隊介紹的他們基於 Uber 原工程架構與 ReactNative 實現應用的工程實踐；包括了構建遷移路徑、應用架構定義、自動更新、測試與靜態型別檢測等等。（ eng.uber.com/ubereats-re… )
微軟開源跨平臺開發框架 ReactXP：ReactXP 是來自於微軟的用於開發跨平臺（iOS，Android，Web，Windows）應用的開源框架，其基於 React.js 與 React Native 專案，提供了類似的介面與語法規則；能夠幫助開發者快速建立優美、響應式的 Web 介面以及原生體驗的移動應用。( microsoft.github.io/reactxp/ )
基於 React，Redux，React-Router-V4 以及 Firebase 建立實時足球投票應用：本系列教程基於 React，Redux，Redux-Saga，React-Router V4 以及 Firebase 建立足球投票應用，在第一篇教程中主要介紹如何使用 create-react-app 腳手架來初始化專案結構並且新增必須的庫。( parg.co/bhD )
Webpack 與 Rollup：求同存異：近日，Facebook 宣佈將 React 的構建工具由 Webpack 遷移到 Rollup，引發了很多開發者的討論。本文則是深度介紹 Webpack 與 Rollup 的異同，最後總結而言，Webpack 適合於構建應用，而 Rollup 適用於構建庫或框架。( parg.co/b4y )
React 中的狀態管理架構模式：本系列文章著眼於對於現代複雜 Web 應用，譬如 React 或類似框架，的開發中常見的狀態管理的架構模式。文章中會依次介紹 Naive Hierarchical Architectural Pattern、Top-Heavy Architecture、Flux 等等內容。( parg.co/b4J )
基於 JavaScript 構建資料表示式分詞器：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構常見數學表示式並且從中提取出相關實體。本文涉及到的內容包括對於分詞器的簡單介紹、對於抽象語法樹 AST 的介紹以及最終如何使用程式碼來實現分詞演算法。( parg.co/bRO )
Twitter Lite 與高效能可擴充套件 React PWA 實踐：本文是 Twitter 工程師團隊介紹其在開發世界上最大的 PWA 應用之一， Twitter Lite 過程中克服各種各樣的效能瓶頸的實踐經驗。其核心思想包括基於路由的程式碼切分、避免可能導致掉幀的函式、使用壓縮比更好的圖片資源、以及優化 React 更新過程、避免頻繁修正 Redux Store、延遲註冊 ServiceWorker 等部分。( parg.co/bRV )
React Native 效能優化：本文作者承接 React Native 效能瓶頸與解決方案，以新的實際開發中的例子討論如何優化 React Native 應用效能。作者以類似於 Android 中 Toolbar 的列表為例，介紹瞭如何對效能進行測試、使用原生的滾動監聽、使用宣告式介面等多個方面的內容。( parg.co/bRk )
後 MVC 時代：在很長一段時間裡，MVC（Model-View-Controller）架構是構建應用的黃金法則，而近幾年隨著 React，Vue.js，Angular 等以元件為中心的庫的流行，MVC 架構在前端卻趨於平寂。開發者往往將模型、檢視與控制器耦合在單個實體內，而打破了傳統的 MVC 架構中的約束。類似於 Flux 或者響應式程式設計的設計思想也改變了應用狀態的處理方式，不同於 MVC 中的雙向繫結，而是資料在實體之間單向流動。本文即是討論在所謂後 MVC 時代的 GUI 應用架構的思考。( realm.io/news/the-po… )
CodeSandbox：CodeSandbox 是一個線上的 React 編輯器，其能夠幫助開發者更快更方便地展示與分享基於 React 的專案。CodeSandbox 會自動化執行類似於編譯、打包、依賴管理等多種專案構建中的常見任務，同時 CodeSandbox 還允許開發者新增自定義的 node_modules 中的依賴。( parg.co/bR8 )
Slate：Slate 是類似於 Draft.js 的靈活可自定義的富文字編輯器構建框架，Slate 允許你構建功能豐富的類似於 Medium、Dropbox Paper、Canvas 這樣的編輯器。Slate 提供了各式各樣的外掛，你可以基於 React 與 Immutable 來構建自定義的外掛，並且指定哪些外掛屬於核心外掛。( docs.slatejs.org/ )
Facebook 釋出 React VR 來簡化 Web 中虛擬現實應用的開發：近年來，虛擬現實技術迅猛發展，有望成為下一個主流計算平臺。而 Facebook 近日正式釋出 React VR，其能夠幫助開發者快速構建 VR 應用。React VR 同樣基於 React 與 React Native 提供了宣告式的程式碼風格，能夠允許有 React 開發經驗的開發者快速上手。( parg.co/bfR )
大型高效能React PWA如何消除各類效能瓶頸？：想要構建一款效能出色的 Web 應用程式，我們需要投入大量技術週期以檢測時間浪費點、瞭解其發生原因並嘗試各類解決方案。遺憾的是，這種做法往往無法快速解決問題。效能無疑是一項永恆的命題，技術人員永遠徘徊在觀察與測量當中，卻幾乎永遠找不到最優解。不過利用 Twitter Lite，我們已經在眾多層面內取得了細小但卻極具價值的改進：從初始載入時間到React元件渲染（防止二次渲染），再到影像載入以及更多層面。儘管大多數變更本身並不顯著，但其相加所帶來的最終結果是，我們得以構建起一款規模極大且速度極快的漸進式 Web 應用程式。( parg.co/bfM )
Airbnb 設計團隊釋出 React SketchAPP：Airbnb 設計團隊近日釋出能夠將 React 元件渲染到 Sketch 文件中的開源工具，它為開發工程師與設計師之間提供了便捷的溝通橋樑。( airbnb.design/painting-wi… )
一系列優秀的 React 介面框架：本文列舉了多個優秀的 React 介面框架，分析了其特性、適用場景以及潛在的缺陷。本文涉及的框架包括 Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric 等等。( parg.co/bNh )
來自 Vixlet 的 React 優化建議：近年來 Vixlet 的 Web 團隊逐步將其 Web 框架遷移到了 React + Redux 技術架構，本文是來自於 Vixlet 的 React 優化實踐總結與建議。( parg.co/bNF )
從實用主義視角來看現代前端應用開發：現代 Web 開發技術變革迅速，而我也經歷了從純 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的變遷。本文則首先思考何謂現代 Web 應用，然後考慮現代 Web 應用常用的專案架構與構建方式，譬如 TypeScript、Webpack、Linting 等內容，然後討論現代常用的技術架構，譬如 React.j、MobX、依賴注入等相關知識。( dimafeng.com/2017/04/23/… )
React 動畫系列教程：本系列教程著眼於介紹 React 動畫開發相關知識，而本文則是從 CSS transitions 基礎入手，介紹了 CSS transitions 的基礎語法與進度條、導航欄等經典案例。( parg.co/bMF )
使用 React、Redux 以及 Webpack 建立 TODO 應用：本文是面向新手的教學文章，介紹瞭如何利用 React、Redux 以及 Webpack 建立簡單的 TODO 應用，包括利用 Webpack 搭建構建環境、編寫基本的 React 元件以及使用 Redux 管理應用狀態等內容。( parg.co/bMT )
函式式元件的函式式呼叫：本文是來自 Missive 的工程師分享了他們在基於 React 進行應用開發時的技巧，即如果直接以函式呼叫而非元件的方式來使用函式式元件，可以避免對於 React.createElement 的呼叫，最終相同元件的渲染耗時可以節約近 45%。( parg.co/bMa )
擁抱 React Router 4，改變舊的思維習慣：在今年的 React 大會上，Michael Jackson 以及 Ryan Florence 釋出了所謂“Learn Once，Route Anywhere”的演講。同時也代表了 React Router 4 中的核心思想：路由即宣告式元件；本文則介紹了 React Router V3 到 React Router V4 的變化。( parg.co/bVv )
高效能動態 CSS 樣式：本文是對 JSS 新近提供的函式式值的介紹，其與 React 內聯樣式以及其他 CSS 解決方案相比有數倍的效能提升。在 Web 開發中動態設定樣式往往會觸發頁面的重渲染，而本文則是介紹瞭如何使用 CSSOM 的 API 來在元素渲染之前即完成樣式的設定。( parg.co/btW )
React 新引擎 React Fiber 究竟要解決什麼問題？：Facebook 正在以流行的 JavaScript 框架 React 為基礎開發一個全新的架構。這個名為 React Fiber 的全新設計改變了檢測變更的方法和時機，藉此可改進瀏覽器端和其他渲染裝置的響應速度。 這一 全新架構 最初已於 2016 年 7 月公開發布，其中蘊含著過去多年來 Facebook 不斷改進的工作成果。該架構可向後相容，徹底重寫了 React 的協調（Reconciliation）演算法。該過程可用於確定出現變更的具體時間，並將變更傳遞給渲染器。( parg.co/btw )
GUI 應用程式架構的十年變遷：MVC、MVP、MVVM、Unidirectional、Clean：隨著現代瀏覽器的日漸流行，Web 以及混合開發技術的發展，大前端的概念日漸成為某種共識；而無論 iOS、Android、Web 這樣的端開發還是 React Native、Weex 這樣的跨端開發，其術不同而道相似縱覽這十年內的架構模式變遷，大概可以分為 MV 與 Unidirectional 兩大類，而 Clean Architecture 則是以嚴格的層次劃分獨闢蹊徑。從筆者的認知來看，從 MVC 到 MVP 的變遷完成了對於 View 與 Model 的解耦合，改進了職責分配與可測試性。而從 MVP 到 MVVM，新增了 View 與 ViewModel 之間的資料繫結，使得 View 完全的無狀態化。最後，整個從 MV 到 Unidirectional 的變遷即是採用了訊息佇列式的資料流驅動的架構，並且以 Redux 為代表的方案將原本 MV* 中碎片化的狀態管理變為了統一的狀態管理，保證了狀態的有序性與可回溯性。( zhuanlan.zhihu.com/p/26799645 )
新版本 Create React App 特性概述：不到一年前，React 官方釋出了 Create React App 這個零配置的快速建立 React 應用的腳手架工具；而本文則介紹了近幾個月來 Create React App 中加入的新特性。新版的 Create React App 中切換到了 Webpack 2，並且優化了執行時錯誤提示，同時還預設啟用了 Progressive Web Apps 支援，並且引入了 Jest 20、動態匯入等等一系列的新特性。( parg.co/bkY )
React Native 開發中的 80/20 定律：在構建 React Native 應用時，我們常常發現某些 20% 的投入會帶來 80% 的產出。本文則是作者在構建了自己首個 React Native 應用之後的感悟，作者發現引入靜態型別、通用元件以及精益部署之後，整個想法的開發速度與專案質量得到了較大地提升。( parg.co/bko )
從零開始構建 WhatsApp 應用：本系列文章深入淺出地介紹瞭如何利用 GraphQL 與 React Native 構建類似於 WhatsApp 的應用 Chatty。前幾部分主要介紹瞭如何搭建基礎環境、設計 GraphQL Schemas、進行資料查詢與互動等內容，而本文則著重於介紹如何為 Chatty 新增許可權驗證特性。( parg.co/bk0 )
如何快速地為 React 站點設定 A/B 測試：A/B 測試，或者稱為分割測試，是用來隨機地為使用者展示網頁以測試不同產品設計的反饋效果。A/B 測試對提升真實應用的使用者接受度非常有幫助，而本文則是介紹瞭如何利用 react-ab-test 這個工具快速地針對 React 站點設定 A/B 測試收集使用者反饋資訊。( parg.co/bkE )
重構 Airbnb 前端架構：本文是近日 Airbnb 開發團隊在思索重構程式碼庫中 JavaScript 部分的經驗總結，主要著眼於產品驅動開發以及技術沉澱、從傳統的 Rails 架構中積攢的經驗以及新的技術棧的某些特性等方面。本文首先介紹了從 Rails 遷移過程中的一些經驗，譬如將原本完全的服務端渲染介面所需要的資料切分為了 API 與 Non-API 兩大類，並且使用 Hypernova 來進行 React 服務端渲染。然後介紹瞭如何在應用前端通過引入懶載入與非同步載入等方式提升前端效能與使用者體驗。( parg.co/bkA )
React Europe 2017 見聞實錄：本文記錄了作者在第三屆 React Europe 大會上的見聞，也是不錯的窺見 React 生態圈現狀與未來發展方向的方式。本文首先介紹了即將到來的 React 16 以及新的調和演算法 Fiber，然後介紹了一些輔助構建高質量 JavaScript 程式碼的工具，最後還討論了基於流的按幀渲染方式。( parg.co/bJt )
理解高階元件：即使 React 新手都應該聽過所謂高階元件或者容器元件的概念，而本文則是深入淺出地介紹了 React 中高階元件的概念與意義，並且以例項介紹具體的使用方式與適用場景。作者首先介紹了無狀態元件與全域性狀態的概念，然後對比了所謂容器與展示型元件的使用場景，最後介紹了常見的高階元件。( parg.co/biZ )
我們為什麼選擇使用 React 生態：本文是京東金融移動研發部工程師分享的它們對於前端框架、工具與方法的選擇過程中的考慮。( parg.co/biP )
hacker-news-pwas：基於不同的前端框架實現的符合 PWA 應用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，並且均在 Lighthouse 評測中達到 90 以上的評分。( parg.co/biQ )
使用 Vue 與 NativeScript 開發跨端應用：目前標準的開發 NativeScript 應用的方式是使用樸素的 JavaScript 或者 Angular，而本文介紹瞭如何結合使用 Vue 與 NativeScript 來開發跨終端應用。本文首先闡述了 Vue.js 相較於 React 或者 Angular 的優勢，然後闡述了使用 Vue 語法來開發基礎 NativeScript 應用的步驟。( www.nativescript.org/blog/a-new-… )
利用 React Apollo 減少 Redux 程式碼量：Redux 為人詬病的一點就是需要大量的模板程式碼，而更多的程式碼往往也意味著更多的潛在錯誤與更高的維護代價。本文則介紹瞭如何利用 Apollo 來接管應用中的資料載入與呈現邏輯，從而減少 Redux 實現方案中載入資料生命週期中所需要的程式碼。( parg.co/bLA )
九個 React Native 動畫指南：本文通過介紹九個 React Native 動畫地實現從零到一的介紹了 React Native 中的動畫機制。包含了通過 Animated.timing 來新增樣式動畫、建立可伸縮的按鈕、建立可拖拽的卡片、動態地變換元素的顏色、角度、序列位置等等例項。( parg.co/b9d )
構建 React 元件庫：本系列文章循序漸進地介紹如何設計編寫自己的小型元件庫並且將其釋出到 NPM 倉庫中；第一篇文章著眼於如何從零開始搭建開發環境，第二篇文章則介紹如何利用 styled-components 來為元件新增樣式、新增調色盤、構建高效開發流程以及如何實踐 Atomic Design 原則。( parg.co/b9u )
5 個提升 React Native 應用效能的方法：本文作者分享了自己在過去一段時間內嘗試提升公司 React Native 應用效能的實踐經驗，包括如何設定有效的效能測試、強制啟動 no-bind 規則、使用函式式元件、重製 TabMap 的邏輯等等。( parg.co/b93 )
京東 618：如何配合業務打造 JDReact 三端融合開發平臺？：良好解決多終端開發問題是提升團隊開發效率的有效方法，本文全面解析了京東 JDReact 三端融合平臺。本文首先回顧了傳統無線開發的痛點，然後討論了 React Native 的優勢與侷限，最後介紹了 JDReact 三端融合平臺的整體架構、在功能、載入效能、記憶體方面的改進與優化以及釋出到生產環境中的流程等內容。( parg.co/b9U )
React 服務端渲染：本文循序漸進地介紹了 React 中服務端渲染的相關知識，首先討論了服務端渲染相較於客戶端渲染帶來的優勢、然後介紹瞭如何在 React 中新增服務端渲染的支援，最後還討論瞭如何通過同構的高階函式在服務端抓取資料然後顯示在客戶端。( css-tricks.com/server-side… )
大前端公共知識梳理：這些知識你都掌握了嗎？：近年來，隨著移動化聯網浪潮的洶湧而來與瀏覽器效能的提升，iOS、Android、Web 等前端開發技術各領風騷，大前端的概念也日漸成為某種共識。 其中特別是 Web 開發的領域，以單頁應用為代表的富客戶端應用迅速流行，各種框架理念爭妍鬥豔，百花競放。Web 技術的蓬勃發展也催生了一系列跨端混合開發技術，希望能夠結合 Web 的開發便捷性與原生應用的高效能性；其中以 Cordova、PWA 為代表的方向致力於為 Web 應用盡可能新增原生體驗，而以 NativeScript、ReactNative、Weex 為代表的利用 Web 技術或者理念開發原生應用。 平心而論，無論哪一種開發領域或者技術，他們本質上都是進行圖形使用者介面（GUI）應用程式的開發，面對的問題、思考的方式、架構的設計很大程度上仍然可以回溯到當年以 MFC、Swing、WPF 為主導的桌面應用程式開發時代，其術不同而道相似。( parg.co/byS )
React Express：針對目前 React 及其生態圈學習曲線過於陡峭的囧境，作者希望建立一個多合一的面向初學者的 React 技術棧學習教程，從最簡單的 create-react-app、npm、webpack、babel 等工具的使用，到 ES2015、ES2016、JSX 等基礎語法，最後還包括 React、Redux、CSS-in-JS 等工程實踐。( github.com/dabbott/rea… )
Airbnb React VR 實踐：Airbnb 自 2014 年以來一直使用 React 構建使用者互動介面，並且為社群貢獻了很多優秀的開源專案；而隨著 React VR 的釋出，Airbnb 也利用其來快速原型化與測試 VR 相關的創意。本文即是介紹 Airbnb 在 React VR 實踐方面的一些經驗總結，本文首先闡述了 React、React Native 與 React VR 三者之間的關係與差異，然後介紹了 React VR 在佈局、基礎元件方面的語法，最後還討論了 React VR、WebVR 以及 VR 技術本身的發展可能性。更多 WebVR 相關資料參考 parg.co/bFR。
深入 React 動畫實踐：本文介紹了在 React 開發中多種建立動畫效果的途徑，包括了基於 React 元件狀態的 CSS 動畫、基於 React 元件狀態的 JavaScript 樣式動畫以及第三方依賴的 React Motion、Animated、Velocity-React 等庫。本文最後還討論瞭如何用 GreenSock 等經典強大的動畫庫來輔助 React 元件動畫開發；更多 React 相關資料參考 https://parg.co/bM1 。
#開源專案
metro-bundler：為了更好地社群支援，原 react-native-packager 被獨立為 Metro Bundler；其致力於打造具有亞秒級別的過載以及較好可擴充套件性的模組系統，同時它仍然是 React Naive 內建的開箱即用的工具。( github.com/facebook/me… )
React Flight: React Flight 能夠幫我們輕鬆地構建元件之間的過渡動畫，它允許開發者定義初始狀態的元件與結束狀態的元件，React Flight 會自動地完成元件之間的切換並且新增動畫效果。
React Native Node: React Native Node 能夠在基於 React Native 開發的 Android 應用中啟動後臺 Node.js 程式，從而可以利用 Node.js 中的流、檔案系統介面等特性來進行功能操作；React Native Node 主要依靠 Node.js 7.1.0 版本能夠被獨立編譯為 bin_node_v710 可執行檔案。另一方面，儘管 iOS 並不支援直接執行 V8，但是該專案正在致力於為 ChakraCore 打造類 V8 特性支援。
react-simple-maps: react-simple-maps 是基於 d3-geo 與 topojson 的 React 地圖元件庫，允許開發者快捷方便地構建自定義的 SVG 地圖；目前的特性包括了縮放、標記、自定義 SVG 標記、自定義著色、氣泡圖、動畫支援等等。
redux-query:React/Redux 中查詢與管理網路狀態的庫：對於很多開發者而言，同步本地狀態與網路狀態會是一件很麻煩的事情。其中需要太多的妥協與考量，甚至於面對不同的問題需要使用不同的技術棧。而 redux-query 即是 AmplitudeEng 的工程師在實踐中的總結與應用，它可以被當做基於 React/Redux 以及 RESTful API 的應用的很好的輔助工具。它允許將網路狀態鏈入到當前的 Redux Store 中，並且提供了刪除、樂觀更新、響應快取、刪除重複等等優秀的功能。
react-native-offline-utils：react-native-offline-utils 允許我們在 React Native 應用中優雅地處理離線情況，能夠根據連線情況動態判斷需要使用的元件渲染或者資料抓取邏輯。同時 react-native-offline-utils 還能夠平滑地整合 Redux，能夠自動轉發特殊的離線 Action。( github.com/rauliyohmc/… )
react-pdf：在瀏覽器、移動端與服務端皆可適用的基於 React 語法的 PDF 檔案建立工具。( github.com/diegomura/r… )
Rapscallion：React 服務端渲染的效能一直是廣為詬病，相較於其他前端框架會滿上很多，筆者在此文中也進行過簡要探討。而 Rapscallion 則是新的支援 React 服務端渲染的開源包體，它支援非同步非阻塞渲染，相較於
renderToString其能達到將近 50% 的效能提升。同時 Rapscallion 官方還為我們準備了基於 Redis 的快取例項。( suo.im/3YS6pz )react-native-interactable：react-native-interactable 是由 wix 釋出的用於建立高效能使用者互動效果的宣告式介面。典型的使用者場景包括滑動式卡片、抽屜選單、伸縮式應用頭、聊天頭等。( github.com/wix/react-n… )
react-overdrive：非常簡單易用的 React 應用轉場動畫實現庫，能夠在不同的頁面間指定相同 ID 的元素，Overdrive 會自動為這兩個元素之間新增轉場動畫。( github.com/berzniz/rea… )
react-perimeter：react-perimeter 能夠為目標元素建立隱藏的柵欄，當使用者的滑鼠移動到目標元素的指定範圍內時會觸發預設時間，譬如可以執行元件預載入等操作。( github.com/aweary/reac… )
glamorous：來自 PayPal 的 React 元件的 CSS-in-JS 解決方案，其支援 JSX 語法、自定義樣式元件等多種靈活的功能。( parg.co/b4Q )
React Data Grid：基於 React 構建的類似於 Excel 的網格元件，其提供了編輯、鍵盤導航、複製貼上等多種功能。( github.com/adazzle/rea… )
create-next-app：基於 Next.js 的類似於 create-react-app 的快速建立支援服務端渲染的 React 應用的命令列輔助工具。( open.segment.com/create-next… )
Create XP App: 近日，微軟的 Skype 團隊釋出了基於 React Native 的跨平臺開發框架 ReactXP，而 create-xp-app 則是快速建立 ReactXP 應用的腳手架。本文則是對於 create-xp-app 的安裝與基本使用的介紹，包括瞭如何執行在 Web 與 iOS/Android 等原生環境中，以及如何進行打包等內容。
haul：Haul 是基於 Webpack 這樣開源框架構建的 react-native 命令列工具的替代品，它支援從執行於開發時伺服器到打包釋出至生產環境等全生命週期的功能。Haul 的最大特性在於允許開發者使用 Webpack 生態系統中各種合影的載入器與外掛，並且不需要 watchman 等外部工具的輔助，還優化了錯誤提示資訊。( github.com/callstack-i… )
react-move：方便快捷地 React 元件動畫庫，支援 React、React Native 以及 React VR。React Move 允許開發者忽略具體的動畫屬性控制而完全託管於框架，同時它還提供了多個生命週期中的回撥函式方便開發者進行控制。( github.com/tannerlinsl… )