awesome-dev-web-reactjs

Awesome-React.JS-List

:heart: 收藏列表 - :+1: 很棒的 React.js 开发工具和生态技术。

Favorites list - great React.js development tools and ecological technology.

React.js 是 Facebook 出品的开源 Web 前端 UI 框架，其结合了组件化思想、数据驱动视图、Virtual DOM 技术等，提供了快速、轻量、高性能的 Web App 开发体验，官网为 https://reactjs.org/

（Recommend）推荐一个其它的很棒的收藏列表，👉 https://github.com/enaqx/awesome-react

目录

Resource navigation list.

• 技术参考文档（Technical Reference Document）
• 构建工具（Build Tools）
• Hooks
• 状态管理（Application State Management）
• 路由管理（Route Management）
• UI 设计系统（UI Design System）
• UI 组件（UI Component）
  • 组件库（Component Library）
  • 独立组件（Independent Components）
• 数据可视化（Data Visualization）
• 优化方案（Application Optimization）
• 深入探索（Explore In Depth）
• 更多（More）

技术参考文档

Official and unofficial technical reference documents.

• React Developer Roadmap - React 开发者路线图参考。
• React Developer Roadmap - React 开发者路线图参考。（ ⚠️ 自 2019 年不再更新）
• The React Handbook

Go Top ↑

构建工具

Application building tools, including JSX code compilation, code file merging and packaging, syntax rule checking, etc.

• 集成开发环境（IDE）

  • React IDE

• 调试（Debug）

  • React DevTools - React 应用的调试工具，可以作为 Chrome 扩展使用，React 官方发布。
  • Reactime - 调试工具，组件快照记录，Chrome 扩展。
  • React Sight - 调试工具，可视化组件树，Chrome 扩展。
  • why-did-you-render - 探测应用重新渲染的部分的原因。
  • React Render Tracker
  • React Scan - 扫描应用中出现的渲染问题。

• 构建（Build）

  • Create React App - 零配置的 React App 构建工具，React 官方发布。
    • CRACO - Create React App 的包装层，简化自定义配置。

• 代码质量分析（Lint）

  • Million Lint

• 测试（Test）

• 组件原型开发（UI Components Dev）

  • React Cosmos

• 文档（Document）

  • React Styleguidist

• 其它（Other）

  • html-react-parser - HTML 转换为 React 元素。
  • svgr - 将 SVG 转换为 React 组件的一系列工具。

Go Top ↑

Hooks

Useful React Hook tools.

（Recommend）推荐一个其它的很棒的收藏列表，👉 rehooks/awesome-react-hooks

• 资源请求（Resource Request）

  • React Query - 服务器端数据获取、缓存、异步更新。
  • SWR - 用于远程数据获取，更轻量。
  • axios-hooks - 数据请求、缓存管理，非 axios 官方发布。
  • React Async

• 表单（Form）

  • React Hook Form - 表单处理。
  • Unform - 注重性能的表单处理工具。

• 事件（Events）

  • React Swipeable - 滑动事件处理。
  • react-idle-timer - 用户交互检测。

• 其它（Others）

  • react-use - 一套 hook 工具包。
  • @uidotdev/usehooks - 工具包。
  • React Adaptive Loading Hooks & Utilities - 检测客户端的状态，例如网络状态、媒体支持等。
  • useWorker - 使用 Web Worker 运行复杂任务，创建非阻塞 UI。
  • use-deep-compare-effect - useEffect 的深比较模式。
  • react-laag - 创建工具提示或者弹出框。
  • React Hotkeys Hook - 以声明方式使用热键。
  • use-debounce

Go Top ↑

状态管理

React application global state management and optimization.

（Recommend）其它收藏列表 👉 olegrjumin/awesome-react-state-management

• React-Redux - 为 React 应用提供 Redux 支持，Redux 官方实现。

  • Redux 工具链
  • Easy Peasy - 一个基于 Redux 抽象设计的，具有更简单 API 的状态管理库。

• Mobx-React - 为 React 应用提供 Mobx 支持，Mbox 官方实现。

• Recoil - 状态管理工具，Facebook 官方发布。

• @xstate/react - 基于状态机模型。

• zustand - 轻量级状态管理库,类似于 Redux。

• jotai - 轻量级状态管理库,类似于 Recoil。

• Tools

  • Immutable.js - 不可变数据。
  • Immer - 不可变数据。

Go Top ↑

路由管理

Route management for SPA applications built with React.js.

• React-Router
• Reach Router
• react-location
• wouter - 微型路由，零依赖，轻量级。

Go Top ↑

UI 设计系统

UI Design System, provides a base system for building a design system.

• Rebass
• radix
• Reakit
• Geist

Go Top ↑

UI 组件

Feature-rich component library built on React.js.

（Recommend）推荐一个其它的收藏列表，👉 https://github.com/brillout/awesome-react-components

组件库

UI component library, providing a set of components with consistent design style.

Material Design

Component library that implements Google Material Design.

• MDC React - 实现了 Google Material Design，Google 官方实现。（ ⚠️ 不再维护）
• MUI - 实现了 Google Material Design，组件非常丰富。
• Framework7-React - 跨平台 UI 组件库，支持 Android/ios/Desktop，且自适应相应平台设计风格。
• React Toolbox - 实现了 Google Material Design。（ ⚠️ 不再更新）

Bootstrap

Based on Bootstrap.

• reactstrap - 基于 Bootstrap 4，非 Bootstrap 官方实现。
• react-bootstrap - 基于 Bootstrap 4，非 Bootstrap 官方实现。
• React Bootstrap Typeahead - 输入框自动完成组件，非 Bootstrap 官方实现。

其它

• Chakra UI
• Mantine - 全功能的组件库和 Hook 库。
• Semantic UI - 非常受欢迎的组件库。
• Base Web React UI framework - Uber 公司发布。
• Office UI Fabric React - Office UI 风格，Microsoft 公司发布。
• Carbon Design System React - 遵循 Carbon 设计风格，IBM 公司发布。
• React Spectrum - Spectrum 设计，Adobe 公司发布。
• Grommet
• Blueprint - 提供复杂的数据分析展示、表格等组件。
• React Rainbow
• Evergreen
• Ant Design of React
• Next UI
• Prime React
• react-desktop - 桌面端 UI 组件库，基于 macOS Sierra 和 Windows 10 主题设计。
  • react-windows-ui - 构建 Windows 的 fluent UI 风格的 Web APP。
  • React95 - Windows 95 的 UI 组件。
  • React Winplaza 98
• tremor - 快速构建 dashboard 的 UI 组件库。
• Radix

独立组件

Independent UI components, only providing component modules that implement an interactive function.

• 图标（Icons）

  • react-icons

• 表单（Form）

  • Formik - 表单自动验证，异步提交，提供 Hook API。
  • React Select - 支持多选、自动完成、异步搜索选项等。
  • React Autosuggest - 输入建议，自动完成功能。（ ⚠️ 自 2019 年不再更新）
  • react-number-format - 数字输入格式化。
  • Downshift - 用来构建可访问的自动完成组件的底层组件。
  • react-final-form
  • react-mentions
  • React-Menu - 菜单组件，支持多级菜单、滚动菜单等。

• 表格（Table）

  • React Table
  • RevoGrid
  • React Table Library
  • Fixed Data Table 2
  • react-data-grid

• 时间日期选择器（DatePicker & TimePicker）

  • react-dates - 国际化、移动端友好，Airbnb 公司发布。
  • react-day-picker
  • React Datepicker

• 文件上传（File Upload）

  • react-dropzone - 文件上传组件，支持 Hook API。

• 轮播（Carousel）

  • react-slick
  • embla-carousel - 图片轮播组件。

• 图片（Image）

  • React Carousel Image Gallery - 图片轮播组件。
  • React Images - 图片点击原图查看、列表。
  • React Image Lightbox - 图片点击原图查看、列表、缩放。
  • React lightbox component - 图片点击原图查看、列表、缩放、旋转。（ ⚠️ 不再更新）
  • react-zmage - 图片点击原图查看、列表、旋转。
  • react-easy-crop/ - 图片裁剪。

• 颜色选择器（Color Picker）

  • React Color - 颜色拾取器，支持十多种样式。
  • react-colorful - 轻量的颜色拾取器。

• 拖拽（Draggable）

  • react-beautiful-dnd
  • react-grid-layout - 拖放布局，调整大小。
    • React-Draggable - 让组件位置可以被拖动调整布局。
  • React DnD
  • dnd kit - 轻量、高性能的拖放组件。
  • react-rnd- 拖放，调整大小。

• 大量数据渲染（Large amount of data rendering）

  • react-virtualized
  • react-window
  • React Virtuoso

• 动画（Animation）

  • React Transition Group - 过渡动画。
  • Framer-Motion - 手势动画。
  • react-spring - 动画工具。
  • React-Motion - 动画工具。
  • React Move - 动画工具。
  • Renature - 物理动画库。
  • React Awesome Reveal - 基于 Intersection Observer API 和 Animate.css 的动画库。
  • react-confetti - 五彩纸屑动画。
  • React DOM Confetti - 五彩纸屑动画。
  • scrollex - 滚动动画效果。
  • hamburger-react - 动画汉堡菜单图标。
  • AutoAnimate - 为元素添加过渡动画。
  • Number
    • react-number-easing - 数字滚动动画。
    • number-flow

• 二维码（QR Code）

  • qrcode.react
  • react-qr-code

• 条形码（Bar Code）

  • react-barcode

• 用户引导（User guided tours）

  • React Joyride
  • Reactour

• 消息通知（Notification）

  • React-Toastify - 消息弹窗组件。
  • React Toast Notifications - 消息通知弹窗组件。
  • react-hot-toast
  • notistack
  • reapop
  • Sonner

• 编辑器（Editor）

  • React Live - 交互式代码编辑器。
  • react-page - 可编辑页面。
  • sandpack - 实时代码编辑器，由 CodeSandbox 提供支持。
  • Editable - 可扩展的富文本编辑器框架。
  • BlockNote - 基于块的富文本编辑器。
  • MDXEditor - Markdown 编辑器。

• 加载器（Loading / Spinners）

  • React Spinners - 丰富的 Loading 动画。
  • @uiball/loaders - loading 加载器。

• 窗口布局（Window Layout）

  • react-mosaic - 平铺窗口管理器。
  • react-resizable-panels - 可调整大小的面板。
  • React Spaces

• 其它（Others）

  • react-tooltip
  • React PDF - pdf 文件预览组件。
  • react-big-calendar - 事件日历，日程表组件。
  • React Diagrams - 流程图组件。
  • React Sortable Tree - 树形列表，支持拖拽。
  • React Measure - 组件尺寸测量。
  • Emoji Mart - emoji 表情选择组件。
  • react-responsive - 响应式 UI 工具组件。
  • use-count-up - 计数器。
  • react-markdown - markdown 渲染组件。
  • kbar - 为页面添加键盘快捷键导航功能界面。
  • react-svg - 页面注入 SVG。
  • react-sketch-canvas - 使用 SVG 作为画布的 React 手绘矢量绘图组件。
  • react-syntax-highlighter - 语法高亮组件。
  • planby - 时间线组件。
  • boring-avatars - 随机生成基于 SVG 的自定义头像。
  • react-chrono - 时间线组件。
  • cmdk - 命令菜单。
  • Vaul - 抽屉组件，适配移动端手势。
  • react email - 邮件组件。

Go Top ↑

优化方案

React web application optimization solution.

• 懒加载、代码分割（Lazy Load && Code Split）

  • loadable-components - 实现组件懒加载功能，支持服务器端渲染（SSR）。
  • React-Loadable - 基于 React 高阶组件，实现组件懒加载功能。（ ⚠️ 不再更新）

• CSS In JS

  • React-JSS - JSS 是 CSS-in-JS 的一种解决方案，这个是与 React 的集成方案。

• 服务器端渲染（SSR，server side rendering）

  • Next.js - React.js 服务器端渲染框架。

• 国际化（i18n）

  • react-i18next
  • react-intl

• 加载占位符（Loading Placeholder）

  • React Content Loader - 提供了组件加载占位效果（Skeleton Screen），优化交互体验。
  • react-placeholder

• 其它（Others）

  • react-fast-compare - React 组件的高性能深度比较，可替代 lodash.isEqual。
  • react-error-boundary - 简单的可重用 React 错误边界组件。
  • react-refetch - 组件数据加载。
  • react-device-detect - 检测设备并渲染指定的视图。
  • Million - 块虚拟 DOM 实现，增强虚拟 DOM 的性能。

Go Top ↑

深入探索

Explore the principles behind the technology, the underlying architecture, etc.

• React 团队核心成员 Dan Abramov 的博客文章
  • React as a UI Runtime
  • Why Do React Elements Have a $$typeof Property? - React 中 $$typeof 属性的意义。
• React in Depth Dev - 一些讲解 React 高级概念的文章。
  • Inside Fiber: in-depth overview of the new reconciliation algorithm in React
  • The how and why on React’s usage of linked list in Fiber to walk the component’s tree
  • In-depth explanation of state and props update in React
• React Fiber Architecture - React Fiber 架构简介。
• Good advice on JSX conditionals - 更好的使用 JSX 语法。
• bulletproof-react - 一个简单、可扩展且功能强大的参考项目架构，用于构建生产就绪的 React 应用程序。

Go Top ↑

更多

More other unclassified resources.

• React Open Source Awards - React 开源项目奖，非官方。
• Proton Native - 跨平台桌面端应用的 React.js 环境。
• Spectacle - 基于 React.js 的演示文稿工具库。
• React Interview Questions & Answers - React.js 面试 Q/A。

Go Top ↑