awesome-react

關於 React 生態系統的一系列很棒的東西。


反應

用於構建用戶界面的 JavaScript 庫

React 通用資源

反應社區

React 在線遊樂場

另一個很棒的列表

React 教程

React 通用教程

反應鉤子

React 和 TypeScript

反應性能

反應內部

React 面試問題

反應工具

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

反應框架

  • next.js - React 框架

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

  • react-admin - 用於在 REST/GraphQL API 之上構建 B2B 應用程序的前端框架

  • remix - 最後,來自 React Router 創建者的殺手級 React 框架

  • Blitz - 全棧 React 框架

  • aleph.js - Deno 中的 React 框架

  • refine - 一個基於 React 的框架,用於立即構建數據密集型應用程序。

反應樣式

  • styled-components - 組件時代的視覺原語

  • emotion - 專為使用 JavaScript 編寫 CSS 樣式而設計的庫

  • radium - React 組件樣式的工具鏈

  • jss - CSS 創作工具

  • aphrodite - 與框架無關的 CSS-in-JS,支持服務器端渲染、瀏覽器前綴和最小 CSS 生成

  • linaria - JS 中的零運行時 CSS

  • stitches - CSS-in-JS 具有接近於零的運行時、SSR、多變量支持和一流的開發人員體驗

  • vanilla-extract - 零運行時 Stylesheets-in-TypeScript

反應路由

  • react-location - React 的企業客戶端路由

  • react-router - React 的聲明式路由

  • navi - React 的聲明式異步路由

  • curi - 用於單頁應用程序的 JavaScript 路由器

  • reach - React 的下一代路由

  • universal-router - 用於同構 JavaScript Web 應用程序的簡單中間件式路由器

  • wouter - 一個極簡友好的~1.3KB 路由庫

React 組件庫

  • material-ui - React 組件用於更快、更輕鬆的 Web 開發

  • blueprint - 一個基於 React 的網絡 UI 工具包

  • Fluent UI - 一組用於構建 Microsoft Web 體驗的 React 組件

  • react-bootstrap - 使用 React 構建的引導組件

  • reactstrap - 簡單的 React Bootstrap 4 組件

  • ant-design - 一個具有自然和確定性價值觀的設計系統

  • chakra-ui - 適用於您的 React 應用程序的簡單、模塊化和可訪問的 UI 組件

  • semantic-ui-react - 官方 Semantic-UI-React 集成

  • evergreen - Evergreen React UI Framework by Segment

  • grommet - 一個基於 react 的框架,在一個整潔的包中提供可訪問性、模塊化、響應性和主題

  • rebass - React 使用 styled-system 構建的原始 UI 組件

  • reakit - React 的可訪問、可組合和可定制的組件

  • rsuite - 一套 React 組件

  • atlaskit - Atlassian 的官方 UI 庫,根據 Atlassian 設計指南構建。

  • baseweb - Base Web 是啟動、發展和統一網絡產品的基礎。

  • primereact - 一個完整的 React UI 框架,包含 50 多個組件,包括材料、引導程序和自定義主題。

  • eui - 彈性 UI 框架

  • react-spectrum - Adob​​e 的庫和工具集合,可幫助您構建自適應、可訪問和強大的用戶體驗

  • ring-ui - JetBrains Web UI 組件

  • react-bulma-components - Bulma 框架的 React 組件

  • react-bulma - 基於 Flexbox 的現代 CSS 框架的 React.js 組件

  • trunx - Super Saiyan React 組件,Bulma 之子,用 TypeScript 實現

  • bumbag-ui - 使用您的 Bumbag 構建可訪問且可主題化的 React 應用程序

  • Mantine – 一個功能齊全的 React 庫,包含 100 多個鉤子和組件,支持原生深色主題

  • radix - 一個開源 UI 組件庫,用於構建高質量、可訪問的設計系統和 Web 應用程序

React 很棒的組件

反應測試

反應庫

  • react-border-wrapper - 在 React 中沿 div 邊界放置元素的包裝器。

  • react-magic - 使用 React 的強大功能自動 AJAXify 純 HTML

  • react-toolbox - 一組實現 Google 的 Material Design 規範的 React 組件

  • tcomb-react - 允許您檢查 React 組件的所有道具的庫

  • react-responsive - 響應式設計中的媒體查詢

  • preact - 具有相同 ES6 API 的快速 3kb React 替代方案。

  • riotjs - 一個類似 React 的 3.5KB 用戶界面庫

  • Maple.js - 將 Web 組件的概念引入 React

  • react-i13n - 一種高性能、可擴展和可插拔的方法來檢測你的 React 應用程序

  • react-icons - 流行圖標包的 svg react 圖標

  • react-open-doodles - 很棒的免費插圖作為反應組件。

  • Keo - 用於創建 React 組件的功能更強大的 Deku 方法的普通函數,具有管道、記憶等功能的好東西...

  • 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 - 下一個用於網絡瀏覽器的開源文件上傳器

  • react-motion - 一個解決你動畫問題的彈簧

  • react-esi - React Edge Side Includes

  • react-aria - Adob​​e 的 React Hooks 庫,為您的設計系統提供可訪問的 UI 原語

  • react-uploady - React 的現代文件上傳組件和鉤子。

反應集成

反應狀態管理

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

  • mobx - 簡單、可擴展的狀態管理

  • react-query - 在 React 中獲取、緩存和更新異步數據的鉤子

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

  • recoil - React 應用的實驗狀態管理庫

  • xstate-react - 現代網絡的狀態機和狀態圖

  • zustand - 在 React 中承擔狀態管理的必需品

  • easy-peasy - React 的素食友好狀態

  • hookstate - 基於 hooks 的 React 簡單但非常強大且速度極快的狀態管理

  • 效應器 - 快速而強大的反應式狀態管理器

  • reactn - React,但具有內置的全局狀態管理

  • react-facet - React 內置的高性能遊戲 UI 的基於 Observable 的狀態管理

反應 AR 和 VR

  • Viro React - 使用 React Native 快速構建 AR/VR 應用程序的平台

反應渲染器

##### 形式

  • 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-art - React Bridge 到 ART 繪圖庫

  • react-canvas - React 組件的高性能<canvas> 渲染

  • [react- Famous](https://github.com/pilwon/react- Famous) - 使用 Famo.us 以 60 FPS 的複雜 3D 動畫 UI

  • react-kinetic - HTML5 Canvas 通過 KineticJS 使用 React

  • react-svg-morph - 將你的 svg 組件變形為另一個

  • react-hooks-svgdrawing - 帶有 React 鉤子的 SVG 繪圖

  • react-svg-pan-zoom - 向 SVG 添加平移和縮放功能的 React 組件。

數據管理

  • immer - 通過改變當前狀態來創建下一個不可變狀態

  • ReSub - 一個用於編寫更好的 React 組件和數據存儲的庫

  • immutable-js - Javascript 的不可變數據集合

  • baobab - JavaScript 和 TypeScript 具有游標的持久和可選不可變數據樹

  • WatermelonDB - 🍉 強大的 React 和 React Native 應用程序的反應式和異步數據庫⚡️

  • RxDB - JavaScript 應用程序的實時數據庫

地圖

圖表

  • vx - 可視化組件

  • victory - 用於構建交互式數據可視化的可組合 React 組件的集合

  • react-vis - 數據可視化組件

  • recharts - 重新定義了用 React 和 D3 構建的圖表庫

  • nivo - 提供一組豐富的數據可視化組件,構建在 D3 和 React 庫之上

  • echarts-for-react - 用於 React 包裝器的 Apache ECharts 組件

  • react-apexcharts - ApexCharts 的 React 組件

  • chartify - 使用 CSS 構建圖表的 React 插件


反應原生

使用 React 構建原生應用程序的框架

React Native 通用資源

React Native 教程

React 原生開發工具

React Native 示例應用程序

反應原生樣板

React Native Awesome 組件

React 原生庫

還原

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

Redux 通用資源

Redux 工具

Redux 教程


GraphQL

API 的查詢語言

GraphQL 一般資源

GraphQL 工具

GraphQL 教程

GraphQL 實現

數據庫集成

  • Hasura - 所有數據的即時 GraphQL

  • Prisma - 下一代 ORM 用於 Node.js 和 TypeScript

  • graphql-sequelize - GraphQL & Relay for MySQL & Postgres via Sequelize


繼電器

數據驅動的 React 應用程序

中繼通用資源

繼電器教程

中繼工具


視頻

reactjsvideos.com

重要會談

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 Conf 2017 播放列表

React.js 阿姆斯特丹 2018 播放列表

React Amsterdam 2019 播放列表

視頻教程


演示 React 應用程序


真正的 React 應用程序


### 貢獻

這個列表開始是作為關於 React 的有趣事物的個人集合。React 剛開始的時候還處於 beta 階段,有專門的腳本可以將 JSX 轉換為 JS,甚至 Flux 還沒有發布。React 現在是主流,發生了很多事情。請不要嘗試將此列表用作廣告板或公開推送您的實驗的地方。請在這裡只提供完全免費的資源。不要猶豫,為過時的項目和文章以及新的貢獻建議清理 PR。衷心歡迎您的貢獻和建議♡歡迎。(✿◠‿◠)

Last updated