Awesome React

有关 React 生态系统的精彩内容的集合.

• React
  • React General Resources
  • React Tutorials
  • React Development Tools
  • React Frameworks
  • React Component Libraries
  • React State Management and Data Fetching
  • React Styling
  • React Routing
  • React Libraries
  • React Testing
  • React Awesome Components
  • React Components Sandboxes
  • React Forms
  • React Tables and Grids
  • React Maps
  • React Charts
  • React Renderers
  • React Internationalization
  • React Graphics and Animations
  • React Integration
  • React Real Apps
• React Native
  • React Native General Resources
  • React Native Navigation
  • React Native Awesome Components
  • React Native Libraries

React

React General Resources

• React Official Website
• React GitHub
• Reactiflux Discord Channel
• React Community
• React Conferences
• React CodeSandbox Playground

React Tutorials

• React Official Tutorial
• Using React in Visual Studio Code
• React Interview Questions & Answers
• Design patterns and Component patterns for building powerful Web Apps
• A simple, scalable, and powerful architecture for building production ready React applications
• Cheatsheets for experienced React developers getting started with TypeScript
• The Fullstack Tutorial for GraphQL

React Development Tools

• create-react-app - Set up a modern Web app by running one command
• vite - Next Generation Frontend Tooling
• reactotron - A desktop app for inspecting your React and React Native projects
• eslint-plugin-react - React specific linting rules for ESLint
• why-did-you-render - Monkey patches React to notify you about avoidable re-renders

React Frameworks

• next - The React Framework
• blitz - The Missing Fullstack Toolkit for Next.js
• remix - Full stack web Framework that lets you focus on the user interface
• gatsby - Build modern websites with React
• react-admin - A frontend Framework for building B2B applications
• refine - Build your React-based CRUD applications, without constraints
• aleph - The Full-stack Framework in Deno

React Component Libraries

• material-ui - Material UI, which implements Google's Material Design
• ant-design - An enterprise-class UI design language and React UI library
• chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
• fluentui - Microsoft's Fluent UI
• blueprint - A React-based Palantir's UI toolkit for the web
• mantine – A fully featured React components library
• framework7 - Full featured HTML framework for building iOS & Android apps
• react-bootstrap - Bootstrap components built with React
• reactstrap - Simple React Bootstrap components
• semantic-ui-react - The official Semantic-UI-React integration
• evergreen - Evergreen React UI Framework by Segment
• grommet - A react-based framework that provides accessibility, modularity, responsiveness, and theming
• ariakit - Toolkit for building accessible web apps with React
• rsuite - A suite of React components
• baseweb - A React Component library implementing the Uber's Base design language
• eui - Elastic UI Framework
• react-spectrum - Adobe's collection of libraries and tools
• ring-ui - A collection of JetBrains Web UI components
• radix-primitives - An open-source UI component library for building high-quality web apps
• nextui - Beautiful, fast and modern React UI library

React State Management and Data Fetching

• redux - Predictable State Container for JavaScript Apps
• mobx - Simple, scalable state management
• zustand - Bear necessities for state management in React
• tanstack-query - Powerful asynchronous state management
• swr - React Hooks for Data Fetching
• apollo-client - A fully-featured, production ready caching GraphQL client
• relay - A framework for building data-driven React applications
• recoil - Experimental state management library for React apps
• jotai - Primitive and flexible state management for React
• xstate - State machines and statecharts for the modern web
• effector - Business logic with ease
• immer - Create the next immutable state by mutating the current one
• immutable-js - Immutable persistent data collections for Javascript
• rxdb - A fast, offline-first, reactive database for JavaScript Applications
• watermelondb - Reactive & asynchronous database for powerful React and React Native apps
• valtio - Valtio makes proxy-state simple for React and Vanilla

React Styling

• styled-components - Visual primitives for the component age
• emotion - CSS-in-JS library designed for high performance style composition
• linaria - Zero-Runtime CSS in JS library
• vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
• jss - authoring tool for CSS which uses JavaScript as a host language

React Routing

• react-router - Declarative routing for React
• wouter - A minimalist-friendly routing
• tanstack-router - Type-safe router with built-in caching & URL state management

React Libraries

• preact - Fast React alternative with the same modern API
• floating-ui - Toolkit to create floating elements
• loadable-components - The recommended Code Splitting library for React
• reapop - A simple and customizable React notifications system
• react-uploady - Modern file-upload components & hooks for React
• downshift - React autocomplete, combobox or select dropdown components

React Testing

• jest - Delightful JavaScript Testing
• enzyme - JavaScript Testing utilities for React
• react-testing-library - Simple and complete React DOM testing utilities
• react-hooks-testing-library - Simple and complete React hooks testing utilities
• cypress - Fast, easy and reliable testing for anything that runs in a browser

React Awesome Components

• Awesome React Components
• react-select - The Select Component for React
• react-dnd - Drag and Drop for React
• react-rnd - A resizable and draggable component for React
• react-dropzone - Simple drag-drop zone with React
• react-big-calendar - Calendar component
• react-datepicker - A simple and reusable datepicker component for React
• react-loading-skeleton - Create skeleton screens that automatically adapt to your app
• react-qrcode - QR component for use with React
• react-archer - Draw arrows between React elements
• react-device-detect - Detect device, and render view accordingly
• react-colorful - A tiny color picker component
• react-icons - SVG React icons of popular icon packs
• react-complex-tree - Unopinionated Accessible Tree
• react-insta-stories - A React component for Instagram like stories
• swiper - Most modern mobile touch slider
• keen-slider - The Touch slider carousel
• cookie-consent-banner – The lightweight and flexible Cookie Consent Banner
• heart-switch - A heart-shaped toggle switch component for React
• kbar - Fast, portable, and extensible cmd+k interface for your site
• tagify - Lightweight, efficient Tags input component

React Components Sandboxes

• storybook - Storybook is a frontend workshop for building UI components and pages in isolation
• react-styleguidist - Isolated React component development environment with a living style guide
• react-cosmos - Dev tool for creating reusable React components

React Forms

• react-hook-form - React Hooks for form state management and validation
• formik - Build forms in React, without the tears
• react-jsonschema-form - A React component for building Web forms from JSON Schema
• react-final-form - High performance subscription-based form state management for React
• formily - Alibaba Group Unified Form Solution
• vest - Declarative validations framework

React Tables and Grids

• react-grid-layout - A draggable and resizable grid layout with responsive breakpoints
• tanstack-table - Headless UI for building powerful tables & datagrids
• react-data-grid - Feature-rich and customizable data grid React component

React Maps

• react-map-gl - React friendly API wrapper around MapboxGL JS
• react-leaflet - React components for Leaflet maps

React Charts

• recharts - Redefined chart library built with React and D3
• visx - Visualization components
• victory - A collection of composable React components for building interactive data visualizations
• react-vis - Data Visualization Components
• nivo - Provides a rich set of data visualization components built on top of the D3 and React libraries

React Renderers

• react-three-fiber - A React renderer for Three.js
• ink - React for interactive command-line apps
• remotion - Make videos programmatically with React
• react-pdf - Create PDF files using React
• react-figma - A React renderer for Figma

React Internationalization

• formatjs - Internationalize your web apps
• react-i18next - Internationalization for React done right
• typesafe-i18n - A fully type-safe and lightweight internationalization library

React Graphics and Animations

• react-spring - A spring physics based React animation library
• framer-motion - Open source, production-ready animation and gesture library for React
• react-transition-group - An easy way to perform animations for React
• auto-animate - A zero-config, drop-in animation utility that adds smooth transitions
• react-tsparticles - Easily create highly customizable particles effects
• react-parallax-tilt - Easily apply tilt hover effect on React components
• gooey-react - The gooey effect for React

React Integration

• rescript-compiler - A robustly typed language that compiles to efficient and human-readable JavaScript
• react-rails - Integrate React with Rails
• reagent - A minimalistic ClojureScript interface to React
• fulcro - A library for development of web applications in clj/cljs
• tailwind-react - Article that shows you how to integrate React application with Tailwind

React Real Apps

• mattermost-server - An open source platform for secure collaboration
• kibana - Your window into the Elastic Stack
• webamp - Winamp 2 reimplemented for the browser
• overreacted - Personal blog by Dan Abramov

React Native

React Native General Resources

• React Native Official Website
• React Native GitHub
• React Native Community
• Expo
• Expo Snack Playground

React Native Navigation

• react-navigation - Routing and navigation for your React Native apps
• expo-router - The File-based router for universal React Native apps

React Native Awesome Components

• react-native-vector-icons - Customizable Icons for React Native
• react-native-gifted-chat - The most complete chat UI for React Native

React Native Libraries

• realm-js - 移动数据库：SQLite 和键值存储的替代方案
• react-native-device-info - React Native iOS 和 Android 的设备信息