「首席架構師推薦」React生態系統大集合

• 2019 年 10 月 5 日
• 筆記

關於React生態系統的一系列令人敬畏的事情。

React

• React一般資源
• React社區
• React在線遊樂場
• React教程
• React通用教程
• React鉤子
• React和TypeScript
• React性能
• React內部
• React面試問題
• React工具
• React開發工具
• React框架
• React造型
• React路由
• React組件庫
• React真棒組件
• 對命令行做出React
• React測試
• React庫
• React整合
• 形式
• 自動完成
• 圖像
• 模型庫
• 數據管理
• 地圖
• 圖表
• React原生
• React本機常規資源
• React原生社區
• React原生教程
• React原生開發工具
• React原生樣本應用程序
• React Native Boilerplates
• React Native Awesome Components
• ReactAR / VR
• ReasonReact
• Flux
• Flux一般資源
• Flux實現
• Flux教程
• Redux
• Redux通用資源
• Redux工具
• Redux教程
• MobX
• MobX通用資源
• MobX工具
• MobX教程
• GraphQL
• GraphQL規範
• GraphQL工具
• GraphQL教程
• GraphQL實現
• 服務器集成
• 數據庫集成
• Relay
• 中繼一般資源
• 中繼教程
• 中繼工具
• Apollo
• Apollo綜合資源
• 影片
• 重要會談
• React.js Conf 2015播放列表
• ReactEurope Conf 2015第1天播放列表
• ReactEurope Conf 2015第2天播放列表
• ReactRally Conf 2015播放列表
• React.js Conf 2016播放列表
• ReactRally Conf 2016播放列表
• React.js Amsterdam 2018播放列表
• 視頻教程
• 演示
• 示例應用
• 真正的應用
• 貢獻

React

用於構建用戶界面的JavaScript庫  

React教程

React通用教程

• React官方教程
• 在Visual Studio代碼中使用React
• Scrimba – 以交互方式免費學習React
• FreeCodeCampReact挑戰
• ReactCheatsheet
• React模式
• 使用React設置流程

React鉤子

• React鉤子
• 用React Hooks和Context替換Redux
• React Hooks備忘單：解鎖常見問題的解決方案
• 如何使用React Hooks獲取數據？
• 易於理解React Hook食譜
• 令人敬畏的React Hooks

React和TypeScript

• TypeScript，React和Webpack
• TypeScript中的JSX

React性能

• React優化性能
• 介紹React Profiler
• 優化React：虛擬DOM解釋
• React中優化主要性能問題的權威指南
• Twitter Lite和高性能Retive漸進式Web應用程序
• 使用React DevTools Profiler診斷React App性能問題
• 提高React性能的五大實踐
• React很慢，React很快：在實踐中優化應用程序
• 使用react-window渲染大型列表

React內部

• Reconciliation
• React Fiber Architecture
• Build your own React
• Inside Fiber: In-depth overview of the new reconciliation algorithm in React

React面試問題

• 13個基本的React面試問題
• React面試問題和答案列表

React工具

React開發工具

• create-react-app – 通過運行一個命令來設置現代Web應用程序
• react-starter-kit – 同構Web應用程序樣板
• react-devtools – 檢查Chrome和Firefox開發人員工具中的React組件層次結構
• react-hot-loader – 實時調整React組件
• react-loadable – 用於加載具有promise的組件的更高階組件
• loadable-components – 簡化了React代碼拆分
• reactotron – 用於檢查React和React Native項目的桌面應用程序
• storybook – UI組件開發和測試
• react-styleguidist – 隔離的React組件開發環境，帶有生活方式指南
• react-cosmos – 用於創建可重用React組件的開發工具
• eslint-plugin-react – 為ESLint實現特定的linting規則
• eslint-plugin-jsx-a11y – 針對JSX元素的a11y規則的靜態AST檢查器
• react-axr – React應用程序的可訪問性審計

React框架

• next.js – React框架
• gatsby.js – 基於React的免費開源框架

React風格

• styled-components – 組件年齡的可視原語
• emotion – 用於使用JavaScript編寫CSS樣式的庫
• radium – 用於React組件樣式的工具鏈
• jss – CSS的創作工具

React路由

• react-router – React的聲明性路由
• navi – React的聲明性異步路由
• curi – 用於單頁面應用程序的JavaScript路由器

React組件庫

• material-ui – React組件，可以更快，更輕鬆地進行Web開發
• ant-design – 具有自然和確定性價值的設計系統
• blueprint – 基於React的Web工具包
• office-ui-fabric-react – 用於構建Microsoft Web體驗的React組件
• react-bootstrap – 使用React構建的Bootstrap組件
• reactstrap – 簡單的React Bootstrap 4組件
• semantic-ui-react – 官方的Semantic-UI-React集成
• react-fontawesome – 用於React的Font Awesome 5組件庫
• Reakit – React的可訪問，可組合和可自定義的組件

React很棒的組件

• Awesome的React Components列表
• react-select – 選擇React組件
• react-dnd – 拖放React
• react-grid-layout – 具有響應斷點的可拖動和可調整大小的網格布局
• react-table – React的輕量級，快速且可擴展的數據網格
• react-data-grid – 使用React構建的類似Excel的網格組件
• react-draggable – React draggable組件
• react-resizable-and-movable – React的可調整大小和可拖動的組件
• react-resizable – 一個簡單的React組件，可以使用句柄調整大小
• react-resizable-box – React的可調整大小的組件
• react-sortable-pane – React的可排序和可調整大小的窗格組件
• react-dates – 一個易於國際化，適合移動設備的網絡日期選擇器庫
• react-big-calendar – 日曆組件
• react-datepicker – ReactJS Datepicker
• react-list – 一個多功能的無限捲軸React組件
• react-intl – 國際化React應用程序
• react-i18next – React的國際化做得對
• react-aria-modal – 一個完全可訪問的React模態
• react-hotkeys – React的聲明性熱鍵和焦點區域管理
• react-keydown – React組件的輕量級keydown包裝器
• react-joyride – 為您的應用創建導遊
• react-virtualized – 用於有效渲染大型列表和表格數據的React組件
• react-window – 用於有效渲染大型列表和表格數據的React組件
• react-text-mask – React的輸入掩碼
• react-loading-skeleton – 創建自動適應您的應用程序的骨架屏幕
• react-spinkit – 使用CSS為React設置動畫的加載指示符集合
• rheostat – 使用React構建的可訪問滑塊組件
• qrcode.react – 用於React的QR組件

做出React 命令行

• ink – 對交互式命令行應用程序進行React
• react-blessed – 用於祝福終端接口庫的React渲染器

React測試

• jest – 令人愉快的JavaScript測試框架
• enzyme – 針對React的JavaScript測試實用程序
• react-testing-library – 簡單而完整的React DOM測試實用程序
• react-hooks-testing-library – React掛鈎測試實用程序，鼓勵良好的測試實踐

React庫

• react-border-wrapper – 用於在React中沿div邊界放置元素的包裝器。
• react-magic – 利用React的強大功能自動AJAXify純HTML
• react-toolbox – 一組實現Google Material Design規範的React組件
• tcomb-react – 允許您檢查React組件的所有道具的庫
• react-responsive – 媒體查詢響應響應式設計
• react-is-responsive – 一種在React中創建響應組件的實用程序
• react-cursor – 用於Facebook React的功能狀態管理抽象
• Omniscient.js – 抽象React組件，用於快速自上而下渲染不可變數據
• Touchstonejs – React.js支持的UI框架，用於開發漂亮的混合移動應用程序。
• Elemental – React.js網站和應用程序的UI工具包
• StateTrooper – 使用CSP集中管理React應用程序的狀態
• Preact：使用相同的ES6 API快速3kb React替代方案。
• riotjs – 一個類似React的3.5KB用戶界面庫
• Maple.js – 將Web組件的概念引入React
• react-i13n – 一種高性能，可擴展且可插拔的方法，用於檢測React應用程序
• react-icons – svgReact流行圖標包的圖標
• Keo – Plain用於創建React組件的功能更強大的Deku方法，具有管道，memoize等功能性好處……
• Bit – 用於跨應用程序管理和使用React和其他Web組件的虛擬存儲庫
• AtlasKit – Atlassian的React UI庫
• ReactiveSearch – Elasticsearch的UI組件庫
• Slate – 用於構建富文本編輯器的完全可自定義的框架。
• react-animated-transitions – React中的簡單動畫過渡
• react-json-schema – 通過將JSON定義映射到您公開的React組件，構造來自JSON的React元素。
• compose-state – 在React中編寫多個setState或getDerivedStateFromProps更新程序
• react-with-analytics – 輕鬆實現Google Analytics for React應用程序
• react-cache-me-outside – React應用程序的OTA數據更新。如何弓數據！
• PrimeReact – React最完整的UI框架！
• react-lodash – Lodash作為React組件
• react-helmet – React的文檔主管
• Stator – 簡單，簡單的JavaScript狀態管理，內置支持React
• ClearX – 快速，輕鬆的React狀態管理，零學習曲線。ClearX為您的React應用程序分離關注點提供了極大的靈活性
• react-snap – 針對SPA的零配置框架無關的靜態預渲染
• Draft.js – 用於構建文本編輯器的React框架
• refract – 利用React式編程的強大功能為組件增壓
• react-desktop – 使用React構建的OS X和Windows UI組件
• Reapop – React和Redux通知系統
• react-extras – 使用React的有用組件和實用程序
• react-instantsearch – Algolia快速搜索React和React Native應用程序
• uppy – Web瀏覽器的下一個開源文件上傳器
• react-motion – 解決動畫問題的彈簧
• react-esi – React Edge Side包含

React整合

• React Rails
• ReactJS.NET
• React ASP.NET Boilerplate
• React Bootstrap組件遊樂場
• om – ClojureScript接口
• quiescent – React上的輕量級ClojureScript抽象
• Reagent – React.js的簡約ClojureScript接口
• react-haskell – Haskell的React綁定
• Express React views
• Express Coffee-React視圖 – 在服務器上呈現咖啡React
• React頁面中間件
• ngReact – Angular中的React組件
• ReactLaravel
• coffee-react-transform – 為Coffeescript提供React JSX支持
• sprockets-coffee-react – CJSX的鏈輪預處理器
• react-kup – 一個簡單的，非侵入性的替代jsx的coffeescript
• turbo-react – 結合Turbolinks和React來應用DOM差異
• react-bacon – 使用React和Bacon.js的一個小模塊
• msx – React的JSX Transformer，調整為向Mithril輸出調用
• React.withBackbone – React 16 ready骨幹綁定
• Backbone React Component
• react-backbone – 用於React的Backbone-aware mixins
• NestedReact – 與Backbone Views和NestedTypes模型的透明集成
• backbone-reaction – React，Backbone然後一些
• react.backbone – React插件使Backbone遷移更容易
• reactbone – Backbone的React擴展
• backbone-react-ui – 用於骨幹和骨幹分離器的React組件
• react-events – React組件的聲明性託管事件綁定
• react-mixin-manager – React mixin註冊管理器
• gsap-react-plugin – 用於補間React.js組件狀態的GSAP插件
• @plaxdan的react-topcoat – 使用React庫構建的Topcoat CSS組件
• @arnemart的React面漆 – 面漆的React成分集合
• reactdown – 使用markdown語法編寫React組件
• react-jade – 編譯Jade以ReactJavaScript
• jade-react – 將Jade模板編譯為React.DOM表達式
• gulp-jade-react – 將Jade模板編譯成React脫糖JSX和Gulp
• sbt-reactjs – 使用npmReactSBT插件
• scalajs-react – Scala.js和Facebook的React之間的內疚
• react-xtags – 使用React實現xtags
• jreact – 在服務器端Java上React（使用Rhino或Nashorn）
• React.hiccup – 用sweet.js編寫的JSX的完全替代品
• react-play – 使用JDK8的Nashorn渲染Play框架中的React組件
• rx-react – 在RxJS中與React一起使用的實用程序
• react-with-di – 一個被反射的React.js原型
• reactfire – ReactJS mixin，可輕鬆實現Firebase集成
• firedux – ReactJS的Firebase + Redux
• react-clickdrag-mixin – ClickDrag mixin for React組件
• Rewrite the Admin UI of KeystoneJS in React
• react-masonry-mixin – 用於砌體的獨立混合物（@desandro）
• react-packery-mixin – 獨立混合用於Packery（Metafizzy）
• react-dropzone – 帶有React.js的簡單HTML5拖放區域。
• aframe-react – A-Frame VR + React
• react-three – 使用three.js創建和控制3D場景的React綁定
• react-three-renderer – 使用React渲染到three.js畫布中
• react-threejs – React和Three.js之間最簡單的綁定
• react-masonry-css – 由CSS驅動的快速砌體布局，無依賴性
• react-captcha – 針對Google的react.js reCAPTCHA
• reaptcha – 用於Google reCAPTCHA的乾淨，現代且簡單的React包裝器
• react-recaptcha-that-works – React的reCAPTCHA橋

Form

• React Forms
• react-formal – 為React提供更好的表單驗證和價值管理，提供最少的布線
• react-forms – React的表單庫
• valuelink – 具有擴展React鏈接的全功能雙向數據綁定
• wingspan-forms – Facebook React的動態表單庫
• newforms – React的同構形式處理
• formjs – Reactjs的表單生成器
• react-form-builder – React.js的表單生成器
• plexus-form – 使用JSON-Schema進行React的動態表單組件
• tcomb-form – 用於開發表單編寫較少代碼的UI庫
• formsy-react – React JS的表單輸入構建器和驗證器
• Learn Raw React: Ridiculously Simple Forms
• Winterfell – 在React中生成複雜，經過驗證和擴展的基於JSON的表單
• Redux-Autoform – 從元數據中動態創建Redux-Forms
• uniforms – 一堆React組件和幫助器，可以輕鬆生成和驗證表單
• formik – React中的表單，沒有眼淚
• NeoForm – 用於表單狀態管理和驗證的模塊化HOC
• react-jsonschema-form – 用於從JSON Schema構建Web表單的React組件
• List View Select – 具有本機組件的React Native的Toggleable選擇框
• Final Form
• formland – 一個簡單，超靈活，可擴展的基於配置的表單生成器
• React – React形式 – React中的角狀React形式
• unform – ReactJS表單庫，用於創建不受控制的表單結構，包含嵌套字段，驗證等等！

自動完成

• @rackt的React自動完成 – 符合WAI-ARIA的React自動完成功能
• react @ autosuggest由@moroshko提供 – 符合WAI-ARIA標準的React autosuggest組件
• @ eliseumds的React自動完成 – 只需品嘗一些ReactJS + RxJS
• @prometheusresearch的react-autocomplete – 基於React的自動完成小部件
• instaleype by @gragland – 簡單React自動完成組件
• downshift – 構建簡單，靈活，符合WAI-ARIA標準的增強型輸入React組件的原語
• React Bootstrap Typeahead – 基於React的typeahead，依賴於Bootstrap進行樣式化，最初受到Twitter的typeahead.js的啟發。

Graphics

• react-art – 反映ART繪圖庫的橋樑
• react-canvas – React組件的高性能渲染
• react-famous – 使用Famo.us以60 FPS的複雜3D動畫UI
• react-kinetic – HTML5 Canvas通過KineticJS使用React
• react-svg-morph – 將你的svg組件變為另一個
• react-hooks-svgdrawing – 使用React鉤子繪製SVG

模型庫

• mori – ClojureScript的持久數據結構和支持API
• NestedTypes – 具有「純渲染」支持的快速可變模型
• swarm – JavaScript複製模型（MVC的M）庫
• caplet – JavaScript模型庫

數據管理

• Immutable.js – Javascript的不可變數據集合
• cortex – 用於使用React集中管理數據的JavaScript庫
• avers – 一個現代客戶端模型抽象庫
• imvvm – React的不可變模型 – 視圖 – 視圖模型
• morearty.js – 在純JavaScript中更好地管理React
• valuable – React的不可變數據存儲
• react-resolver – 用於React組件的遞歸延遲加載數據的同構庫
• freezer-js – React的輕量級和React式不可變數據結構
• MobX – 簡單，可擴展的狀態管理
• Qaf – 作為商店的組件。基於上下文的React的簡單狀態管理
• baobab – 帶有游標的JavaScript持久性和可選的不可變數據樹
• baobab-react – 為Baobab進行React整合
• datascript – ClojureScript中的不可變數據庫和Datalog查詢引擎
• immstruct – 不可變數據結構，具有基於組件的庫（如React）中從上到下屬性的歷史記錄
• seamless-immutable – JavaScript的不可變數據結構，它與普通的JS Arrays和Objects向後兼容
• tydel – 使用React綁定的類型模型和集合
• extendedable-immutable – 擴展任何Immutable.js數據結構
• statty – React和Preact應用程序的一個微小且不顯眼的狀態管理庫
• Hydux – React的Elm-Like州經理，「包括電池」
• ReSub – 用於編寫更好的React組件和數據存儲的庫
• ProppyJS – 用於功能道具組合的小型庫
• WatermelonDB – 下一代數據庫，用於強大的React和React Native應用程序，可擴展到10,000個記錄並保持快速
• Effector – 快速而強大的無功狀態管理器。允許您編寫簡單，快速且類型安全的代碼並輕鬆管理React狀態。
• reactn – React，但內置全局狀態管理
• immer – 通過改變當前狀態來創建下一個不可變狀態

地圖

• react-googlemaps – 反映Google地圖的界面
• react-maps – React的映射組件
• react-google-maps – React.js Google Maps集成組件
• react-gmaps – React.js的Google Maps組件
• react-map-gl – MapboxGL-js加上覆蓋API的React包裝器
• google-map-react – Isomorphic google map React組件
• react-mapbox-gl – 一個mapbox-gl-js包裝器，使APIReact友好
• google-maps-react – 使用React，延遲加載依賴項，當前位置查找器和Fullstack React團隊的測試驅動方法的聲明式Google Map React組件。
• react-leaflet – 用於Leaflet映射的React組件
• react-geo – 使用react，antd和ol的一組與地理相關的組件
• pigeon-maps – 沒有外部依賴關係的ReactJS映射

圖表

• DevExtreme React Chart – 基於高性能插件的Bootstrap和Material Design的React圖表
• react-chartjs – 使用chart.js的常見React圖表組件
• react-stockcharts – 具有ReactJS和d3的高度可定製的股票圖表
• Number Picture – 使用React和D3構建動畫可視化的低級構建塊。
• Victory – 用於構建交互式數據可視化的可組合React組件的集合
• Recharts – 一個基於D3的圖表庫，帶有一個很棒的聲明式API
• React-ApexCharts – ApexCharts的React組件（交互式SVG圖表庫）
• reaviz – 基於D3.js的React數據可視化庫
• react-vis – 一個React可視化庫，其設計考慮了以下原則：React友好，高級和可定製，富有表現力和行業強大。
• nivo – 它提供了豐富的數據可視化組件，構建在D3和React庫之上。
• vx – 可重用的低級可視化組件的集合。它結合了D3的強大功能，可以利用React的優勢生成可視化，以更新DOM。
• echarts-for-react – 一個非常簡單的ECharts React包裝器。
• Chartify – 使用CSS構建圖表的React插件。
• Semiotic – 結合了React和D3的數據可視化框架。

React原生

使用React構建本機應用程序的框架  

• React本機常規資源
• React原生官方網站
• React Native GitHub
• React原生通訊
• React本機遊樂場
• React Native Awesome List
• React Native StackOverflow
• React原生無線電

React原生教程

• React Native Tutorial
• 介紹React Native：使用JavaScript構建應用程序
• React Native簡介：使用JavaScript構建iOS應用程序
• React Native符合異步函數
• React Native中的手勢檢測 – 修復意外的平移
• Digital Smart Mirror lab with React Native
• React Native的美麗：使用JavaScript構建您的第一個iOS應用程序（第1部分）
• React Native的美麗：使用JavaScript構建您的第一個iOS應用程序（第2部分）
• React Native Flexbox上的迷你課程
• Flexbox完整指南
• Test driving react native applications
• 在TypeScript中使用React Native

React原生開發工具

• react-native-code-push – 用於CodePush的React Native模塊

React原生樣本應用程序

• HackerNews
• Ziliun
• FinanceReactNative
• SplashWalls
• NBAreact

React Native Boilerplates

• 創建React Native App – 在沒有構建配置的任何操作系統上創建React Native應用程序，包含或不包含Expo
• Snowflake – 使用Redux，Parse.com，Jest（88％覆蓋率）React原生iOS和Android
• Ignite – React Native，樣板，插件，生成器等最熱門的CLI！
• React Native Starter Kit – 一個強大的入門項目，用於引導您的移動應用程序的開發

React Native Awesome Components

• Expo – 用於製作跨平台移動應用程序的世博會平台
• react-navigation – React Native應用程序的路由和導航
• react-native-social-share – 使用React Native的iOS和Android原生Twitter和Facebook共享彈出窗口
• react-native-fbsdk – 圍繞iOS Facebook SDK的包裝器
• react-native-side-menu – 用於創建側邊菜單的簡單可自定義組件
• react-native-mapbox-gl – Mapbox GL對原生模塊做出React
• react-native-icons – React Native中的快速簡單圖標
• react-native-vector-icons – 用於React Native的3000個可自定義圖標，支持NavBar / TabBar
• react-native-google-signin – Google Signin for React Native
• React天然選取器模態視

ReactAR / VR

React用於增強和虛擬現實的用法  

• React 360 – 使用React創建令人興奮的360和VR體驗
• Viro React – 使用React Native快速構建AR / VR應用程序的平台

ReasonReact

ReactJS的原因綁定  

• ReasonReact官方網站

Flux

用於構建用戶界面的應用程序架構  

Flux一般資源

• Flux官方網站
• Flux GitHub

Flux實現

• Flux Comparision
• RefluxJS
• Fluxxor
• Marty
• McFly
• Alt
• Fluxible
• NuclearJS
• Flummox
• Coflux
• MobX
• Sinux

Flux教程

• 使用React和Flux構建應用程序
• Flux：構建客戶端應用程序的簡單架構模型
• 使用來自Yahoo的Dispatchr和Fetchr的Isomorphic Flux示例
• 使用React.js和Flux進行異步請求
• 在CoffeeScript中實現Flux
• React：Flux Architecture
• 了解Flux
• 在Flux中喲
• React.js架構 – Flux VS Reflux
• 避免單頁應用程序中的事件鏈
• ReactJS和Flux
• 解構ReactJS的流量
• Flux一步一步
• 實踐中的流量
• 什麼是Flux應用程序架構？
• React + Flux由Rails API支持：第1部分
• Reails + Flux由Rails API支持：第2部分
• Reails + Flux由Rails API支持：第3部分
• Flux解決方案通過實例比較
• Flux Cargo-Culting
• 通量案例
• Flux框架的演變
• 通過示例與Flux作出React – 解析了一個簡單的Todo List
• 從入門到放棄！- 初學者教程
• 使用React和Nuclear JS的簡單計數器應用程序
• LearnCode.academy Flux教程系列

Redux

JavaScript應用程序的可預測狀態容器  

Redux通用資源

• Redux GitHub
• Redux官方網站
• 很棒的Redux列表

Redux工具

• react-redux – Redux的官方React綁定
• redux-devtools – Redux的DevTools，具有熱重新加載，動作重放和可自定義的UI
• react-router-redux – 保持react-router和redux同步的綁定
• redux-form – 使用react-redux保持形狀狀態的高階組件
• redux-thunk – 用於redux的Thunk中間件
• redux-logger – 用於redux的Logger中間件
• reselect – Redux的選擇器庫
• normalizr – 根據模式規範化嵌套JSON
• redux-saga – Redux應用程序的另一種副作用模型
• redux-data-fx – Redux的聲明性副作用
• redux-observable – Redux的RxJS中間件
• redux-analytics – Redux的分析中間件
• redux-undo – 用於向redux狀態容器添加撤消/重做功能的高階減少器
• redux-search – 用於客戶端搜索的Redux綁定
• redux-mock-store – 用於測試redux異步動作創建器和中間件的模擬存儲
• redux-immutable – 創建一個與Immutable.js狀態一起使用的Redux combineReducers的等效函數
• redux-react-i18n – 用於還原/React的i18n溶液
• R16N – 還原/ReactI18n溶液
• redux-actiontyper – Helper為Redux創建更簡潔的動作類型
• redux-state-validator – 一個簡單的redux中間件，用於使用JSON Schema驗證redux狀態值和對象類型
• redux-persist – 堅持並補充redux商店

Redux教程

• 在ES6中使用React和Redux構建應用程序
• Redux入門
• 使用慣用Redux構建React應用程序
• Redux教程
• React，Redux和Immutable入門：測試驅動的教程：第1部分
• React，Redux和Immutable入門：測試驅動的教程：第2部分
• 全棧Redux教程
• 使用Redux和React-Router進行服務器端渲染
• Redux深度介紹
• 單元測試Redux應用程序
• 使用JWT身份驗證保護您的React和Redux應用程序
• 使用React，Redux和redux-saga構建圖像庫
• 使用redux調用API的簡化方法
• 基於React Redux的獻血者演示應用程序
• LearnCode.academy Redux教程系列
• 實用的Redux
• 初學者的完整React Redux教程

MobX

JavaScript應用程序的簡單，可擴展狀態管理  

MobX通用資源

• MobX GitHub
• MobX官方網站

MobX工具

• mobx-react – React組件包裝器，用於將React與MobX結合使用

MobX教程

• 10分鐘介紹MobX和React
• 使用MobX管理React應用程序中的複雜狀態
• 將您的應用程序從Redux重構為MobX
• Redux或MobX：嘗試解散混亂

GraphQL

查詢語言  

GraphQL規範

• GraphQL官方網站
• GraphQL規範
• GraphQL規範庫

GraphQL工具

• GraphCMS – GraphQL無頭CMS
• GraphQL CMS
• Mongoose模式到GraphQL
• GraphQL橋接到REST API
• GraphQL Playground – GraphQL IDE，用於更好的開發工作流程

GraphQL教程

• GraphQL簡介
• 關於GraphQL的第一個想法
• 以類似的方式在GraphQL中建模查詢
• Thin and Graphy
• GraphQL概述 – GraphQL和Node.js入門
• 使用GraphQL編寫基本API
• 使用Node.js和SQL構建GraphQL服務器
• GraphQL Tour：變量
• 如何Graphql – GraphQL的Fullstack教程

GraphQL實現

• graphql-js – GraphQL for JavaScript的參考實現
• react-transmit – 基於JavaScript Promises的Relay-inspired庫
• graphql-ruby – Facebook的GraphQL的Ruby實現
• graphql-java – GraphQL Java實現
• sangria – Scala GraphQL客戶端和服務器庫
• graphql-php – GraphQL參考實現的PHP端口
• graphene – Python中的GraphQL變得簡單
• graphqllib – Python的GraphQL實現
• graphql-dotnet – 用於.NET的GraphQL
• graphql-go – Go / Golang的GraphQL

服務器集成

• express-graphql – 使用Express創建GraphQL HTTP服務器
• graphql-yoga – 運行GraphQL服務器的最簡單方法

數據庫集成

• Hasura – Postgres上的即時實時GraphQL
• Prisma – 一個高性能的開源GraphQL ORM-like層，可以在GraphQL服務器中完成繁重的任務。
• graphql-bookshelf – 一些幫助定義BookshelfJS模型周圍的GraphQL架構
• GraphpostgresQL – PostgreSQL的GraphQL
• graffiti – Node.js GraphQL ORM
• sql-to-graphql – 根據您的SQL數據庫結構生成GraphQL API
• graphql-sequelize – 通過Sequelize實現MySQL和Postgres的GraphQL和Relay

Relay

數據驅動的React應用程序  

Relay一般資源

• 接力官方網站
• 接力GitHub

Relay教程

• 官方接力入門
• 視覺學習者的接力
• Getting Started with Relay
• Relay and Routing

Relay工具

• graphql-relay-js – 一個幫助構建支持react-relay的graphql-js服務器的庫
• react-router-relay – React Router的中繼集成
• relay-local-schema – 在沒有GraphQL服務器的情況下使用Relay
• relay-codemod – 基於jsodeshift的Codemod腳本，用於更新中繼API

Apollo

基於GraphQL的數據堆棧  

阿波羅綜合資源

• 阿波羅官方網站
• Apollo GitHub
• 阿波羅博客
• Apollo Slack

Apollo工具

• react-apollo-redux – 一個小包裝器，用於響應阿波羅突變自動發送動作

影片

• reactjsvideos.com

重要會談

• Pete Hunt：React：重新思考最佳實踐 – JSConf EU 2013
• Pete Hunt：React：重新思考最佳實踐（更新） – JSConf.Asia 2013
• Tom Occhino和Jordan Walke：Facebook上的JS應用程序 – JSConfUS 2013
• React：JS中的CSS
• Pete Hunt：可預測，不正確 – Mountain West JavaScript 2014
• 黑客方式：重新思考Facebook上的Web應用程序開發
• Christopher Chedeau：為什麼React Scale？- JSConf2014
• Christopher Chedeau：React的架構 – OSCON 2014
• Pete Hunt：ReactRESTful UI渲染 – 奇怪的循環2014
• Pete Hunt：Instagram.com如何運作 – OSCON 2014
• Bill Fisher和Jing Chen：React和Flux – NewCircle Training 2014
• Sebastian Markbage：最小的API表面積 – JSConf EU 2014
• Avik Chaudhuri：規模的JavaScript測試和靜態類型系統 – 規模2014
• React Native＆Relay：為移動設備帶來現代網絡技術 – f8 2015）
• Citrusbyte推出GraphQL：與Nick Schrock合作的橫向平台
• Laney Kuenzel：接力中的突變和訂閱 – JSConf 2015
• React今天和明天和90％清潔React與鉤子 – React Conf 2018
• React會議
• React視頻
• 令人敬畏的React會談
• React.js Conf 2015播放列表
• ReactEurope Conf 2015第1天播放列表
• ReactEurope Conf 2015第2天播放列表
• ReactRally Conf 2015播放列表
• React.js Conf 2016播放列表
• React Amsterdam 2016播放列表
• ReactEurope Conf 2016第1天播放列表
• ReactEurope Conf 2016第2天播放列表
• ReactRally Conf 2016播放列表
• React.js Amsterdam 2018播放列表

視頻教程

• 第一次和Dan Abramov一起嘗試React Hooks

演示

• React和React原住民博物館
• react.rocks – 具有可用代碼的Pinterest風格的在線演示目錄
• react-hn – 一個React＆react-router-powered of Hacker News
• react-pokemon – 用於顯示神奇寶貝的React組件
• React + Backbone TodoMVC
• React + NestedTypes TodoMVC
• react-rxjs-todomvc – 使用React和RxJS實現TodoMVC
• react-mvc – 用React和純MVC編寫的示例聊天應用程序
• react-observe-todomvc – 在React和Object.observe之上構建的TodoMVC實現
• react-lights-out – React框架功能和靈活性的簡單演示
• todomvc-swarm – 使用Swarm進行實時協作的React TodoMVC實現
• reactodo – 使用React構建的多個localStorage TODO列表
• lifequote – 人壽保險快速報價申請的React端口
• reactor-demo – 使用React的同構Javascript應用程序
• imgible – 基於React的Imgur-like同構演示應用程序
• wow-realm-status-react – React – 魔獸世界狀態：React版
• react-json-editor – 一個通用的JSON編輯器
• react-todos – Backbone的示例TODO應用程序與React JS的視圖
• github-issues-viewer – github在react + backbone中發出查看器構建
• wolfenstein3D-react – Wolfenstein用React編寫的渲染層
• Flux ImmutableJS TodoList
• Hapi + React + Flux用戶管理系統
• Redux TodoMVC
• React / Redux CRUD在本地存儲中具有持久狀態
• React Slack克隆 – 使用React和Chatkit構建的綜合Slack克隆
• React顏色漂移 – 與React的生成藝術
• overreacted.io – Dan Abramov的個人博客

示例應用

• isomorphic500 – 使用React和Fluxible構建的同構JS應用程序
• fil – 瀏覽器中解釋器的遊樂場（Redux）
• sound-redux – 使用React / Redux構建的Soundcloud客戶端
• react-pomodoro – 開發人員的番茄鍾計時器
• Do – 使用React和Redux構建的Notes管理應用程序
• soundcloud-react-redux – 使用React / Redux構建的SoundCloud客戶端
• soundcloud-react-mobx – 使用React / MobX構建的SoundCloud客戶端
• 用React和Redux重新實現Winamp 2.9
• ComingOrNot – 使用react，react-router，redux，graphQL和無服務器構建的Event Planner
• React Reduction – 使用React + Bootstrap4構建的Admin Dashboard
• React Code Splitting Sample – React + React Router + Flux
• 響應式React'電影數據庫'（TMDb）應用程序
• CoreUI – 使用React和Bootstrap 4構建的免費管理面板
• react-shopping-cart – 使用React和Redux構建的簡單電子商務購物車應用程序
• hackernews-react-graphql – 使用React和GraphQL用通用JavaScript重寫的黑客新聞克隆

真正的應用

• Firefox調試器
• 遠程復古 – 分佈式團隊的敏捷回顧
• Spectrum – 簡單，強大的在線社區
• Mattermost – 開源Slack替代品

原文：https://github.com/enaqx/awesome-react  本文：https://pub.intelligentx.net/collection-awesome-things-regarding-react-ecosystem  討論：請加入知識星球或者小紅圈【首席架構師圈】