React

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

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

技术参考文档

Official and unofficial technical reference documents.

• React Developer Roadmap (opens new window) - React 开发者路线图参考。
• React Developer Roadmap (opens new window) - React 开发者路线图参考。（⚠️ 自 2019 年不再更新）

构建工具

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

• 集成开发环境（IDE）

  • React IDE (opens new window)

• 调试（Debug）

  • React DevTools (opens new window) - React 应用的调试工具，可以作为 Chrome 扩展使用，React 官方发布。
  • Reactime (opens new window) - 调试工具，组件快照记录，Chrome 扩展。
  • React Sight (opens new window) - 调试工具，可视化组件树，Chrome 扩展。
  • why-did-you-render (opens new window) - 探测应用重新渲染的部分的原因。

• 构建（Build）

  • Create React App (opens new window) - 零配置的 React App 构建工具，React 官方发布。
  • webpack (opens new window) - 打包工具。
  • Babel (opens new window) - TypeScript/ES Next 编译工具。
    • babel-preset-react (opens new window) - Babel 的 React.js 预设插件，Babel 官方发布。
    • babel-preset-flow (opens new window) - Babel 的 Flow 预设插件，Babel 官方发布。
    • babel-preset-typescript (opens new window) - Babel 的 TypeScript 预设插件，Babel 官方发布。👉 react-typescript-cheatsheets (opens new window)
    • babel-jest (opens new window) - Babel 的 Jest 插件，FaceBook 发布。

• 代码质量分析（Lint）

  • ESLint (opens new window) - 语法规则检查工具。
    • eslint-plugin-react (opens new window) - ESLint 的 React.js 语法规则插件。
    • eslint-plugin-react-hooks (opens new window) - ESLint 的 React Hooks 语法规则检查插件，React 官方发布。
  • Prettier (opens new window) - 代码格式化工具。
  • Flow (opens new window) - JavaScript 静态类型检查工具，FaceBook 官方发布。

• 测试（Test）

  • Jest (opens new window) - 单元测试工具，FaceBook 发布。

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

  • React Cosmos (opens new window)

• 文档（Document）

  • React Styleguidist (opens new window)

Hooks

Useful React Hook (opens new window) tools.

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

• 资源请求（Resource Request）

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

• 表单（Form）

  • React Hook Form (opens new window) - 表单处理。
  • Unform (opens new window) - 注重性能的表单处理工具。

• 事件（Events）

  • React Swipeable (opens new window) - 滑动事件处理。

• 其它（Others）

  • react-use (opens new window) - 一套 hook 工具包。
  • React Adaptive Loading Hooks & Utilities (opens new window) - 检测客户端的状态，例如网络状态、媒体支持等。
  • useWorker (opens new window) - 使用 Web Worker 运行复杂任务，创建非阻塞 UI。
  • use-deep-compare-effect (opens new window) - useEffect 的深比较模式。
  • react-laag (opens new window) - 创建工具提示或者弹出框。

状态管理

React application global state management and optimization.

（Recommend）其它收藏列表 👉 olegrjumin/awesome-react-state-management (opens new window)

• React-Redux (opens new window) - 为 React 应用提供 Redux 支持，Redux 官方实现。

  • Redux 工具链

• Mobx-React (opens new window) - 为 React 应用提供 Mobx 支持，Mbox 官方实现。

• Recoil (opens new window) - 状态管理工具，Facebook 官方发布。

• @xstate/react (opens new window) - 基于状态机模型。

• zustand (opens new window) - 轻量级状态管理库,类似于 Redux。

• jotai (opens new window) - 轻量级状态管理库,类似于 Recoil。

• Tools

  • Immutable.js (opens new window) - 不可变数据。
  • Immer (opens new window) - 不可变数据。

路由管理

Route management for SPA applications built with React.js.

• React-Router (opens new window)
• Reach Router (opens new window)
• react-location (opens new window)

UI 设计系统

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

• Rebass (opens new window)
• radix (opens new window)
• Reakit (opens new window)
• Geist (opens new window)

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 (opens new window).

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

Bootstrap

Based on Bootstrap (opens new window).

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

其它

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

独立组件

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

• 表单（Form）

  • Formik (opens new window) - 表单自动验证，异步提交，提供 Hook API。
  • React Select (opens new window) - 支持多选、自动完成、异步搜索选项等。
  • React Autosuggest (opens new window) - 输入建议，自动完成功能。
  • react-number-format (opens new window) - 数字输入格式化。
  • Downshift (opens new window) - 用来构建可访问的自动完成组件的底层组件。
  • react-final-form (opens new window)
  • xrender (opens new window) - 「表单/表格/图表」开箱即用解决方案

• 表格（Table）

  • React Table (opens new window)
  • RevoGrid (opens new window)
  • React Table Library (opens new window)
  • ali-react-table (opens new window) - 高性能 React 表格组件

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

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

• 文件上传（File Upload）

  • react-dropzone (opens new window) - 文件上传组件，支持 Hook API。

• 轮播（Carousel）

  • react-slick (opens new window)

• 图片（Image）

  • React Carousel Image Gallery (opens new window) - 图片轮播组件。
  • React Images (opens new window) - 图片点击原图查看、列表。
  • React Image Lightbox (opens new window) - 图片点击原图查看、列表、缩放。
  • React lightbox component (opens new window) - 图片点击原图查看、列表、缩放、旋转。（⚠️ 不再更新）
  • react-zmage (opens new window) - 图片点击原图查看、列表、旋转。

• 颜色选择器（Color Picker）

  • React Color (opens new window) - 颜色拾取器，支持十多种样式。

• 拖拽（Draggable）

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

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

  • react-virtualized (opens new window)
  • react-window (opens new window)

• 动画（Animation）

  • React Transition Group (opens new window) - 过渡动画。
  • Framer-Motion (opens new window) - 手势动画。
  • react-spring (opens new window) - 动画工具。
  • React-Motion (opens new window) - 动画工具。
  • React Move (opens new window) - 动画工具。
  • Renature (opens new window) - 物理动画库。
  • React Awesome Reveal (opens new window) - 基于 Intersection Observer API (opens new window) 和 Animate.css (opens new window) 的动画库。
  • React Spinners (opens new window) - 丰富的 Loading 动画。
  • react-confetti (opens new window) - 五彩纸屑动画。
  • React DOM Confetti (opens new window) - 五彩纸屑动画。
  • react-number-easing (opens new window) - 数字滚动动画。
  • scrollex (opens new window) - 滚动动画效果。
  • hamburger-react (opens new window) - 动画汉堡菜单图标。

• 二维码（QR Code）

  • qrcode.react (opens new window)
  • react-qr-code (opens new window)

• 用户引导（User guided tours）

  • React Joyride (opens new window)
  • Reactour (opens new window)

• 消息通知（Notification）

  • React-Toastify (opens new window) - 消息弹窗组件。
  • React Toast Notifications (opens new window) - 消息通知弹窗组件。
  • react-hot-toast (opens new window)
  • notistack (opens new window)

• 编辑器（Editor）

  • React Live (opens new window) - 交互式代码编辑器。

• 其它（Others）

  • React PDF (opens new window) - pdf 文件预览组件。
  • react-big-calendar (opens new window) - 事件日历，日程表组件。
  • React Diagrams (opens new window) - 流程图组件。
  • React Sortable Tree (opens new window) - 树形列表，支持拖拽。
  • React Measure (opens new window) - 组件尺寸测量。
  • React-Menu (opens new window) - 菜单组件，支持多级菜单、滚动菜单等。
  • Emoji Mart (opens new window) - emoji 表情选择组件。
  • react-responsive (opens new window) - 响应式 UI 工具组件。
  • use-count-up (opens new window) - 计数器。
  • react-markdown (opens new window) - markdown 渲染组件。
  • @uiball/loaders (opens new window) - loading 加载器。
  • kbar (opens new window) - 为页面添加键盘快捷键导航功能界面。

优化方案

React web application optimization solution.

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

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

• CSS In JS

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

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

  • Next.js (opens new window) - React.js 服务器端渲染框架。

• 国际化（i18n）

  • react-i18next (opens new window)
  • react-intl (opens new window)

• 加载占位符（Loading Placeholder）

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

• 其它（Others）

  • react-fast-compare (opens new window) - React 组件的高性能深度比较，可替代 lodash.isEqual。
  • react-error-boundary (opens new window) - 简单的可重用 React 错误边界组件。
  • react-refetch (opens new window) - 组件数据加载。

深入探索

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

• React 团队核心成员 Dan Abramov 的博客 (opens new window)文章
  • React as a UI Runtime (opens new window)
  • Why Do React Elements Have a $$typeof Property? (opens new window) - React 中 $$typeof 属性的意义。
• React in Depth Dev (opens new window) - 一些讲解 React 高级概念的文章。
  • Inside Fiber: in-depth overview of the new reconciliation algorithm in React (opens new window)
  • The how and why on React’s usage of linked list in Fiber to walk the component’s tree (opens new window)
  • In-depth explanation of state and props update in React (opens new window)
• React Fiber Architecture (opens new window) - React Fiber 架构简介。
• Good advice on JSX conditionals (opens new window) - 更好的使用 JSX 语法。

更多

More other unclassified resources.

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