{"id":78937,"url":"https://github.com/drbarzaga/React-Toolkit","name":"React-Toolkit","description":"The React developer's toolkit curated libraries, tools, and resources.","projects_count":316,"last_synced_at":"2026-09-28T05:00:24.261Z","repository":{"id":260145692,"uuid":"880326116","full_name":"drbarzaga/React-Toolkit","owner":"drbarzaga","description":"The React developer's toolkit curated libraries, tools, and resources.","archived":false,"fork":false,"pushed_at":"2026-09-12T17:33:31.000Z","size":721,"stargazers_count":92,"open_issues_count":0,"forks_count":15,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-09-18T12:53:01.418Z","etag":null,"topics":["awesome","awesome-list","developer-tools","documentation","frontend","frontend-toolkit","hooks","javascript","pacakges","performance","react","testing","toolbox","toolkit","toolset","typescript","useful-utilities","vscode-extension","web-development"],"latest_commit_sha":null,"homepage":"https://reacttoolkit.vercel.app","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drbarzaga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":null},"funding":{"github":null,"patreon":"drbarzaga","open_collective":null,"ko_fi":"dayanperez","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"dayanperez","thanks_dev":null,"custom":null}},"created_at":"2024-10-29T14:23:19.000Z","updated_at":"2026-09-12T20:32:32.000Z","dependencies_parsed_at":"2026-08-12T03:25:52.157Z","dependency_job_id":null,"html_url":"https://github.com/drbarzaga/React-Toolkit","commit_stats":null,"previous_names":["drbarzaga/react-frontend-toolkit","drbarzaga/react-toolkit"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/drbarzaga/React-Toolkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drbarzaga%2FReact-Toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drbarzaga%2FReact-Toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drbarzaga%2FReact-Toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drbarzaga%2FReact-Toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drbarzaga","download_url":"https://codeload.github.com/drbarzaga/React-Toolkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drbarzaga%2FReact-Toolkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":341301770,"owners_count":37788475,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-09-28T02:00:06.534Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-11-18T06:18:03.761Z","updated_at":"2026-09-28T05:00:24.261Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["🧰 React Toolkit","🧰 React Frontend Toolkit","Animations","Bundlers","State Management","Monorepo Tools","Component Development","Styling","Data Fetching","Testing","AI \u0026 LLM Integration","Utilities","Tables","DevTools","Drag \u0026 Drop","File Handling","Routing","Popular Platforms","UI Frameworks \u0026 Libraries","Charts","Documentation"],"sub_categories":["Hosting","Documentation","❤️ Support","Testing","Popular Platforms","Live Coding Tools","Styling","Official Resources","Frameworks","Hooks","Authentication","UI Frameworks \u0026 Libraries","Internationalization","Bundlers","Data Fetching","Linting \u0026 Formatting","Utilities","Real-time Communication","Visual Studio Code Extensions","Icons","Forms","Notifications","Virtualization","Miscellaneous","Tables","Forums","Charts","Animations","State Management","File Handling","Validations","Audio \u0026 Video","PDFs","Maps","Drag \u0026 Drop","Search Engine Optimization","Code Splitting","Routing","Performance Optimization","ℹ️ About","📢 Share","🚀 React Frontend Toolkit CLI","UI Components","DevTools","Error Handling","✉️ Contact","YouTube Channels"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# React Toolkit\n\nEssential libraries and tools for building modern React applications.\n\n[![Stars](https://img.shields.io/github/stars/drbarzaga/react-toolkit?style=flat-square\u0026color=yellow)](https://github.com/drbarzaga/react-toolkit/stargazers)\n[![Forks](https://img.shields.io/github/forks/drbarzaga/react-toolkit?style=flat-square)](https://github.com/drbarzaga/react-toolkit/network/members)\n[![Issues](https://img.shields.io/github/issues/drbarzaga/react-toolkit?style=flat-square)](https://github.com/drbarzaga/react-toolkit/issues)\n[![License](https://img.shields.io/github/license/drbarzaga/react-toolkit?style=flat-square)](LICENSE)\n\n[![Share on X](https://img.shields.io/badge/Share%20on%20X-black?logo=x\u0026style=flat-square)](https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20React%20toolkit%20collection!%20https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-toolkit)\n[![Share on LinkedIn](https://img.shields.io/badge/Share%20on%20LinkedIn-0A66C2?logo=linkedin\u0026style=flat-square)](https://www.linkedin.com/shareArticle?mini=true\u0026url=https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-toolkit)\n[![Share on Reddit](https://img.shields.io/badge/Share%20on%20Reddit-FF4500?logo=reddit\u0026style=flat-square)](https://www.reddit.com/submit?url=https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-toolkit\u0026title=React%20Toolkit%20Collection)\n\n\u003cbr/\u003e\n\n![React Toolkit Banner](assets/banner.png)\n\n\u003c/div\u003e\n\n---\n\n## Table of Contents\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\n\n**Foundation**\n- [Official Resources](#official-resources)\n- [Frameworks](#frameworks)\n- [Authentication](#authentication)\n- [Routing](#routing)\n\n**UI \u0026 Styling**\n- [UI Frameworks \u0026 Libraries](#ui-frameworks--libraries)\n- [Styling](#styling)\n- [Icons](#icons)\n- [Animations](#animations)\n- [Miscellaneous](#miscellaneous)\n\n**Components**\n- [Tables](#tables)\n- [Forms](#forms)\n- [Notifications](#notifications)\n- [Drag \u0026 Drop](#drag--drop)\n- [Maps](#maps)\n- [File Handling](#file-handling)\n- [PDFs](#pdfs)\n- [Audio \u0026 Video](#audio--video)\n\n\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\n**Data \u0026 State**\n- [State Management](#state-management)\n- [Data Fetching](#data-fetching)\n- [Validations](#validations)\n- [Real-time Communication](#real-time-communication)\n\n**Tooling**\n- [Bundlers](#bundlers)\n- [Linting \u0026 Formatting](#linting--formatting)\n- [Testing](#testing)\n- [DevTools](#devtools)\n- [Performance Optimization](#performance-optimization)\n- [Error Handling](#error-handling)\n- [Code Splitting](#code-splitting)\n- [Hosting](#hosting)\n\n**Advanced**\n- [Hooks](#hooks)\n- [Charts](#charts)\n- [Virtualization](#virtualization)\n- [Internationalization](#internationalization)\n- [Search Engine Optimization](#search-engine-optimization)\n- [Utilities](#utilities)\n\n\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\n**Development**\n- [Component Development](#component-development)\n- [Documentation](#documentation)\n- [Monorepo Tools](#monorepo-tools)\n- [AI \u0026 LLM Integration](#ai--llm-integration)\n\n**Learning \u0026 Community**\n- [Visual Studio Code Extensions](#visual-studio-code-extensions)\n- [Live Coding Tools](#live-coding-tools)\n- [Popular Platforms](#popular-platforms)\n- [GitHub Repositories](#github-repositories)\n- [YouTube Channels](#youtube-channels)\n- [Forums](#forums)\n\n**Project**\n- [Contributing](#contributing)\n- [Contributors](#contributors)\n- [License](#license)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Official Resources\n\n*The starting point — directly from the React team.*\n\n- **[React Website](https://react.dev/)**\n- **[React Repository](https://github.com/facebook/react)**\n- **[React Community](https://react.dev/community)**\n- **[React Blog](https://react.dev/blog)**\n- **[React Conferences](https://react.dev/community/conferences)**\n- **[React Quick Start Tutorial](https://react.dev/learn)**\n- **[Using React in VS Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)**\n\n## Frameworks\n\n*Full-stack and meta-frameworks built on top of React.*\n\n- **[Next.js](https://nextjs.org/)**: A React framework that enables server-side rendering and static site generation for building fast and SEO-friendly web applications.\n- **[Gatsby](https://www.gatsbyjs.com/)**: A React-based open-source framework for creating fast, secure, and powerful websites using modern web technologies.\n- **[Remix](https://remix.run/)**: A full stack web framework that lets you focus on the user interface and works seamlessly with React.\n- **[Blitz.js](https://blitzjs.com/)**: A framework built on top of Next.js, providing a full-stack experience with a focus on developer productivity.\n- **[RedwoodJS](https://redwoodjs.com/)**: An opinionated, full-stack, serverless web application framework built on React, GraphQL, and Prisma.\n- **[Refine](https://refine.dev/)**: A React Framework for building internal tools, admin panels, dashboards \u0026 B2B apps with unmatched flexibility.\n- **[Tuono](https://tuono.dev/)**: A full-stack web framework for building React applications using Rust as the backend with a strong focus on usability and performance.\n\n## Authentication\n\n*Identity and access management solutions for React apps.*\n\n- **[Auth.js](https://authjs.dev/)**: Authentication for the Web. Free and open source.\n- **[Auth0](https://auth0.com/)**: A platform for securing access to your applications, devices, and users.\n- **[Okta](https://developer.okta.com/docs/guides/sign-into-spa/react/before-you-begin/)**: A complete identity management solution for your web and mobile apps.\n- **[Clerk](https://clerk.dev/)**: Authentication and user management for modern applications.\n- **[Better Auth](https://better-auth.com/)**: The most comprehensive authentication framework for TypeScript.\n\n## Routing\n\n*Client-side navigation and URL management.*\n\n- **[Wouter](https://github.com/molefrog/wouter)**: A minimalist-friendly ~2.1KB routing for React and Preact.\n- **[Tanstack Router](https://tanstack.com/router/latest)**: A powerful routing library for React applications.\n- **[React Router](https://reactrouter.com/)**: The standard routing library for React applications.\n- **[Reach Router](https://reach.tech/router)**: A routing library with a focus on accessibility and simplicity.\n\n## Drag \u0026 Drop\n\n*Libraries for building intuitive drag-and-drop interactions.*\n\n- **[Swapy](https://swapy.tahazsh.com/)**: A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.\n- **[DnDKit](https://dndkit.com/)**: A lightweight, performant, accessible and extensible drag \u0026 drop toolkit for React.\n- **[React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)**: A powerful and beautiful drag-and-drop library for lists with React.\n- **[React DnD](https://react-dnd.github.io/react-dnd/about)**: A set of React utilities to help you build complex drag-and-drop interfaces.\n- **[SortableJS](https://github.com/SortableJS/react-sortablejs)**: A React wrapper for SortableJS, a library for reorderable drag-and-drop lists.\n- **[React Dragula](https://github.com/bevacqua/react-dragula)**: A drag-and-drop library for React based on Dragula.\n- **[React Complex Tree](https://rct.lukasbach.com/)**: Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop.\n- **[FormKit’s Drag and Drop](https://drag-and-drop.formkit.com/)**:A small library for adding data-first drag and drop sorting and transferring for lists in your app. It’s simple, flexible, framework agnostic, and clocks in at only ~4Kb gzipped.\n- **[react-movable](https://react-movable.pages.dev/)**: Drag and drop for your React lists and tables.\n- **[GridstackJS](https://gridstackjs.com/)**: Mobile-friendly modern TypeScript library for dashboard layout and creation. Drag-and-drop, multi-column responsive dashboards with bindings for React, Angular, Vue and more.\n\n## UI Frameworks \u0026 Libraries\n\n*Component libraries and design systems to build polished interfaces fast.*\n\n- **[Ivy Tendril](https://github.com/Ivy-Interactive/Ivy-Tendril)**: Open-source agentic software factory with an amazing UI that handles parallel Git worktrees for you, complete with programmatic verifications and fast review loops.\n- **[Shadcn UI](https://ui.shadcn.com/)**: A modern UI framework for building responsive and accessible web applications.\n- **[Eldora UI](https://www.eldoraui.site/)**: An open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.\n- **[Radix UI](https://www.radix-ui.com/)**: An open source component library optimized for fast development, easy maintenance, and accessibility.\n- **[Material UI](https://mui.com/material-ui/)**: An open-source React component library that implements Google's Material Design.\n- **[Material Tailwind](https://www.material-tailwind.com/)**: An open-source library that uses the power of Tailwind CSS and React to help you build unique web projects faster and easier.\n- **[React Spectrum Libraries](https://react-spectrum.adobe.com/)**: A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.\n- **[Flowbite React](https://flowbite-react.com/)**: An open-source UI component library built on top of Tailwind CSS with React components and based on the Flowbite Design System.\n- **[Next UI](https://nextui.org/)**: A modern design system for building beautiful React applications.\n- **[Evergreen](https://evergreen.segment.com/)**: A React UI Framework for building ambitious products on the web.\n- **[Chakra UI](https://www.chakra-ui.com/)**: A simple, modular, and accessible component library that gives you the building blocks to build your React applications.\n- **[Mantine](https://mantine.dev/)**: A fully featured React components library with native dark theme support.\n- **[Ant Design](https://ant.design/)**: A design system with values of Nature and Determinacy for better user experience of enterprise applications.\n- **[Blueprint](https://blueprintjs.com/)**: A React-based UI toolkit for the web.\n- **[FluentUI](https://react.fluentui.dev/?path=/docs/concepts-introduction--docs)**: A collection of UX frameworks from Microsoft that help you build web apps that match the Microsoft Design Language\n- **[Ariakit](https://ariakit.org/)**: A modern React UI library that helps you build fast, accessible, and responsive web applications.\n- **[NativeBase](https://nativebase.io/)**: Mobile-first, accessible components for React Native \u0026 Web to build consistent UI across Android, iOS and Web.\n- **[React Bootstrap](https://react-bootstrap.github.io/)**: Bootstrap components built with React.\n- **[Grommet](https://v2.grommet.io/)**: Build responsive and accessible mobile-first projects for the web with an easy to use component library.\n- **[Reakit](https://reakit.io/)**: Toolkit for building accessible web apps with React.\n- **[PrimeReact](https://primereact.org/)**: A comprehensive suite of customizable, feature-rich UI components.\n- **[ZenUI](https://zenui.net/)**: An Tailwind CSS components library for any needs. Comes with UI examples \u0026 blocks, templates, Icons, Color Palette and more.\n- **[FlyonUI](https://flyonui.com/)**: An open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.\n- **[DaysiUI](https://daisyui.com/)**:The most popular component library for Tailwind CSS.\n- **[Headless UI](https://headlessui.dev/)**: A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.\n- **[React Email](https://react.email/)**: An open source component library optimized for fast development, easy maintenance, and accessibility.\n- **[Polaris](https://polaris.shopify.com/)**: Shopify’s design system to help us work together to build a great experience for all of our merchants.\n- **[Apsara](https://apsara-raystack.vercel.app/)**: An elegant and beautiful re-usable React UI components build using Radix UI and Stitches CSS-in-JS.\n- **[dotUI](https://dotui.org/)**: Minimalist component library focused on simplicity and performance.\n- **[TailusUI](https://ui.tailus.io/)**: Highly customizable React components for crafting modern, personalized websites and applications.\n- **[Aceternity UI](https://ui.aceternity.com/)**: Copy paste the most trending components and use them in your websites without having to worry about styling and animations.\n- **[Justd](https://getjustd.com/)**: Accessible React UI components similar to Shadcn/ui but using React Area instead of Radix.\n- **[rsuitejs](https://rsuitejs.com/)**: A suite of React components, sensible UI design, and a friendly development experience.\n- **[Park UI](https://park-ui.com/)**: Beautiful designed components build with Ark UI and Panda CSS.\n- **[Theme UI](https://theme-ui.com/)**: Build consistent, themeable React apps based on constraint-based design principles.\n- **[Gestalt](https://gestalt.pinterest.systems)**: A set of React UI components that supports Pinterest’s design language.\n- **[Elastic UI](https://eui.elastic.co)**: The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics.\n- **[Tremor](https://tremor.so)**: React components to build charts and dashboards.\n- **[Sailboat UI](https://sailboatui.com/)**: A modern UI component library for Tailwind CSS.\n- **[Ring UI](https://jetbrains.github.io/ring-ui/master/index.html)**: A collection of JetBrains Web UI components.\n- **[Orbit](https://orbit.kiwi/)**: React components of open-source Orbit design system by Kiwi.com.\n- **[Preline](https://www.preline.co/)**: An open-source Tailwind CSS components library for any needs.\n- **[Magic UI](https://www.maigc.design/)**: 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion.\n- **[CuiCui](https://cuicui.day)**:A collection of components, tools, and hooks that are designed to be simple, customizable and educational.\n- **[Kokonut UI](https://kokonutui.com/)**: Open Source UI components built with Tailwind CSS for React and Next.js.\n- **[EverUI](https://www.ever-ui.com/)**: Unstyled highly composable components that you can copy/paste in your own codebase.\n- **[Indie UI](https://ui.indie-starter.dev/)**: Rich Styled UI Components built with Reactjs, shadcn and Framer Motion for animation.\n- **[Reui](https://reui.io/)**: Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.\n- **[SVAR React Core](https://svar.dev/react/core/)**: 30+ open-source React components and form controls — buttons, popups, menus, date pickers, and more\n\n## Tables\n\n*Headless and full-featured solutions for data-heavy grids.*\n\n- **[Tanstack Table](https://tanstack.com/table/latest)**: A headless UI for building powerful tables and datagrids.\n- **[Material-UI Table](https://mui.com/components/tables/)**: Tables built with Material-UI, a popular React UI framework.\n- **[AG Grid](https://www.ag-grid.com/react-data-grid/)**: A feature-rich datagrid designed for the major JavaScript frameworks.\n- **[React Data Grid](https://adazzle.github.io/react-data-grid/)**: Excel-like grid component built with React.\n- **[Griddle](https://griddlegriddle.github.io/Griddle/)**: A simple grid component for use with React.\n- **[Tabulator](https://tabulator.info/)**: Interactive Tables and Data Grids.\n- **[SVAR React DataGrid](https://svar.dev/react/datagrid/)**: A React data grid with virtual scrolling, filtering, in-cell editing, and tree data.\n\n## Forms\n\n*Form state, validation, and submission made simple.*\n\n- **[React Hook Form](https://react-hook-form.com/)**: Performant, flexible, and extensible forms with easy-to-use validation.\n- **[Tanstack Form](https://tanstack.com/form/latest)**: A powerful form library for React applications.\n- **[Formik](https://formik.org/)**: Build forms in React, without the tears.\n- **[React Json Schema Form](https://rjsf-team.github.io/react-jsonschema-form/docs/)**: A React component for building Web forms from JSON Schema.\n- **[Formily](https://formilyjs.org/)**: Alibaba Group Unified Form Solution.\n\n## Hooks\n\n*Curated collections of reusable custom hooks.*\n\n- **[useHooks](https://usehooks.com/)**: A collection of reusable React hooks.\n- **[usehooks-ts](https://usehooks-ts.com/)**: React hook library, ready to use, written in Typescript.\n- **[Novajs](https://novajs.dev/)**: A collection of dependency-free React hooks.\n- **[React Use](https://github.com/streamich/react-use)**: A library of essential React hooks.\n- **[ahooks](https://ahooks.js.org/)**: A set of high-quality and reliable React hooks.\n\n## Notifications\n\n*Toast and alert systems to keep users informed.*\n\n- **[Sonner](https://sonner.emilkowal.ski/)**: An opinionated toast component for React.\n- **[React Toastify](https://fkhadra.github.io/react-toastify/introduction/)**: A popular library for adding customizable and easy-to-use toast notifications to your React applications.\n- **[Notistack](https://notistack.com/)**: Highly customizable notification snackbars (toasts) that can be stacked on top of each other.\n- **[Reapop](https://louisbarranqueiro.github.io/reapop/)**: A simple and customizable React notifications system.\n- **[React Hot Toast](https://react-hot-toast.com/)**: A super easy toast library for React.\n- **[React Notification System](https://igorprado.github.io/react-notification-system/)**: A complete and totally customizable component for notifications in React.\n- **[React Toast Notifications](https://jossmac.github.io/react-toast-notifications/)**: A toast notification system for react.\n- **[pheralb/toast](https://toast.pheralb.dev/)**: An accessible and beautiful toast library for React.\n\n## State Management\n\n*From simple stores to complex reactive state machines.*\n\n- **[Zustand](https://zustand-demo.pmnd.rs/)**: A small, fast, and scalable bearbones state-management solution.\n- **[Tanstack Store](https://tanstack.com/store/latest)**: A powerful state management library for React applications.\n- **[Redux Toolkit](https://redux-toolkit.js.org/)**: The official, recommended way to write Redux logic.\n- **[Recoil](https://recoiljs.org/)**: A state management library for React that makes it easy to share state across components.\n- **[Stan Js](https://codemask-labs.github.io/stan-js/)**: Fast and elegant state management solution with minimal configuration for your React, React Native and even vanilla-js apps\n- **[Jotai](https://jotai.org/)**: Primitive and flexible state management for React.\n- **[MobX](https://mobx.js.org/)**: Simple, scalable state management using observable data and reactive programming.\n- **[XState](https://xstate.js.org/)**: State machines and statecharts for modern JavaScript and React applications.\n- **[Valtio](https://valtio.dev/)**: Proxy-based state management for React that makes state mutations feel natural.\n\n## Data Fetching\n\n*HTTP clients, GraphQL, and server-state libraries.*\n\n- **[Axios](https://axios-http.com/)**: A promise-based HTTP client for the browser and Node.js.\n- **[Tanstack Query](https://tanstack.com/query/latest)**: Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Solid, Vue, Svelte, and more.\n- **[Apollo Client](https://www.apollographql.com/docs/react/)**: A fully-featured, production ready caching GraphQL client.\n- **[SWR](https://swr.vercel.app/)**: React Hooks library for remote data fetching.\n- **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)**: A modern interface for making HTTP requests in the browser.\n- **[Relay](https://relay.dev/)**: A JavaScript framework for building data-driven React applications.\n- **[tRPC](https://trpc.io/)**: End-to-end typesafe APIs for React — no schemas, no code generation, full TypeScript inference.\n- **[URQL](https://commerce.nearform.com/open-source/urql/)**: A highly customizable and versatile GraphQL client for React.\n\n## Styling\n\n*CSS-in-JS, utility-first, and zero-runtime styling solutions.*\n\n- **[TailwindCss](https://tailwindcss.com/)**: A utility-first CSS framework for rapidly building custom user interfaces.\n- **[Styled Components](https://styled-components.com/)**: Utilizes tagged template literals to style your components.\n- **[Emotion](https://emotion.sh/docs/introduction)**: A performant and flexible CSS-in-JS library.\n- **[Vanilla Extract](https://vanilla-extract.style/)**: Zero-runtime Stylesheets-in-TypeScript\n- **[Stitches](https://stitches.dev/)**: CSS-in-JS with near-zero runtime, SSR, multi-variant support.\n- **[Linaria](https://linaria.dev/)**: Zero-Runtime CSS in JS.\n- **[styletron](https://styletron.org/)**: Toolkit for component-oriented styling.\n- **[Panda CSS](https://panda-css.com/)**: CSS-in-JS with build-time generated styles, RSC compatible, multi-variant support, and great developer experience.\n- **[UnoCSS](https://unocss.dev/)**: Instant on-demand atomic CSS engine — flexible, powerful, and blazing fast.\n\n## Charts\n\n*Data visualization libraries for building interactive charts and graphs.*\n\n- **[Recharts](https://recharts.org/en-US)**: A composable charting library built on React components.\n- **[Victory](https://formidable.com/open-source/victory/)**: A collection of composable React components for building interactive data visualizations.\n- **[Nivo](https://nivo.rocks/)**: Provides a rich set of data visualization components, built on top of D3 and React.\n- **[Chart.js](https://www.chartjs.org)**: Simple yet flexible JavaScript charting for designers \u0026 developers.\n- **[React-Vis](https://uber.github.io/react-vis/)**: A collection of react components to render common data visualization charts.\n- **[ECharts for React](https://git.hust.cc/echarts-for-react/)**: A React wrapper for Apache ECharts.\n- **[Visx](https://airbnb.io/visx/)**: A collection of low-level visualization components for React.\n- **[React Flow](https://reactflow.dev/)**: A customizable React component for building node-based editors and interactive diagrams.\n- **[Apache ECharts](https://echarts.apache.org/)**: Apache ECharts is a powerful, interactive charting and data visualization library for browser.\n- **[Unovis](https://unovis.dev/)**: A modular data visualization framework for React, Angular, Svelte, Vue, Solid.\n- **[Mermaid Js](https://mermaid.js.org/)**: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.\n- **[React Flow](https://reactflow.dev/)**: A customizable React component for building node-based editors and interactive diagrams.\n- **[React Google Charts](https://www.react-google-charts.com/)**: A thin, typed, React wrapper over Google Charts Visualization and Charts API.\n- **[React Timeseries Charts](https://software.es.net/react-timeseries-charts/)**: Declarative and modular timeseries charting components for React.\n\n## Virtualization\n\n*Render massive lists and grids without sacrificing performance.*\n\n- **[Tanstack Virtual](https://tanstack.com/virtual/latest)**: A powerful virtual list and grid library for React applications.\n- **[Virtua](https://github.com/inokawa/virtua)**: A virtual list and grid library for React.\n- **[React Virtualized](https://github.com/bvaughn/react-virtualized)**: A set of React components for efficiently rendering large lists and tabular data.\n- **[Semiotic](https://semiotic.nteract.io/)**: A data visualization framework for React.\n\n## Icons\n\n*SVG icon sets and libraries ready for React.*\n\n- **[Lucide](https://lucide.dev/)**: Beautiful and consistent icons made by the community.\n- **[React Icons](https://react-icons.github.io/react-icons/)**: Include popular icons in your React projects easily.\n- **[Font Awesome](https://fontawesome.com/)**: A comprehensive library of icons for use in web projects.\n- **[Heroicons](https://heroicons.com/)**: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.\n- **[Feather Icons](https://feathericons.com/)**: Simply beautiful open-source icons.\n- **[Ionicons](https://ionicons.com/)**: Premium icons for use in web, iOS, Android, and desktop apps.\n- **[Material Icons](https://material.io/resources/icons/)**: Material design icons by Google.\n- **[Bootstrap Icons](https://icons.getbootstrap.com/)**: Official open-source SVG icon library for Bootstrap.\n- **[Svgl](https://svgl.app/)**: A beautiful library with SVG logos.\n\n## Animations\n\n*Motion and transition libraries for bringing interfaces to life.*\n\n- **[Motion](https://motion.dev/)**: A modern animation library for JavaScript and React.\n- **[React Spring](https://www.react-spring.dev/)**: A spring-physics-based animation library for React.\n- **[Reactbits](https://reactbits.dev/)**: An open source React.js snippet library for animated components.\n- **[simpleParallax.js](https://simpleparallax.com/)**: simpleParallax.js is a lightweight and easy-to-use React and JS library that adds parallax animations to any image.\n- **[Blendy](https://blendy.tahazsh.com/)**: A framework-agnostic tool that smoothly transitions one element into another with just a few lines of code.\n- **[AutoAnimate](https://auto-animate.formkit.com/)**: A zero-config animation utility that adds smooth transitions to your React app with a single hook.\n- **[GSAP](https://gsap.com/)**: Professional-grade JavaScript animation library with a React integration for high-performance animations.\n\n## Maps\n\n*Map rendering and geolocation components for React.*\n\n- **[react-google-maps](https://visgl.github.io/react-google-maps/)**: React components and hooks for the Google Maps JavaScript API\n- **[React Leaflet](https://react-leaflet.js.org/)**: A React wrapper for Leaflet, an open-source JavaScript library for mobile-friendly interactive maps.\n- **[Google Maps React](https://github.com/google-map-react/google-map-react)**: A library for embedding Google Maps into React applications.\n- **[React Map GL](https://visgl.github.io/react-map-gl/)**: A React wrapper for Mapbox GL JS.\n\n## PDFs\n\n*Generate and display PDF documents within React.*\n\n- **[React PDF](https://react-pdf.org/)**: A React renderer for creating PDF files.\n- **[React PDF Viewer](https://react-pdf-viewer.dev/)**: A PDF viewer for React applications.\n\n## File Handling\n\n*Upload, preview, and manage files with ease.*\n\n- **[React Dropzone](https://react-dropzone.js.org/)**: Simple HTML5 drag-and-drop zone with React.\n- **[Uppy](https://uppy.io/)**: Sleek, modular file uploader for React.\n- **[react-uploady](https://react-uploady.org/)**: Modern file-upload components \u0026 hooks for React.\n- **[React Spreadsheet](https://iddan.github.io/react-spreadsheet/)**: Simple, customizable yet performant spreadsheet for React.\n- **[Jspreadsheet](https://bossanova.uk/jspreadsheet/)**: Fully customizable JavaScript spreadsheet library, offering various components to enhance web development projects.\n- **[SVAR React File Manager](https://svar.dev/react/filemanager/)**: A backend-agnostic file explorer with list, tiles, and split views, file preview, and all file operations\n\n## Real-time Communication\n\n*WebSocket and event-driven communication for live features.*\n\n- **[Socket.IO](https://socket.io/)**: Enables real-time, bidirectional and event-based communication.\n- **[Pusher](https://pusher.com/)**: Provides hosted APIs to build real-time apps with WebSockets.\n\n## Audio \u0026 Video\n\n*Playback, recording, and programmatic video creation.*\n\n- **[Remotion](https://www.remotion.dev/)**: A framework for creating videos programmatically using React.\n- **[React Player](https://github.com/cookpete/react-player)**: A React component for playing a variety of URLs, including YouTube, SoundCloud, and more.\n- **[React Webcam](https://github.com/mozmorris/react-webcam)**: A React component for accessing the user's webcam.\n- **[React Sound](https://github.com/leoasis/react-sound)**: A sound component to play audio in your React applications.\n\n## Search Engine Optimization\n\n*Manage meta tags, titles, and structured data for better discoverability.*\n\n- **[React Helmet](https://github.com/nfl/react-helmet)**: A reusable React component that manages changes to the document head.\n- **[React Meta Tags](https://www.npmjs.com/package/react-meta-tags)**: A library for managing meta tags in React applications.\n- **[Next SEO](https://github.com/garmeeh/next-seo)**: A plugin that makes managing SEO easier in Next.js projects.\n\n## Validations\n\n*Schema definition and runtime validation for forms and APIs.*\n\n- **[Yup](https://www.npmjs.com/package/yup)**: A JavaScript schema builder for value parsing and validation.\n- **[Joi](https://joi.dev/)**: A powerful schema description language and data validator for JavaScript.\n- **[Validator](https://github.com/validatorjs/validator.js)**: A library for string validation and sanitization.\n- **[Superstruct](https://docs.superstructjs.org/)**: A simple and composable way to validate data in JavaScript and TypeScript.\n- **[Vest](https://vestjs.dev/)**: A validations framework inspired by unit testing libraries.\n- **[Zod](https://zod.dev/)**: A TypeScript-first schema declaration and validation library.\n\n## Bundlers\n\n*Build tools that compile and optimize your React application.*\n\n- **[Webpack](https://webpack.js.org/)**: A static module bundler for modern JavaScript applications.\n- **[Vite](https://vitejs.dev/)**: A next-generation frontend tooling that focuses on speed and performance.\n- **[Parcel](https://parceljs.org/)**: A zero-configuration build tool for the web.\n- **[Rollup](https://rollupjs.org/)**: A module bundler for JavaScript that compiles small pieces of code into larger bundles, ideal for libraries.\n- **[Turbopack](https://turbo.build/pack)**: An incremental bundler optimized for JavaScript and TypeScript, written in Rust — the successor to Webpack.\n- **[esbuild](https://esbuild.github.io/)**: An extremely fast JavaScript bundler and minifier, written in Go.\n\n## Linting \u0026 Formatting\n\n*Keep your codebase consistent and error-free.*\n\n- **[ESLint](https://eslint.org/)**: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.\n- **[Prettier](https://prettier.io/)**: An opinionated code formatter that supports many languages and integrates with most editors.\n\n## DevTools\n\n*Debugging and inspection tools for React applications.*\n\n- **[React Developer Tools](https://react.dev/learn/react-developer-tools)**: Official React DevTools for inspecting React component hierarchy.\n- **[Redux DevTools](https://redux.js.org/tutorials/fundamentals/part-4-store#redux-devtools)**: DevTools for Redux to help debug application state changes.\n- **[React Grab](https://www.react-grab.com/)**: Capture React component trees and pass them as context to AI coding agents directly from the browser.\n- **[React Doctor](https://github.com/millionco/react-doctor)**: AI-powered diagnostic tool that analyzes your React code for performance issues, security problems, and best practices.\n- **[Route Auditor](https://route-auditor.vercel.app/)**: Scans App Router, Pages Router, and API Routes — detecting missing auth, CSRF gaps, permissive CORS, hardcoded secrets, and more.\n\n## Testing\n\n*Unit, integration, and end-to-end testing for React apps.*\n\n- **[Jest](https://jestjs.io/)**: Delightful JavaScript Testing Framework with a focus on simplicity.\n- **[Vitest](https://vitest.dev/)**: A blazing fast unit test framework powered by Vite.\n- **[Playwright](https://playwright.dev/)**: End-to-end testing framework for web apps, with support for multiple browsers.\n- **[Cypress](https://www.cypress.io/)**: Fast, easy and reliable testing for anything that runs in a browser.\n- **[React Testing Library](https://testing-library.com/)**: Simple and complete testing utilities that encourage good testing practices.\n- **[Mock Service Worker](https://mswjs.io/)**: API mocking library that intercepts requests on the network level for seamless testing and development.\n- **[agent-qa](https://github.com/vostride/agent-qa)**: Self-improving QA agent for natural-language browser tests with persistent memory and self-healing execution.\n\n## Documentation\n\n*Tools for documenting components and building living style guides.*\n\n- **[Storybook](https://storybook.js.org/)**: A tool for UI development that allows you to create and test components in isolation.\n- **[Docz](https://www.docz.site/)**: It makes it easy to write and publish beautiful interactive documentation for your code.\n- **[Docusaurus](https://docusaurus.io/)**: A project for building, deploying, and maintaining open source project websites easily.\n- **[MDX](https://mdxjs.com/)**: A format that lets you seamlessly use JSX in your Markdown documents.\n- **[Styleguidist](https://react-styleguidist.js.org/)**: Isolated React component development environment with a living style guide.\n- **[Nextra](https://nextra.site/)**: Simple, powerful and flexible site generation framework with everything you love from Next.js.\n\n## Internationalization\n\n*Translate and localize your React app for a global audience.*\n\n- **[Format.JS](https://formatjs.github.io/)**: Internationalization library for React, part of FormatJS.\n- **[i18next](https://www.i18next.com/)**: A powerful internationalization framework for JavaScript, including React.\n\n## Performance Optimization\n\n*Identify and eliminate render bottlenecks before they reach users.*\n\n- **[React Scan](https://react-scan.million.dev/)**: Scan for React performance issues and eliminate slow renders in your app.\n- **[Million](https://million.dev/)**: A React performance tool that helps you identify and fix performance issues in your React applications.\n- **[React Lazy Load](https://github.com/loktar00/react-lazy-load)**: A library that helps you defer loading content in your React application until it becomes visible in the viewport.\n- **[React Window](https://react-window.vercel.app/)**: A library for rendering large lists and tabular data efficiently.\n\n## Error Handling\n\n*Gracefully catch and report runtime errors in production.*\n\n- **[React Error Boundary](https://www.npmjs.com/package/react-error-boundary)**: A React component that catches JavaScript errors anywhere in their child component tree, logs those errors, and displays a fallback UI.\n- **[Sentry](https://sentry.io/for/react/)**: A monitoring platform that helps you identify and fix issues in your React applications in real-time.\n\n## Code Splitting\n\n*Load only what's needed, when it's needed.*\n\n- **[Loadable Components](https://loadable-components.com/)**: A library for code-splitting React components and loading them on demand.\n- **[React Loadable](https://github.com/jamiebuilds/react-loadable)**: A higher order component for loading components with dynamic imports.\n\n## Hosting\n\n*Deploy and scale your React applications with minimal friction.*\n\n- **[Vercel](https://vercel.com/)**: A platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.\n- **[Netlify](https://www.netlify.com/)**: A platform for automating modern web projects, with continuous deployment, serverless functions, and more.\n- **[Firebase](https://firebase.google.com/)**: A comprehensive app development platform that provides hosting for static and dynamic content, as well as backend services.\n- **[AWS Amplify](https://aws.amazon.com/es/amplify/)**: A set of tools and services that enables mobile and front-end web developers to build secure, scalable full-stack applications.\n\n## Utilities\n\n*Essential helpers for dates, logging, immutability, and more.*\n\n- **[Axios](https://axios-http.com/)**: A promise-based HTTP client for the browser and Node.js.\n- **[Lodash](https://lodash.com/)**: A modern JavaScript utility library delivering modularity, performance \u0026 extras.\n- **[date-fns](https://date-fns.org/)**: Modern JavaScript date utility library.\n- **[Day.js](https://day.js.org/)**: Fast 2kB alternative to Moment.js with the same modern API.\n- **[Winston](https://github.com/winstonjs/winston)**: A logger for just about everything.\n- **[clsx](https://github.com/lukeed/clsx)**: A tiny utility for constructing className strings conditionally in React components.\n- **[Immer](https://immerjs.github.io/immer/)**: Create the next immutable state by mutating the current one — simplifies complex React state updates.\n\n## Miscellaneous\n\n*Spinners, tooltips, command menus, image tools, and other useful additions.*\n\n- **[Awesome Loaders](https://awesome-loaders.netlify.app/)**: Free \u0026 Open source loading animations.\n- **[ReactSpinners](https://www.davidhu.io/react-spinners/)**: A collection of loading spinner components for React.\n- **[ReactTooltip](https://react-tooltip.com/)**: Awesome React Tooltip component.\n- **[React Loader Spinner](https://mhnpd.github.io/react-loader-spinner/)**: Collection sets of a spinners for async operations for ReactJS.\n- **[React Content Loader](https://skeletonreact.com/)**: SVG-Powered component to easily create skeleton loadings.\n- **[Kbar](https://kbar.vercel.app/)**: Fast, portable, and extensible command+k interface for React.\n- **[Cmdk](https://cmdk.paco.me/)**: Fast, composable, unstyled command menu for React.\n- **[React Compare Image](https://github.com/tam315/react-compare-image)**: React component to compare two images with a slider\n- **[React Intense](https://bryce.io/react-intense/)**: A React component for viewing large images up close.\n- **[React Youtube](https://tjallingt.github.io/react-youtube/)**: React.js powered YouTube player component.\n- **[Video React](https://video-react.js.org/)**: The web video player built from the ground up for an HTML5 world using React library.\n- **[Advanced Cropper](https://advanced-cropper.github.io/react-advanced-cropper/)**: The react cropper library that embraces power of the advanced cropper core to give the possibility to create croppers that exactly suited for your website design.\n- **[React Easy Crop](https://valentinh.github.io/react-easy-crop/)**: A React component to crop images with easy interactions.\n- **[React Image Crop](https://github.com/DominicTobias/react-image-crop)**: A responsive image cropping tool for React.\n- **[Interweave](https://interweave.dev/)**: React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.\n- **[React Blur](https://javier.xyz/react-blur)**: React component for creating blurred backgrounds using canvas.\n- **[Number Flow](https://number-flow.barvian.me/)**: An animated number component. Dependency-free. Accessible and customizable.\n- **[ui-snippets](https://ui.ibelick.com/)**: A collection of dark mode components and effects crafted with React and Tailwind CSS.\n- **[background-snippets](https://bg.ibelick.com/)**: A collection of modern, background snippets ready-to-use, simply copy and paste into your next project.\n\n## AI \u0026 LLM Integration\n\n*Integrate language models and run ML inference directly in your React app.*\n\n- **[Vercel AI SDK](https://sdk.vercel.ai/)**: The AI Toolkit for TypeScript. Build AI-powered products with React streaming UI and LLM integrations.\n- **[Markstream](https://markstream.simonhe.me/)**: Open-source streaming Markdown renderer for React AI chat interfaces, with incomplete-token handling, Mermaid, KaTeX, syntax highlighting, safe HTML, SSR, and React 18/19 support.\n- **[LangChain.js](https://js.langchain.com/)**: A framework for developing applications powered by language models in JavaScript and TypeScript.\n- **[OpenAI Node SDK](https://github.com/openai/openai-node)**: Official OpenAI SDK for TypeScript/JavaScript to integrate GPT models into your React applications.\n- **[Anthropic SDK](https://github.com/anthropics/anthropic-sdk-typescript)**: Official Anthropic TypeScript SDK for integrating Claude AI into your React applications.\n- **[Transformers.js](https://huggingface.co/docs/transformers.js)**: State-of-the-art machine learning models running directly in the browser, compatible with React.\n\n## Component Development\n\n*Develop, test, and share components in isolation.*\n\n- **[Storybook](https://storybook.js.org/)**: A tool for UI development that allows you to create and test components in isolation.\n- **[Chromatic](https://www.chromatic.com/)**: Visual testing \u0026 review platform that catches UI bugs automatically before they reach production.\n- **[Ladle](https://ladle.dev/)**: A faster, drop-in alternative to Storybook for developing and testing React components.\n- **[React Cosmos](https://reactcosmos.org/)**: Sandbox for developing and testing React components in isolation with full context support.\n- **[Bit](https://bit.dev/)**: A toolchain for component-driven development. Build, version, and reuse components across projects.\n- **[Compify](https://compify.app/)**: Open-source React component workflow.\n\n## Monorepo Tools\n\n*Manage multiple packages in a single repository efficiently.*\n\n- **[Turborepo](https://turbo.build/repo)**: High-performance build system for JavaScript and TypeScript monorepos with smart caching.\n- **[Nx](https://nx.dev/)**: A powerful open-source build system with first-class React support and smart monorepo tooling.\n- **[Lerna](https://lerna.js.org/)**: The original monorepo tool for managing and publishing multiple JavaScript packages from one repo.\n- **[Changesets](https://github.com/changesets/changesets)**: A workflow tool for managing versioning and changelogs in monorepos with multiple packages.\n- **[PNPM Workspaces](https://pnpm.io/workspaces)**: Native monorepo support in pnpm — fast, disk-efficient package management for multi-package repos.\n\n## Visual Studio Code Extensions\n\n*Snippets, IntelliSense, and workflow tools for React development in VS Code.*\n\n- **[ReactToolkit](https://marketplace.visualstudio.com/items?itemName=drbarzaga.react-toolkit)**: A collection of essential tools and resources for React developers.\n- **[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)**: Provides a collection of useful snippets for React, Redux, and React Native.\n- **[Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)**: Dead simple React snippets you will actually use.\n- **[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**: An opinionated code formatter that supports many languages and integrates with most editors.\n- **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**: Integrates ESLint into VS Code, helping you find and fix problems in your JavaScript code.\n- **[React PropTypes Intellisense](https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense)**: Provides IntelliSense for React PropTypes.\n- **[VSCode React Refactor](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)**: This simple extension provides the refactor code actions for React developers.\n- **[React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)**: Provides a development environment for React Native projects.\n- **[GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql)**: Provides syntax highlighting, IntelliSense, and more for GraphQL queries.\n- **[Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)**: Use Facebook's Jest With Pleasure.\n- **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**: Intelligent Tailwind CSS tooling for VS Code.\n- **[Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)**: Automatically finds, parses, and provides code actions and code completion for all available imports.\n- **[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)**: Supercharges the built-in Git capabilities of VS Code.\n- **[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)**: Autocompletes filenames.\n- **[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)**: A basic spell checker that works well with camelCase code.\n- **[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**: Launch a development local Server with live reload feature for static \u0026 dynamic pages.\n- **[Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)**: Copy JSON, paste as Go, TypeScript, C#, C++ and more.\n- **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**: Intelligent Tailwind CSS tooling for VS Code\n- **[Nova.js Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=novajs.nova-js-vsce)**: Add dependency-free React hooks to your project without leaving VS Code\n\n## Live Coding Tools\n\n*Online sandboxes to prototype and share React code instantly.*\n\n- **[CodeSandbox](https://codesandbox.io/)**: An online editor tailored for web applications, allowing you to create, share, and collaborate on React projects in real-time.\n- **[StackBlitz](https://stackblitz.com/)**: An online IDE for web development, providing a fast and secure environment to build and deploy React applications.\n- **[JSFiddle](https://jsfiddle.net/)**: An online code editor and playground for testing and sharing HTML, CSS, and JavaScript code snippets, including React.\n- **[CodePen](https://codepen.io/)**: A social development environment for front-end designers and developers, offering a platform to build and share React projects.\n- **[Replit](https://replit.com/)**: An online coding platform that supports multiple programming languages, including JavaScript and React, for collaborative coding and learning.\n\n## Popular Platforms\n\n*Structured courses and tutorials to deepen your React knowledge.*\n\n- **[freeCodeCamp](https://www.freecodecamp.org/)**: An interactive learning platform offering a comprehensive curriculum on web development, including React.\n- **[Codecademy](https://www.codecademy.com/learn/react-101)**: Offers an interactive course on React, covering the basics to advanced concepts.\n- **[Scrimba](https://scrimba.com/learn/learnreact)**: Provides interactive coding screencasts to learn React and other web development technologies.\n- **[Frontend Masters](https://frontendmasters.com/)**: Offers in-depth courses on React and other frontend technologies taught by industry experts.\n- **[Egghead.io](https://egghead.io/)**: Short, concise video tutorials on React and other modern web development tools.\n\n## GitHub Repositories\n\n*Essential open-source repositories every React developer should know.*\n\n- **[React](https://github.com/facebook/react)**: The official repository for React, maintained by Facebook.\n\n## YouTube Channels\n\n*Video content for learning React from fundamentals to advanced patterns.*\n\n- **[Traversy Media](https://www.youtube.com/user/TechGuyWeb)**: Offers tutorials on React and other web development technologies.\n- **[Academind](https://www.youtube.com/c/Academind)**: Provides comprehensive tutorials on React, including hooks, state management, and more.\n- **[The Net Ninja](https://www.youtube.com/c/TheNetNinja)**: Features a wide range of tutorials on React and other web development topics.\n- **[Programming with Mosh](https://www.youtube.com/c/programmingwithmosh)**: Offers in-depth tutorials on React and other programming languages and frameworks.\n- **[freeCodeCamp.org](https://www.youtube.com/c/Freecodecamp)**: Provides full-length courses and tutorials on React and other web development technologies.\n\n## Forums\n\n*Communities where React developers ask questions and share knowledge.*\n\n- **[DEV’s React community](https://dev.to/t/react)**\n- **[Hashnode’s React community](https://hashnode.com/n/reactjs)**\n- **[Reactiflux online chat](https://discord.gg/reactiflux)**\n- **[Reddit’s React community](https://www.reddit.com/r/reactjs/)**\n\n---\n\n## Contributing\n\nContributions are welcome! If you know a library or tool that belongs here, feel free to open an issue or submit a pull request. Please check the [contributing guidelines](CONTRIBUTING.md) first.\n\n## Contributors\n\n\u003ca href=\"https://github.com/drbarzaga/react-toolkit/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=drbarzaga/react-toolkit\" /\u003e\n\u003c/a\u003e\n\n## License\n\nMIT — see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nMade with care for the React community · If you find it useful, consider leaving a ⭐\n\n**[dayan.perez9012@gmail.com](mailto:dayan.perez9012@gmail.com)** · **[@dayanDev](https://twitter.com/dayanDev)** · **[LinkedIn](https://www.linkedin.com/in/drbarzaga/)**\n\n\u003c/div\u003e\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/drbarzaga%2Freact-toolkit/projects"}