超棒的 React

一個關於 React 生態系統的精彩事物集合。

React
React Native
Redux
GraphQL
Relay
視頻
演示 React 應用
真實 React 應用
貢獻

React#

用於構建用戶界面的 JavaScript 庫

React 一般資源#

React 社區#

React 在線遊樂場#

其他精彩列表#

React/Redux 連結

React 教程#

React 一般教程#

React Hooks#

React 和 TypeScript#

React 性能#

React 內部原理#

React 面試問題#

React 工具#

React 開發工具#

react-devtools - 在 Chrome 和 Firefox 開發者工具中檢查 React 組件層次結構
react-hot-loader - 實時調整 React 組件
react-loadable - 用於加載組件的高階組件
loadable-components - 簡化 React 代碼拆分
reactotron - 用於檢查您的 React 和 React Native 項目的桌面應用
storybook - UI 組件開發和測試
docz - 零配置、實時加載的 Markdown + JSX 文檔
react-styleguidist - 具有實時樣式指南的獨立 React 組件開發環境
react-cosmos - 用於創建可重用 React 組件的開發工具
eslint-plugin-react - 用於 ESLint 的 React 特定檢查規則
eslint-plugin-jsx-a11y - 用於 JSX 元素的可訪問性規則的靜態 AST 檢查器
@axe-core/react - 用於 React 應用的可訪問性審計
DataFormsJS JSX Loader - 用於快速將 JSX 直接轉換為 JS 的小型 JavaScript 編譯器
Why Did You Render - 猴子補丁 React 以通知您可避免的重新渲染。
Divjoy - 用於加速開發的 React 代碼庫和 UI 生成器（付費）
Plasmic - 用於可視化構建 React 組件的強大設計工具。
jsx-ast-utils - 用於靜態分析 JSX 的 AST 實用程序模塊
react-scanner - 從代碼中提取 React 組件和屬性使用情況

React 起始套件和工具鏈#

create-react-app - 通過運行一個命令設置現代 Web 應用
Razzle - 構建生產就緒的 React 應用。Razzle 是現代靜態和動態網站及 Web 應用的工具鏈
Neutrino React Preset - @neutrinojs/react 是支持構建 React Web 應用的 Neutrino 預設
react-starter-kit - 同構 Web 應用樣板
create-react-library - 用於使用 Rollup 和 create-react-app 創建可重用的現代 React 庫的 CLI。
tsdx - 用於 TypeScript 包開發的零配置 CLI

React 框架#

next.js - React 框架
gatsby.js - 基於 React 的免費開源框架
react-admin - 用於構建基於 REST/GraphQL API 的 B2B 應用的前端框架
remix - 最終，來自 React Router 創建者的強大 React 框架
Blitz - 全棧 React 框架
aleph.js - Deno 中的 React 框架
refine - 用於快速構建數據密集型應用的基於 React 的框架。

React 樣式#

styled-components - 組件時代的視覺原語
emotion - 用於用 JavaScript 編寫 CSS 樣式的庫
radium - 用於 React 組件樣式的工具鏈
jss - CSS 的創作工具
aphrodite - 與服務器端渲染、瀏覽器前綴和最小 CSS 生成支持的框架無關的 CSS-in-JS
linaria - 零運行時的 CSS in JS
stitches - 近乎零運行時的 CSS-in-JS，SSR，多變體支持，並提供最佳的開發者體驗
vanilla-extract - 零運行時的 TypeScript 樣式表

React 路由#

react-location - 企業級客戶端路由
react-router - React 的聲明式路由
navi - React 的聲明式異步路由
curi - 單頁應用的 JavaScript 路由
reach - React 的下一代路由
universal-router - 用於同構 JavaScript Web 應用的簡單中間件風格路由
wouter - 一個極簡主義的～1.3KB 路由庫

React 組件庫#

material-ui - 用於更快、更輕鬆的 Web 開發的 React 組件
blueprint - 基於 React 的 UI 工具包
Fluent UI - 用於構建 Microsoft Web 體驗的一組 React 組件
react-bootstrap - 用 React 構建的 Bootstrap 組件
reactstrap - 簡單的 React Bootstrap 4 組件
ant-design - 一個具有自然和確定性價值的設計系統
chakra-ui - 用於您的 React 應用的簡單、模塊化和可訪問的 UI 組件
semantic-ui-react - 官方的 Semantic-UI-React 整合
evergreen - 由 Segment 提供的 Evergreen React UI 框架
grommet - 一個基於 React 的框架，提供可訪問性、模塊化、響應式和主題功能
rebass - 使用 styled-system 構建的 React 原始 UI 組件
reakit - 可訪問的、可組合的和可自定義的 React 組件
rsuite - 一套 React 組件
atlaskit - Atlassian 的官方 UI 庫，根據 Atlassian 設計指南構建。
baseweb - Base Web 是啟動、發展和統一 Web 產品的基礎。
primereact - 一個完整的 UI 框架，具有 50 多個組件，特色主題包括 material、bootstrap 和自定義主題。
eui - Elastic UI 框架
react-spectrum - Adobe 的庫和工具集合，幫助您構建自適應、可訪問和穩健的用戶體驗
ring-ui - JetBrains Web UI 組件
react-bulma-components - Bulma 框架的 React 組件
react-bulma - 基於 Flexbox 的現代 CSS 框架的 React.js 組件
trunx - 超級賽亞人 React 組件，來自精彩的 Bulma，使用 TypeScript 實現
bumbag-ui - 使用您的 Bumbag 構建可訪問和可主題的 React 應用
Mantine – 一個功能齊全的 React 庫，擁有 100 多個 hooks 和組件，支持原生黑暗主題
radix - 用於構建高質量、可訪問設計系統和 Web 應用的開源 UI 組件庫

React 精彩組件#

精彩的 React 組件列表
react-select - React 的選擇組件
react-beautiful-dnd - 用於列表的美觀和可訪問的拖放
react-dnd - 用於 React 的拖放
react-grid-layout - 可拖動和可調整大小的響應式網格佈局
react-table - 用於 React 的輕量級、快速和可擴展的數據網格
react-data-grid - 用 React 構建的類 Excel 的網格組件
react-draggable - React 可拖動組件
react-resizable-and-movable - 用於 React 的可調整大小和可拖動組件
react-resizable - 一個簡單的可調整大小的 React 組件
react-resizable-box - 用於 React 的可調整大小的組件
react-searchbox-awesome - 簡約的搜索框
react-sortable-pane - 用於 React 的可排序和可調整大小的窗格組件
react-spaces - 可嵌套的可調整大小、固定、可滾動的組件
react-dates - 一個易於國際化、適合移動的日期選擇器庫
react-big-calendar - 日曆組件
react-datepicker - ReactJS 日期選擇器
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 組件
data-source - 用於支持 Facebook 的 Flipper 的流數據可視化的庫
react-text-mask - 用於 React 的輸入掩碼
react-loading-skeleton - 創建自動適應您應用的骨架屏幕
react-spinkit - 用於 React 的 CSS 動畫加載指示器集合
rheostat - 用於 React 的可訪問滑塊組件
qrcode.react - 用於 React 的 QR 組件
react-archer - 在 React 元素之間繪製箭頭
react-pdf-viewer - 為 React 構建的 PDF 查看器
react-parallax-tilt - 輕鬆在 React 組件上應用傾斜懸停效果
react-popper - 以優雅、高效的方式定位工具提示和彈出框
react-tsparticles - 輕鬆創建高度可定制的粒子動畫
react-spring - 用於 React 應用的基於彈簧物理的動畫庫
framer-motion - 用於生產就緒動畫的 React 庫
react-accessible-accordion - 用於創建符合 WAI ARIA 規範的可訪問 “手風琴” 的 React 組件。
react-truncate-markup - 用於截斷 JSX 標記的 React 組件。
react-cookie - 用於 React 的通用 cookie
react-slick - 用 React 構建的輪播組件
react-gtm-module - 用於 React 的 Google 標籤管理器模塊
react-device-detect - 用於 React 的設備檢測
react-colorful - 一個小型（2.5 KB）、無依賴、快速且可訪問的顏色選擇器組件
react-modal - 用於 React 的可訪問模態對話框組件
cleave.js - 在輸入時格式化文本內容
react-fontawesome - Font Awesome 5 React 組件
react-advanced-cropper - 用於圖像裁剪的高級 React 組件
swiper - 現代移動觸控滑塊

React 測試#

jest - 令人愉快的 JavaScript 測試框架
enzyme - 用於 React 的 JavaScript 測試工具
react-testing-library - 簡單且完整的 React DOM 測試工具
react-hooks-testing-library - 鼓勵良好測試實踐的 React hooks 測試工具
majestic - 用於 Jest 的零配置 GUI

React 庫#

react-border-wrapper - 用於在 React 中沿 div 邊框放置元素的包裝器。
react-magic - 使用 React 的力量自動 AJAX 化普通 HTML
react-toolbox - 實現 Google 的 Material Design 規範的一組 React 組件
tcomb-react - 允許您檢查所有 React 組件屬性的庫
react-responsive - 用於響應式設計的 React 媒體查詢
preact - 快速的 3kb React 替代品，具有相同的 ES6 API。
riotjs - 一個類似 React 的 3.5KB 用戶界面庫
Maple.js - 將 Web 組件的概念引入 React
react-i13n - 一種高效、可擴展和可插拔的方法，用於對您的 React 應用進行儀器化
react-icons - 流行圖標包的 svg react 圖標
react-open-doodles - 精彩的免費插圖作為 React 組件。
Keo - 用於創建 React 組件的更函數式的 Deku 方法的普通函數，具有 pipe、memoize 等函數好處...
Bit - 用於跨應用管理和使用 React 和其他 Web 組件的虛擬庫
AtlasKit - Atlassian 的 React UI 庫
ReactiveSearch - 用於 Elasticsearch 的 UI 組件庫
Slate - 一個完全可定制的構建豐富文本編輯器的框架。
react-json-schema - 通過將 JSON 定義映射到您暴露的 React 組件來從 JSON 構建 React 元素。
react-lodash - Lodash 作為 React 組件
react-helmet - 用於 React 的文檔頭管理器
react-snap - 用於 SPA 的零配置框架無關靜態預渲染
Draft.js - 用於構建文本編輯器的 React 框架
refract - 利用反應式編程的力量來超強化您的組件
react-desktop - 用 React 構建的 OS X 和 Windows UI 組件
reapop - 一個簡單且可定制的 React 通知系統
react-extras - 用於處理 React 的有用組件和工具
react-instantsearch - 用於 React 和 React Native 應用的閃電般快速的搜索，由 Algolia 提供
uppy - 下一個開源文件上傳器，用於 Web 瀏覽器
react-motion - 解決您的動畫問題的彈簧
react-esi - React 邊緣側包含
react-aria - Adobe 的 React Hooks 庫，為您的設計系統提供可訪問的 UI 原語
react-uploady - 用於 React 的現代文件上傳組件和 hooks。

React 整合#

ReasonReact
React Rails
ReactJS.NET
om - ClojureScript 接口
Reagent - 一個簡約的 ClojureScript 接口到 React.js
Express React views
React Page Middleware
ngReact - Angular 中的 React 組件
coffee-react-transform - 為 Coffeescript 提供 React JSX 支持
sprockets-coffee-react - CJSX 的 Sprockets 預處理器
react-kup - 一個簡單的、非侵入式的 Coffeescript 替代品
turbo-react - 結合 Turbolinks 和 React 以應用 DOM 差異
react-bacon - 一個小模塊，用於將 React 與 Bacon.js 結合使用
msx - React 的 JSX 轉換器，調整為輸出對 Mithril 的調用
react-backbone - 用於 React 的 Backbone 感知混合器
NestedReact - 與 Backbone 視圖和 NestedTypes 模型的透明集成
backbone-reaction - React、Backbone 及其他
react.backbone - 用於 React 的插件，使 Backbone 遷移更容易
reactbone - 用於 Backbone 的 React 擴展
backbone-react-ui - 用於 Backbone 和 Backbone 分頁器的 React 組件
react-events - 用於 React 組件的聲明式管理事件綁定
react-mixin-manager - React 混合器註冊管理器
react-topcoat by @plaxdan - 使用 React 庫構建的 Topcoat CSS 組件
react-topcoat by @arnemart - 用於 Topcoat 的 React 組件集合
reactdown - 使用 Markdown 語法編寫 React 組件
react-jade - 將 Jade 編譯為 React JavaScript
jade-react - 將 Jade 模板編譯為 React.DOM 表達式
gulp-jade-react - 將 Jade 模板編譯為 React 去糖化的 JSX
sbt-reactjs - 使用 npm 的 React SBT 插件
scalajs-react - Scala.js 和 Facebook 的 React 之間的罪惡關係
react-xtags - 使用 React 實現 xtags
jreact - 用於服務器端 Java 的 React（使用 Rhino 或 Nashorn）
React.hiccup - 用 sweet.js 編寫的 JSX 的完整替代品
react-play - 在 Play 框架中渲染 React 組件，使用 JDK8 的 Nashorn
rx-react - 用於在 RxJS 中與 React 一起工作的工具
react-with-di - 一個被黑的 React.js 原型，具有 DI
reactfire - 用於簡化 Firebase 整合的 ReactJS 混合器
react-clickdrag-mixin - 用於 React 組件的 ClickDrag 混合器
react-masonry-mixin - 用於 Masonry 的獨立混合器（@desandro）
react-packery-mixin - 用於 Packery 的獨立混合器（Metafizzy）
react-dropzone - 用於 React.js 的簡單 HTML5 拖放區。
aframe-react - A-Frame VR + React
react-three-fiber - 用於 threejs 的 React 協調器（Web 和 React Native）
react-three - 用於使用 three.js 創建和控制 3D 場景的 React 綁定
react-three-renderer - 使用 React 渲染到 three.js 畫布
react-threejs - React 和 Three.js 之間最簡單的綁定
react-masonry-css - 由 CSS 提供支持的快速 Masonry 佈局，無依賴
react-captcha - 用於 React.js 的 reCAPTCHA
reaptcha - 用於 Google reCAPTCHA 的乾淨、現代和簡單的 React 包裝器
react-recaptcha-that-works - 用於 React 的有效 reCAPTCHA 桥接

React 狀態管理#

redux - 用於 JavaScript 應用的可預測狀態容器
mobx - 簡單、可擴展的狀態管理
react-query - 用於獲取、緩存和更新 React 中異步數據的 hooks
flux - 用於構建用戶界面的應用架構
recoil - 用於 React 應用的實驗性狀態管理庫
jotai - 基於原子模型的自下而上的 React 狀態管理方法
xstate-react - 用於現代 Web 的狀態機和狀態圖
zustand - React 中狀態管理的基本需求
easy-peasy - 適合素食者的 React 狀態
hookstate - 基於 hooks 的簡單但非常強大且極快的 React 狀態管理
effector - 快速且強大的反應式狀態管理器
reactn - React，但內置全局狀態管理
react-facet - 基於可觀察的狀態管理，用於高效的遊戲 UI，使用 React

React AR 和 VR#

Viro React - 用於快速構建 AR/VR 應用的平臺，使用 React Native

React 渲染器#

react-three-fiber - 用於 Three.js 的 React 渲染器
react-pdf - 使用 React 創建 PDF 文件
ink - 用於交互式命令行應用的 React
react-blessed - 用於 blessed 終端界面庫的 React 渲染器
react-sketchapp - 將 React 組件渲染到 Sketch
react-figma - 用於 Figma 的 React 渲染器
react-nil - 一個 React 空渲染器
remotion - 在 React 中以編程方式創建視頻

表單#

formik - 在 React 中構建表單，無需流淚
react-hook-form - 用於表單驗證的 React Hooks
react-jsonschema-form - 用於從 JSON Schema 構建 Web 表單的 React 組件
react-final-form - 用於 React 的高性能基於訂閱的表單狀態管理
unform - 專注於性能的 React 表單 API
formily - 阿里巴巴集團統一表單解決方案
uniforms - 用於從任何模式構建表單的 React 庫
formsy-react - 用於 React 的表單輸入構建器和驗證器
react-formal - 用於 React 的複雜 HTML 表單管理
vest - 受單元測試語法啟發的聲明式表單驗證框架。

自動完成#

react-autocomplete by @rackt - 符合 WAI-ARIA 的 React 自動完成（已存檔，唯讀）
react-autosuggest by @moroshko - 符合 WAI-ARIA 的 React 自動建議組件
react-autocomplete by @eliseumds - 僅僅是品嚐一些 ReactJS + RxJS
react-autocomplete by @prometheusresearch - 基於 React 的自動完成小部件
instatype by @gragland - 簡單的 React 自動完成組件
downshift - 🏎 用於構建簡單、靈活、符合 WAI-ARIA 的增強輸入 React 組件的原語
React Bootstrap Typeahead - 基於 React 的 typeahead，依賴於 Bootstrap 進行樣式，最初受到 Twitter 的 typeahead.js 啟發。

圖形#

react-art - React 與 ART 繪圖庫的橋接
react-canvas - 用於 React 組件的高性能 <canvas> 渲染
react-famous - 使用 Famo.us 以 60 FPS 實現複雜的 3D 動畫 UI
react-kinetic - 通過 KineticJS 使用 HTML5 Canvas 的 React
react-svg-morph - 將您的 svg 組件一個變形為另一個
react-hooks-svgdrawing - 使用 React hooks 進行 SVG 繪圖
react-svg-pan-zoom - 一個為 SVG 添加平移和縮放功能的 React 組件。

數據管理#

immer - 通過改變當前狀態來創建下一個不可變狀態
ReSub - 用於編寫更好的 React 組件和數據存儲的庫
immutable-js - 用於 JavaScript 的不可變數據集合
baobab - JavaScript 和 TypeScript 的持久和可選不可變數據樹，帶有游標
WatermelonDB - 🍉 用於強大的 React 和 React Native 應用的反應式和異步數據庫 ⚡️
RxDB - 用於 JavaScript 應用的實時數據庫

地圖#

react-googlemaps - React 接口到 Google 地圖
react-maps - 用於 React 的地圖組件
react-google-maps - React.js Google 地圖集成組件
react-gmaps - 用於 React.js 的 Google 地圖組件
react-map-gl - 用於 MapboxGL-js 的 React 包裝器加上覆蓋 API
google-map-react - 同構 Google 地圖 React 組件
react-mapbox-gl - 用於使 API 友好的 mapbox-gl-js 包裝器
google-maps-react - 使用 React 的聲明式 Google 地圖 React 組件，延遲加載依賴項，當前位置查找和由 Fullstack React 團隊驅動的測試驅動方法。
react-leaflet - 用於 Leaflet 地圖的 React 組件
react-geo - 一組使用 react、antd 和 ol 的地理相關組件
pigeon-maps - 無外部依賴的 ReactJS 地圖