├── .gitignore └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | tmp 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome React [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | 3 | A collection of awesome things regarding the React ecosystem. 4 | 5 | - [React](#react) 6 | - [React General Resources](#react-general-resources) 7 | - [React Tutorials](#react-tutorials) 8 | - [React Frameworks](#react-frameworks) 9 | - [React Component Libraries](#react-component-libraries) 10 | - [React State Management and Data Fetching](#react-state-management-and-data-fetching) 11 | - [React Styling](#react-styling) 12 | - [React Routing](#react-routing) 13 | - [React Development Tools](#react-development-tools) 14 | - [React Libraries](#react-libraries) 15 | - [React Testing](#react-testing) 16 | - [React Awesome Components](#react-awesome-components) 17 | - [React Components Sandboxes](#react-components-sandboxes) 18 | - [React Forms](#react-forms) 19 | - [React Tables and Grids](#react-tables-and-grids) 20 | - [React Maps](#react-maps) 21 | - [React Charts](#react-charts) 22 | - [React Renderers](#react-renderers) 23 | - [React Internationalization](#react-internationalization) 24 | - [React Graphics and Animations](#react-graphics-and-animations) 25 | - [React Integration](#react-integration) 26 | - [React Real Apps](#react-real-apps) 27 | - [React Native](#react-native) 28 | - [React Native General Resources](#react-native-general-resources) 29 | - [React Native Navigation](#react-native-navigation) 30 | - [React Native Awesome Components](#react-native-awesome-components) 31 | - [React Native Libraries](#react-native-libraries) 32 | - [Contribution](#contribution) 33 | 34 | ### React 35 | 36 | #### React General Resources 37 | 38 | - [React Official Website](https://react.dev/) 39 | - [React GitHub](https://github.com/facebook/react) 40 | - [Reactiflux Discord Channel](http://www.reactiflux.com/) 41 | - [React Community](https://react.dev/community) 42 | - [React Conferences](https://react.dev/community/conferences) 43 | - [React CodeSandbox Playground](https://codesandbox.io/s/new) 44 | 45 | #### React Tutorials 46 | 47 | - [React Official Tutorial](https://react.dev/learn) 48 | - [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial) 49 | - [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions) 50 | - [Design patterns and Component patterns for building powerful Web Apps](https://www.patterns.dev/) 51 | - [A simple, scalable, and powerful architecture for building production ready React applications](https://github.com/alan2207/bulletproof-react) 52 | - [Cheatsheets for experienced React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) 53 | - [The Fullstack Tutorial for GraphQL](https://github.com/howtographql/howtographql) 54 | 55 | #### React Frameworks 56 | 57 | - [next](https://github.com/vercel/next.js) - The React Framework 58 | - [remix](https://github.com/remix-run/remix) - Full stack web Framework that lets you focus on the user interface 59 | - [gatsby](https://github.com/gatsbyjs/gatsby) - Build modern websites with React 60 | - [react-admin](https://github.com/marmelab/react-admin) - A frontend Framework for building B2B applications 61 | - [refine](https://github.com/refinedev/refine) - Build your React-based CRUD applications, without constraints 62 | 63 | #### React Component Libraries 64 | 65 | - [material-ui](https://github.com/mui/material-ui) - Ready-to-use foundational React components 66 | - [ant-design](https://github.com/ant-design/ant-design) - An enterprise-class UI design language and React UI library 67 | - [shadcn-ui](https://github.com/shadcn-ui/ui) - Beautifully designed components built using Radix UI and Tailwind CSS 68 | - [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React 69 | - [fluentui](https://github.com/microsoft/fluentui) - Microsoft's Fluent UI 70 | - [framework7](https://github.com/framework7io/framework7) - Full featured HTML framework for building iOS & Android apps 71 | - [ariakit](https://github.com/ariakit/ariakit) - Toolkit for building accessible web apps with React 72 | - [mantine](https://github.com/mantinedev/mantine) - Fully featured React components library 73 | - [react-email](https://github.com/resend/react-email) - Unstyled components for creating beautiful emails 74 | 75 | #### React State Management and Data Fetching 76 | 77 | - [redux](https://github.com/reduxjs/redux) - Predictable State Container for JavaScript Apps 78 | - [mobx](https://github.com/mobxjs/mobx) - Simple, scalable state management 79 | - [zustand](https://github.com/pmndrs/zustand) - Bear necessities for state management in React 80 | - [tanstack-query](https://github.com/TanStack/query) - Powerful asynchronous state management 81 | - [swr](https://github.com/vercel/swr) - React Hooks for Data Fetching 82 | - [apollo-client](https://github.com/apollographql/apollo-client) - A fully-featured, production ready caching GraphQL client 83 | - [relay](https://github.com/facebook/relay) - A framework for building data-driven React applications 84 | - [jotai](https://github.com/pmndrs/jotai) - Primitive and flexible state management for React 85 | - [xstate](https://github.com/statelyai/xstate) - State machines and statecharts for the modern web 86 | - [effector](https://github.com/zerobias/effector) - Business logic with ease 87 | - [immer](https://github.com/immerjs/immer) - Create the next immutable state by mutating the current one 88 | - [immutable-js](https://github.com/immutable-js/immutable-js) - Immutable persistent data collections for Javascript 89 | - [rxdb](https://github.com/pubkey/rxdb) - A fast, offline-first, reactive database for JavaScript Applications 90 | 91 | #### React Styling 92 | 93 | - [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age 94 | - [emotion](https://github.com/emotion-js/emotion) - CSS-in-JS library designed for high performance style composition 95 | - [vanilla-extract](https://github.com/seek-oss/vanilla-extract) - Zero-runtime Stylesheets-in-TypeScript 96 | 97 | #### React Routing 98 | 99 | - [react-router](https://github.com/remix-run/react-router) - Declarative routing for React 100 | - [wouter](https://github.com/molefrog/wouter) - A minimalist-friendly routing 101 | - [tanstack-router](https://github.com/TanStack/router) - Type-safe router with built-in caching & URL state management 102 | 103 | #### React Development Tools 104 | 105 | - [create-react-app](https://github.com/facebook/create-react-app) - Set up a modern Web app by running one command 106 | - [vite](https://github.com/vitejs/vite) - Next Generation Frontend Tooling 107 | - [parcel](https://github.com/parcel-bundler/parcel) - The zero configuration build tool for the web 108 | - [million](https://github.com/aidenybai/million) - An extremely fast and lightweight optimizing compiler 109 | - [reactotron](https://github.com/skellock/reactotron) - A desktop app for inspecting your React and React Native projects 110 | - [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for ESLint 111 | - [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - Monkey patches React to notify you about avoidable re-renders 112 | 113 | #### React Libraries 114 | 115 | - [preact](https://github.com/preactjs/preact) - Fast React alternative with the same modern API 116 | - [floating-ui](https://github.com/floating-ui/floating-ui) - Toolkit to create floating elements 117 | - [loadable-components](https://github.com/gregberge/loadable-components) - The recommended Code Splitting library for React 118 | - [react-uploady](https://github.com/rpldy/react-uploady) - Modern file-upload components & hooks for React 119 | - [downshift](https://github.com/downshift-js/downshift) - React autocomplete, combobox or select dropdown components 120 | - [react-error-boundary](https://github.com/bvaughn/react-error-boundary) - A React error boundary component that lets you catch errors 121 | 122 | #### React Testing 123 | 124 | - [jest](https://github.com/facebook/jest) - Delightful JavaScript Testing 125 | - [react-testing-library](https://github.com/testing-library/react-testing-library) - Simple and complete React DOM testing utilities 126 | - [cypress](https://github.com/cypress-io/cypress) - Fast, easy and reliable testing for anything that runs in a browser 127 | 128 | #### React Awesome Components 129 | 130 | - [Awesome React Components](https://github.com/brillout/awesome-react-components) 131 | - [react-select](https://github.com/JedWatson/react-select) - The Select Component for React 132 | - [react-big-calendar](https://github.com/jquense/react-big-calendar) - Calendar component 133 | - [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - A simple and reusable datepicker component for React 134 | - [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton) - Create skeleton screens that automatically adapt to your app 135 | - [react-qrcode](https://github.com/zpao/qrcode.react) - QR component for use with React 136 | - [react-archer](https://github.com/pierpo/react-archer) - Draw arrows between React elements 137 | - [react-icons](https://github.com/react-icons/react-icons) - SVG React icons of popular icon packs 138 | - [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - Unopinionated Accessible Tree 139 | - [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - A React component for Instagram like stories 140 | - [swiper](https://github.com/nolimits4web/swiper) - Most modern mobile touch slider 141 | - [keen-slider](https://github.com/rcbyr/keen-slider) - The Touch slider carousel 142 | - [cookie-consent-banner](https://github.com/porscheofficial/cookie-consent-banner) – The lightweight and flexible Cookie Consent Banner 143 | - [heart-switch](https://github.com/anatoliygatt/heart-switch) - A heart-shaped toggle switch component for React 144 | - [kbar](https://github.com/timc1/kbar) - Fast, portable, and extensible cmd+k interface for your site 145 | - [tagify](https://github.com/yairEO/tagify) - Lightweight, efficient Tags input component 146 | - [puck](https://github.com/measuredco/puck) - The visual editor for React 147 | 148 | #### React Components Sandboxes 149 | 150 | - [storybook](https://github.com/storybookjs/storybook) - Storybook is a frontend workshop for building UI components and pages in isolation 151 | - [react-styleguidist](https://github.com/styleguidist/react-styleguidist) - Isolated React component development environment with a living style guide 152 | - [react-cosmos](https://github.com/react-cosmos/react-cosmos) - Dev tool for creating reusable React components 153 | - [bit](https://github.com/teambit/bit) - A build system for development of composable software 154 | 155 | #### React Forms 156 | 157 | - [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React Hooks for form state management and validation 158 | - [formik](https://github.com/jaredpalmer/formik) - Build forms in React, without the tears 159 | - [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSON Schema 160 | - [formily](https://github.com/alibaba/formily) - Alibaba Group Unified Form Solution 161 | - [vest](https://github.com/ealush/vest) - Declarative validations framework 162 | 163 | #### React Tables and Grids 164 | 165 | - [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints 166 | - [tanstack-table](https://github.com/TanStack/table) - Headless UI for building powerful tables & datagrids 167 | - [react-data-grid](https://github.com/adazzle/react-data-grid) - Feature-rich and customizable data grid React component 168 | 169 | #### React Maps 170 | 171 | - [react-map-gl](https://github.com/visgl/react-map-gl) - React friendly API wrapper around MapboxGL JS 172 | - [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps 173 | 174 | #### React Charts 175 | 176 | - [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3 177 | - [visx](https://github.com/airbnb/visx) - Visualization components 178 | - [victory](https://github.com/FormidableLabs/victory) - A collection of composable React components for building interactive data visualizations 179 | - [react-vis](https://github.com/uber/react-vis) - Data Visualization Components 180 | - [nivo](https://github.com/plouc/nivo) - Provides a rich set of data visualization components built on top of the D3 and React libraries 181 | - [xyflow](https://github.com/xyflow/xyflow) - A customizable React component for building node-based editors and interactive diagrams 182 | 183 | #### React Renderers 184 | 185 | - [react-three-fiber](https://github.com/pmndrs/react-three-fiber) - A React renderer for Three.js 186 | - [ink](https://github.com/vadimdemedes/ink) - React for interactive command-line apps 187 | - [remotion](https://github.com/remotion-dev/remotion) - Make videos programmatically with React 188 | - [react-pdf](https://github.com/diegomura/react-pdf) - Create PDF files using React 189 | - [react-figma](https://github.com/react-figma/react-figma) - A React renderer for Figma 190 | 191 | #### React Internationalization 192 | 193 | - [formatjs](https://github.com/formatjs/formatjs) - Internationalize your web apps 194 | - [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for React done right 195 | 196 | #### React Graphics and Animations 197 | 198 | - [react-spring](https://github.com/pmndrs/react-spring) - A spring physics based React animation library 199 | - [framer-motion](https://github.com/framer/motion) - Open source, production-ready animation and gesture library for React 200 | - [auto-animate](https://github.com/formkit/auto-animate) - A zero-config, drop-in animation utility that adds smooth transitions 201 | - [react-tsparticles](https://github.com/matteobruni/tsparticles) - Easily create highly customizable particles effects 202 | - [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - Easily apply tilt hover effect on React components 203 | - [simple-parallax-js](https://github.com/geosigno/simpleParallax.js) - The easiest way to get a parallax effect with React and JavaScript 204 | 205 | #### React Integration 206 | 207 | - [rescript-compiler](https://github.com/rescript-lang/rescript-compiler) - A robustly typed language that compiles to efficient and human-readable JavaScript 208 | - [react-rails](https://github.com/reactjs/react-rails) - Integrate React with Rails 209 | - [fulcro](https://github.com/fulcrologic/fulcro) - A library for development of web applications in clj/cljs 210 | - [tailwind-react](https://tw-elements.com/docs/standard/integrations/react-integration/) - Article that shows you how to integrate React application with Tailwind 211 | 212 | #### React Real Apps 213 | 214 | - [mattermost-server](https://github.com/mattermost/mattermost-server) - An open source platform for secure collaboration 215 | - [kibana](https://github.com/elastic/kibana) - Your window into the Elastic Stack 216 | - [webamp](https://github.com/captbaritone/webamp) - Winamp 2 reimplemented for the browser 217 | - [overreacted](https://github.com/gaearon/overreacted.io) - Personal blog by Dan Abramov 218 | - [wave](https://github.com/wavetermdev/waveterm) - An open-source, cross-platform terminal for seamless workflows 219 | 220 | ### React Native 221 | 222 | #### React Native General Resources 223 | 224 | - [React Native Official Website](https://reactnative.dev/) 225 | - [React Native GitHub](https://github.com/facebook/react-native) 226 | - [React Native Community](https://reactnative.dev/community/overview) 227 | - [Expo](https://expo.dev/) 228 | - [Expo Snack Playground](https://snack.expo.dev/) 229 | 230 | #### React Native Navigation 231 | 232 | - [react-navigation](https://github.com/react-navigation/react-navigation) - Routing and navigation for your React Native apps 233 | 234 | #### React Native Awesome Components 235 | 236 | - [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) - Customizable Icons for React Native 237 | - [react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat) - The most complete chat UI for React Native 238 | 239 | #### React Native Libraries 240 | 241 | - [realm-js](https://github.com/realm/realm-js) - A mobile database: an alternative to SQLite & key-value stores 242 | - [react-native-device-info](https://github.com/react-native-device-info/react-native-device-info) - Device Information for React Native iOS and Android 243 | 244 | ### Contribution 245 | 246 | This list began as a personal compilation of interesting things related to React. When it was initiated, React was still in beta, a special script was required to convert JSX to JS, and Flux had not yet been released. Today, React has become mainstream, with numerous developments taking place. Kindly refrain from using this list as an advertisement board or a space to promote your experiments. We focus on sharing entirely free resources here. Please feel free to propose updates for outdated projects and articles, as well as new contributions. Your input and suggestions are wholeheartedly♡ appreciated. (✿◠‿◠) 247 | 248 | [![CC0](https://i.creativecommons.org/l/by/4.0/88x31.png)](http://creativecommons.org/licenses/by/4.0/) 249 | --------------------------------------------------------------------------------