精彩的 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 特定 linting 规则
eslint-plugin-jsx-a11y - JSX 元素的可访问性规则的静态 AST 检查器
@axe-core/react - React 应用的可访问性审计
DataFormsJS JSX Loader - 小型 JavaScript 编译器，用于快速将 JSX 转换为 JS
Why Did You Render - 猴子补丁 React，以通知你可避免的重新渲染。
Divjoy - React 代码库和 UI 生成器，加速开发（付费）
Plasmic - 强大的设计工具，用于可视化构建你的 React 组件。
jsx-ast-utils - 用于静态分析 JSX 的 AST 工具模块
react-scanner - 从代码中提取 React 组件和 props 的使用

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-in-JS，支持服务器端渲染、浏览器前缀和最小 CSS 生成
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 - 简单、模块化和可访问的 UI 组件，适用于你的 React 应用
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 多个组件，支持材料、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 多个钩子和组件，支持原生黑暗主题
radix - 一个开源 UI 组件库，用于构建高质量、可访问的设计系统和 Web 应用

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-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 组件键盘按下包装器
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 Tag Manager 模块
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 组件 props 的库
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 - 更加函数式的 Deku 方法创建 React 组件的普通函数，具有管道、记忆等功能...
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。

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 替代 jsx
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 - 使 Backbone 迁移更容易的 React 插件
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，使用 Gulp
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 - 干净、现代和简单的 React Google reCAPTCHA 包装器
react-recaptcha-that-works - 一个有效的 React reCAPTCHA 桥接

React 状态管理#

redux - JavaScript 应用的可预测状态容器
mobx - 简单、可扩展的状态管理
react-query - 用于在 React 中获取、缓存和更新异步数据的钩子
flux - 用于构建用户界面的应用架构
recoil - 用于 React 应用的实验性状态管理库
jotai - 基于原子模型的自下而上的 React 状态管理方法
xstate-react - 现代 Web 的状态机和状态图
zustand - React 状态管理的基本需求
easy-peasy - 适合素食者的 React 状态
hookstate - 基于钩子的简单但非常强大且极快的 React 状态管理
effector - 快速且强大的响应式状态管理器
reactn - React，但内置全局状态管理
react-facet - 基于可观察的状态管理，用于构建高性能游戏 UI 的 React

React AR 和 VR#

Viro React - 使用 React Native 快速构建 AR/VR 应用的平台

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 - 高性能的基于订阅的表单状态管理
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 - 高性能的 <canvas> 渲染，用于 React 组件
react-famous - 以 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 Maps 集成组件
react-gmaps - 用于 React.js 的 Google Maps 组件
react-map-gl - MapboxGL-js 的 React 包装器以及覆盖 API
google-map-react - 同构的 Google 地图 React 组件
react-mapbox-gl - 一个 mapbox-gl-js 包装器，使 API 适合 React
google-maps-react - 使用 React 的声明式 Google 地图组件，懒加载依赖项，当前定位查找和由 Fullstack React 团队驱动的测试驱动方法。
react-leaflet - Leaflet 地图的 React 组件
react-geo - 一组使用 react、antd 和 ol 的地理相关组件
pigeon-maps - 无外部依赖的 ReactJS 地图

图表#

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 Native#

使用 React 构建原生应用的框架

React Native 一般资源#

React Native 教程#

React Native 开发工具#

react-native-code-push - 用于 CodePush 的 React Native 模块

React Native 示例应用#

React Native 脚手架#

创建 React Native 应用 - 创建可以在 iOS、Android 和 Web 上运行的 React Native 应用
Ignite - React Native 的最热门 CLI，脚手架、插件、生成器等！

React Native 精彩组件#

Expo - 用于制作跨平台移动应用的 Expo 平台
react-navigation - 用于你的 React Native 应用的路由和导航
react-native-social-share - 使用 iOS 和 Android 原生 Twitter 和 Facebook 分享弹出窗口的 React Native
react-native-fbsdk - iOS Facebook SDK 的包装器
react-native-side-menu - 创建侧边菜单的简单可定制组件
react-native-mapbox-gl - Mapbox GL 的 React Native 模块
react-native-icons - 在 React Native 中快速简单的图标
react-native-vector-icons - 3000 个可定制的 React Native 图标，支持 NavBar/TabBar
react-native-google-signin - React Native 的 Google 登录
react-native-picker-modal-view
react-native-gifted-chat - React Native 最完整的聊天 UI
react-native-fast-image - FastImage，性能优越的 React Native 图像组件
recyclerlistview - 用于 React Native 和 Web 的高性能列表视图！
react-native-largelist - React Native 的最佳大型列表组件
react-native-gesture-handler - 声明式 API，向 React Native 暴露平台原生触摸和手势系统
rn-placeholder - 在 React Native 中渲染文本或媒体内容之前显示一些占位符内容