Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/drbarzaga/react-frontend-toolkit

A curated list of essential libraries and tools for frontend developers, with a focus on React. Ideal for developers looking to build robust, scalable, and high-performance applications 🚀.
https://github.com/drbarzaga/react-frontend-toolkit

List: react-frontend-toolkit

awesome awesome-list developer-tools documentation frontend frontend-toolkit hooks javascript pacakges performance react testing toolbox toolkit toolset typescript useful-utilities web-development

Last synced: about 1 month ago
JSON representation

A curated list of essential libraries and tools for frontend developers, with a focus on React. Ideal for developers looking to build robust, scalable, and high-performance applications 🚀.

Awesome Lists containing this project

README 

        
## 🧰 React Frontend Toolkit



### ℹ️ About






A curated list of essential libraries and tools for frontend developers, with a focus on React. From UI components and styling frameworks to state management, form handling, animations, testing, and utilities, this collection serves as a comprehensive toolkit to streamline and enhance your web development projects. Ideal for developers looking to build robust, scalable, and high-performance applications 🚀.








  

![GitHub stars](https://img.shields.io/github/stars/drbarzaga/react-frontend-toolkit?style=social)

![GitHub forks](https://img.shields.io/github/forks/drbarzaga/react-frontend-toolkit?style=social)

![GitHub issues](https://img.shields.io/github/issues/drbarzaga/react-frontend-toolkit)

![GitHub pull requests](https://img.shields.io/github/issues-pr/drbarzaga/react-frontend-toolkit)

![GitHub license](https://img.shields.io/github/license/drbarzaga/react-frontend-toolkit)






### ⭐ Star Us on GitHub



If you find this project helpful or interesting, please consider giving it a star on GitHub. Your support motivates us to keep improving and adding new features!



### 📢 Share



If you enjoyed this project, please share it with your friends and colleagues on social media:






[![Twitter](https://img.shields.io/badge/Twitter-Share-blue?logo=twitter)](https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20React%20toolkit%20collection!%20https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-frontend-toolkit)

[![Facebook](https://img.shields.io/badge/Facebook-Share-blue?logo=facebook)](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-frontend-toolkit)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-Share-blue?logo=linkedin)](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-frontend-toolkit&title=React%20Toolkit%20Collection&summary=Check%20out%20this%20awesome%20React%20toolkit%20collection!&source=LinkedIn)

[![Reddit](https://img.shields.io/badge/Reddit-Share-orange?logo=reddit)](https://www.reddit.com/submit?url=https%3A%2F%2Fgithub.com%2Fdrbarzaga%2Freact-frontend-toolkit&title=React%20Toolkit%20Collection)






Thank you for spreading the word!



### 🚀 React Frontend Toolkit CLI



To make it easy to access all the tools mentioned here, we designed the React Frontend Toolkit CLI, a command-line interface that provides access to this list of tools and packages directly from your terminal. For more detailed usage instructions and examples, please refer to the [official documentation](https://github.com/drbarzaga/React-Frontend-Toolkit-CLI#readme).



### Installation



You can install the CLI globally using npm, yarn, or pnpm:



```bash

npm install -g react-frontend-toolkit-cli

```



```bash

yarn global add react-frontend-toolkit-cli

```



```bash

pnpm add -g react-frontend-toolkit-cli

```



### Table of Contents



- [Frameworks](#frameworks)

- [Authentication](#authentication)

- [Routing](#routing)

- [Drag & Drop](#drag--drop)

- [Tables](#tables)

- [Forms](#forms)

- [Hooks](#hooks)

- [Notifications](#notifications)

- [State Management](#state-management)

- [Styling](#styling)

- [Charts](#charts)

- [Virtualization](#virtualization)

- [UI Components](#ui-components)

- [Icons](#icons)

- [Animations](#animations)

- [Maps](#maps)

- [File Upload](#file-upload)

- [Real-time Communication](#real-time-communication)

- [Video & Audio](#video--audio)

- [SEO](#seo)

- [Validations](#validations)

- [GraphQL](#graphql)

- [Bundlers](#bundlers)

- [Linting & Formatting](#linting--formatting)

- [DevTools](#devtools)

- [Testing](#testing)

- [Documentation](#documentation)

- [Internationalization](#internationalization)

- [Performance Optimization](#performance-optimization)

- [Error Handling](#error-handling)

- [Code Splitting](#code-splitting)

- [Hosting](#hosting)

- [API Clients & Data Fetching](#api-clients--data-fetching)

- [Visual Studio Code Extensions](#visual-studio-code-extensions)

- [Live Coding Tools](#live-coding-tools)

- [Popular Platforms](#popular-platforms)

- [GitHub Repositories](#github-repositories)

- [YouTube Channels](#youtube-channels)

- [Forums](#forums)

- [Contributing](#contributing)

- [License](#license)

- [Acknowledgements](#acknowledgements)

- [Contributors](#contributors)

- [Support](#support)

- [Contact](#contact)



### Frameworks



- **[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.

- **[Gatsby](https://www.gatsbyjs.com/)**: A React-based open-source framework for creating fast, secure, and powerful websites using modern web technologies.

- **[Remix](https://remix.run/)**: A full stack web framework that lets you focus on the user interface and works seamlessly with React.

- **[Blitz.js](https://blitzjs.com/)**: A framework built on top of Next.js, providing a full-stack experience with a focus on developer productivity.

- **[RedwoodJS](https://redwoodjs.com/)**: An opinionated, full-stack, serverless web application framework built on React, GraphQL, and Prisma.



### Authentication



- **[Auth.js](https://authjs.dev/)**: Authentication for the Web. Free and open source.

- **[Firebase Authentication](https://firebase.google.com/docs/auth)**: Provides backend services to help authenticate users in your app.

- **[Auth0](https://auth0.com/)**: A platform for securing access to your applications, devices, and users.

- **[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.

- **[AWS Amplify Auth](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/)**: Provides authentication APIs and building blocks for developers who want to create secure applications.

- **[Supabase Auth](https://supabase.io/docs/guides/auth)**: An open-source Firebase alternative that offers authentication services.

- **[Clerk](https://clerk.dev/)**: Authentication and user management for modern applications.

- **[Magic](https://magic.link/)**: Passwordless authentication solution for seamless user experiences.



### Routing



- **[Wouter](https://github.com/molefrog/wouter)**: A minimalist alternative to React Router with a small footprint.

- **[Tanstack Router](https://tanstack.com/router/latest)**: A powerful routing library for React applications.

- **[React Router](https://reactrouter.com/)**: The standard routing library for React applications.

- **[Reach Router](https://reach.tech/router)**: A routing library with a focus on accessibility and simplicity.



### Drag & Drop



- **[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.

- **[DnDKit](https://dndkit.com/)**: A lightweight, performant, accessible and extensible drag & drop toolkit for React.

- **[React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)**: A powerful and beautiful drag-and-drop library for lists with React.

- **[React DnD](https://react-dnd.github.io/react-dnd/about)**: A set of React utilities to help you build complex drag-and-drop interfaces.

- **[SortableJS](https://github.com/SortableJS/react-sortablejs)**: A React wrapper for SortableJS, a library for reorderable drag-and-drop lists.

- **[React Dragula](https://github.com/bevacqua/react-dragula)**: A drag-and-drop library for React based on Dragula.

- **[React Complex Tree](https://rct.lukasbach.com/)**: Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop.



### Tables



- **[Tanstack Table](https://tanstack.com/table/latest)**: A headless UI for building powerful tables and datagrids.

- **[Material-UI Table](https://mui.com/components/tables/)**: Tables built with Material-UI, a popular React UI framework.

- **[AG Grid](https://www.ag-grid.com/react-data-grid/)**: A feature-rich datagrid designed for the major JavaScript frameworks.

- **[React Data Grid](https://adazzle.github.io/react-data-grid/)**: Excel-like grid component built with React.

- **[Griddle](https://griddlegriddle.github.io/Griddle/)**: A simple grid component for use with React.

- **[React Virtualized](https://github.com/bvaughn/react-virtualized)**: A set of React components for efficiently rendering large lists and tabular data.



### Forms



- **[React Hook Form](https://react-hook-form.com/)**: Performant, flexible, and extensible forms with easy-to-use validation.

- **[Tanstack Form](https://tanstack.com/form/latest)**: A powerful form library for React applications.

- **[Formik](https://formik.org/)**: Build forms in React, without the tears.

- **[React Json Schema Form](https://rjsf-team.github.io/react-jsonschema-form/docs/)**: A React component for building Web forms from JSON Schema.

- **[Formily](https://formilyjs.org/)**: Alibaba Group Unified Form Solution.



### Hooks



- **[novajs](https://novajs.co/)**: A collection of dependency-free React hooks.

- **[useHooks](https://usehooks.com/)**: A collection of reusable React hooks.

- **[React Use](https://github.com/streamich/react-use)**: A library of essential React hooks.

- **[ahooks](https://ahooks.js.org/)**: A set of high-quality and reliable React hooks.



### Notifications



- **[Sonner](https://sonner.emilkowal.ski/)**: An opinionated toast component for React.

- **[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.

- **[Notistack](https://notistack.com/)**: Highly customizable notification snackbars (toasts) that can be stacked on top of each other.

- **[Reapop](https://louisbarranqueiro.github.io/reapop/)**: A simple and customizable React notifications system.

- **[React Hot Toast](https://react-hot-toast.com/)**: A super easy toast library for React.

- **[React Notification System](https://igorprado.github.io/react-notification-system/)**: A complete and totally customizable component for notifications in React.

- **[React Toast Notifications](https://jossmac.github.io/react-toast-notifications/)**: A toast notification system for react.



### State Management



- **[Zustand](https://zustand-demo.pmnd.rs/)**: A small, fast, and scalable bearbones state-management solution.

- **[Tanstack Store](https://tanstack.com/store/latest)**: A powerful state management library for React applications.

- **[Redux Toolkit](https://redux-toolkit.js.org/)**: The official, recommended way to write Redux logic.

- **[Recoil](https://recoiljs.org/)**: A state management library for React that makes it easy to share state across components.



### Styling



- **[TailwindCss](https://tailwindcss.com/)**: A utility-first CSS framework for rapidly building custom user interfaces.

- **[Styled Components](https://styled-components.com/)**: Utilizes tagged template literals to style your components.

- **[Emotion](https://emotion.sh/docs/introduction)**: A performant and flexible CSS-in-JS library.

- **[Vanilla Extract](https://vanilla-extract.style/)**: Zero-runtime Stylesheets-in-TypeScript



### Charts



- **[Recharts](https://recharts.org/en-US)**: A composable charting library built on React components.

- **[Victory](https://formidable.com/open-source/victory/)**: A collection of composable React components for building interactive data visualizations.

- **[Nivo](https://nivo.rocks/)**: Provides a rich set of data visualization components, built on top of D3 and React.

- **[Chart.js](https://www.chartjs.org)**: Simple yet flexible JavaScript charting for designers & developers.

- **[React-Vis](https://uber.github.io/react-vis/)**: A collection of react components to render common data visualization charts.

- **[ECharts for React](https://git.hust.cc/echarts-for-react/)**: A React wrapper for Apache ECharts.

- **[Visx](https://airbnb.io/visx/)**: A collection of low-level visualization components for React.

- **[React Flow](https://reactflow.dev/)**: A customizable React component for building node-based editors and interactive diagrams.



### Virtualization



- **[Virtua](https://github.com/inokawa/virtua)**: A virtual list and grid library for React.

- **[Tanstack Virtual](https://tanstack.com/virtual/latest)**: A powerful virtual list and grid library for React applications.



### UI Components



- **[Shadcn UI](https://ui.shadcn.com/)**: A modern UI framework for building responsive and accessible web applications.

- **[Eldora UI](https://www.eldoraui.site/)**: An open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.

- **[Radix UI](https://www.radix-ui.com/)**: An open source component library optimized for fast development, easy maintenance, and accessibility.

- **[Material UI](https://mui.com/material-ui/)**: An open-source React component library that implements Google's Material Design.

- **[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.

- **[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.

- **[Next UI](https://nextui.org/)**: A modern design system for building beautiful React applications.

- **[Evergreen](https://evergreen.segment.com/)**: A React UI Framework for building ambitious products on the web.

- **[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.

- **[Mantine](https://mantine.dev/)**: A fully featured React components library with native dark theme support.

- **[Ant Design](https://ant.design/)**: A design system with values of Nature and Determinacy for better user experience of enterprise applications.

- **[Blueprint](https://blueprintjs.com/)**: A React-based UI toolkit for the web.

- **[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

- **[Ariakit](https://ariakit.org/)**: A modern React UI library that helps you build fast, accessible, and responsive web applications.

- **[NativeBase](https://nativebase.io/)**: Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

- **[React Bootstrap](https://react-bootstrap.github.io/)**: Bootstrap components built with React.

- **[Grommet](https://v2.grommet.io/)**: Build responsive and accessible mobile-first projects for the web with an easy to use component library.

- **[Reakit](https://reakit.io/)**: Toolkit for building accessible web apps with React.

- **[PrimeReact](https://primereact.org/)**: A comprehensive suite of customizable, feature-rich UI components.

- **[ZenUI](https://zenui.net/)**: An Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, Icons, Color Palette and more.

- **[FlyonUI](https://flyonui.com/)**: An open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.

- **[DaysiUI](https://daisyui.com/)**:The most popular component library for Tailwind CSS.

- **[Headless UI](https://headlessui.dev/)**: A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

- **[React Email](https://react.email/)**: An open source component library optimized for fast development, easy maintenance, and accessibility.



### Icons



- **[React Icons](https://react-icons.github.io/react-icons/)**: Include popular icons in your React projects easily.

- **[Font Awesome](https://fontawesome.com/)**: A comprehensive library of icons for use in web projects.

- **[Heroicons](https://heroicons.com/)**: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

- **[Feather Icons](https://feathericons.com/)**: Simply beautiful open-source icons.

- **[Ionicons](https://ionicons.com/)**: Premium icons for use in web, iOS, Android, and desktop apps.

- **[Material Icons](https://material.io/resources/icons/)**: Material design icons by Google.

- **[Bootstrap Icons](https://icons.getbootstrap.com/)**: Official open-source SVG icon library for Bootstrap.



### Animations



- **[Framer Motion](https://www.framer.com/motion/)**: A production-ready motion library for React.

- **[React Spring](https://www.react-spring.dev/)**: A spring-physics-based animation library for React.



### Maps



- **[React Leaflet](https://react-leaflet.js.org/)**: A React wrapper for Leaflet, an open-source JavaScript library for mobile-friendly interactive maps.

- **[Google Maps React](https://github.com/google-map-react/google-map-react)**: A library for embedding Google Maps into React applications.



### File Upload



- **[React Dropzone](https://react-dropzone.js.org/)**: Simple HTML5 drag-and-drop zone with React.

- **[Uppy](https://uppy.io/)**: Sleek, modular file uploader for React.



### Real-time Communication



- **[Socket.IO](https://socket.io/)**: Enables real-time, bidirectional and event-based communication.

- **[Pusher](https://pusher.com/)**: Provides hosted APIs to build real-time apps with WebSockets.



### Video & Audio



- **[React Player](https://github.com/cookpete/react-player)**: A React component for playing a variety of URLs, including YouTube, SoundCloud, and more.

- **[React Webcam](https://github.com/mozmorris/react-webcam)**: A React component for accessing the user's webcam.

- **[React Sound](https://github.com/leoasis/react-sound)**: A sound component to play audio in your React applications.



### SEO



- **[React Helmet](https://github.com/nfl/react-helmet)**: A reusable React component that manages changes to the document head.

- **[React Meta Tags](https://www.npmjs.com/package/react-meta-tags)**: A library for managing meta tags in React applications.

- **[Next SEO](https://github.com/garmeeh/next-seo)**: A plugin that makes managing SEO easier in Next.js projects.



### Validations



- **[Yup](https://www.npmjs.com/package/yup)**: A JavaScript schema builder for value parsing and validation.

- **[Joi](https://joi.dev/)**: A powerful schema description language and data validator for JavaScript.

- **[Validator](https://github.com/validatorjs/validator.js)**: A library for string validation and sanitization.

- **[Superstruct](https://docs.superstructjs.org/)**: A simple and composable way to validate data in JavaScript and TypeScript.

- **[Vest](https://vestjs.dev/)**: A validations framework inspired by unit testing libraries.

- **[Zod](https://zod.dev/)**: A TypeScript-first schema declaration and validation library.



### GraphQL



- **[Apollo Client](https://www.apollographql.com/docs/react/)**: A comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL.

- **[Relay](https://relay.dev/)**: A JavaScript framework for building data-driven React applications powered by GraphQL.



### Bundlers



- **[Webpack](https://webpack.js.org/)**: A static module bundler for modern JavaScript applications.

- **[Vite](https://vitejs.dev/)**: A next-generation frontend tooling that focuses on speed and performance.

- **[Parcel](https://parceljs.org/)**: A zero-configuration build tool for the web.



### Linting & Formatting



- **[ESLint](https://eslint.org/)**: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

- **[Prettier](https://prettier.io/)**: An opinionated code formatter that supports many languages and integrates with most editors.



### DevTools



- **[React Developer Tools](https://react.dev/learn/react-developer-tools)**: Official React DevTools for inspecting React component hierarchy.

- **[Redux DevTools](https://redux.js.org/tutorials/fundamentals/part-4-store#redux-devtools)**: DevTools for Redux to help debug application state changes.



### Testing



- **[Jest](https://jestjs.io/)**: Delightful JavaScript Testing Framework with a focus on simplicity.

- **[Vitest](https://vitest.dev/)**: A blazing fast unit test framework powered by Vite.

- **[Playwright](https://playwright.dev/)**: End-to-end testing framework for web apps, with support for multiple browsers.

- **[Cypress](https://www.cypress.io/)**: Fast, easy and reliable testing for anything that runs in a browser.



### Documentation



- **[Storybook](https://storybook.js.org/)**: A tool for UI development that allows you to create and test components in isolation.

- **[Docz](https://www.docz.site/)**: It makes it easy to write and publish beautiful interactive documentation for your code.

- **[Docusaurus](https://docusaurus.io/)**: A project for building, deploying, and maintaining open source project websites easily.

- **[MDX](https://mdxjs.com/)**: A format that lets you seamlessly use JSX in your Markdown documents.

- **[Styleguidist](https://react-styleguidist.js.org/)**: Isolated React component development environment with a living style guide.

- **[Nextra](https://nextra.site/)**: Simple, powerful and flexible site generation framework with everything you love from Next.js.



### Internationalization



- **[Format.JS](https://formatjs.github.io/)**: Internationalization library for React, part of FormatJS.

- **[i18next](https://www.i18next.com/)**: A powerful internationalization framework for JavaScript, including React.



### Performance Optimization



- **[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.

- **[React Window](https://react-window.vercel.app/)**: A library for rendering large lists and tabular data efficiently.



### Error Handling



- **[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.

- **[Sentry](https://sentry.io/for/react/)**: A monitoring platform that helps you identify and fix issues in your React applications in real-time.



### Code Splitting



- **[Loadable Components](https://loadable-components.com/)**: A library for code-splitting React components and loading them on demand.

- **[React Loadable](https://github.com/jamiebuilds/react-loadable)**: A higher order component for loading components with dynamic imports.



### Hosting



- **[Vercel](https://vercel.com/)**: A platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

- **[Netlify](https://www.netlify.com/)**: A platform for automating modern web projects, with continuous deployment, serverless functions, and more.

- **[Firebase](https://firebase.google.com/)**: A comprehensive app development platform that provides hosting for static and dynamic content, as well as backend services.

- **[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.



### API Clients & Data Fetching



- **[Axios](https://axios-http.com/)**: A promise-based HTTP client for the browser and Node.js.

- **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)**: A modern interface for making HTTP requests in the browser.

- **[SWR](https://swr.vercel.app/)**: React Hooks library for remote data fetching.

- **[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.

- **[GraphQL Request](https://github.com/graffle-js/graffle)**: A minimal GraphQL client for making requests to GraphQL endpoints.



### Visual Studio Code Extensions



> [!TIP]

> Explore these Visual Studio Code extensions to enhance your development workflow. These tools provide powerful features for code editing, debugging, and collaboration, making it easier to build and maintain your React projects efficiently.



- **[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.

- **[Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)**: Dead simple React snippets you will actually use.

- **[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.

- **[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.

- **[React PropTypes Intellisense](https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense)**: Provides IntelliSense for React PropTypes.

- **[VSCode React Refactor](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)**: This simple extension provides the refactor code actions for React developers.

- **[React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)**: Provides a development environment for React Native projects.

- **[GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql)**: Provides syntax highlighting, IntelliSense, and more for GraphQL queries.

- **[Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)**: Use Facebook's Jest With Pleasure.

- **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**: Intelligent Tailwind CSS tooling for VS Code.

- **[Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)**: Automatically finds, parses, and provides code actions and code completion for all available imports.

- **[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)**: Supercharges the built-in Git capabilities of VS Code.

- **[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)**: Autocompletes filenames.

- **[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)**: A basic spell checker that works well with camelCase code.

- **[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**: Launch a development local Server with live reload feature for static & dynamic pages.

- **[Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)**: Copy JSON, paste as Go, TypeScript, C#, C++ and more.

- **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**: Intelligent Tailwind CSS tooling for VS Code

- **[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



### Live Coding Tools



> [!TIP]

> Explore these online coding platforms to create, share, and collaborate on React projects in real-time. These tools provide a fast and secure environment for web development, making it easy to test and deploy your applications.



- **[CodeSandbox](https://codesandbox.io/)**: An online editor tailored for web applications, allowing you to create, share, and collaborate on React projects in real-time.

- **[StackBlitz](https://stackblitz.com/)**: An online IDE for web development, providing a fast and secure environment to build and deploy React applications.

- **[JSFiddle](https://jsfiddle.net/)**: An online code editor and playground for testing and sharing HTML, CSS, and JavaScript code snippets, including React.

- **[CodePen](https://codepen.io/)**: A social development environment for front-end designers and developers, offering a platform to build and share React projects.

- **[Replit](https://replit.com/)**: An online coding platform that supports multiple programming languages, including JavaScript and React, for collaborative coding and learning.



### Popular Platforms



- **[freeCodeCamp](https://www.freecodecamp.org/)**: An interactive learning platform offering a comprehensive curriculum on web development, including React.

- **[Codecademy](https://www.codecademy.com/learn/react-101)**: Offers an interactive course on React, covering the basics to advanced concepts.

- **[Scrimba](https://scrimba.com/learn/learnreact)**: Provides interactive coding screencasts to learn React and other web development technologies.

- **[Frontend Masters](https://frontendmasters.com/)**: Offers in-depth courses on React and other frontend technologies taught by industry experts.

- **[Egghead.io](https://egghead.io/)**: Short, concise video tutorials on React and other modern web development tools.



### GitHub Repositories



- **[React](https://github.com/facebook/react)**: The official repository for React, maintained by Facebook.



### YouTube Channels



- **[Traversy Media](https://www.youtube.com/user/TechGuyWeb)**: Offers tutorials on React and other web development technologies.

- **[Academind](https://www.youtube.com/c/Academind)**: Provides comprehensive tutorials on React, including hooks, state management, and more.

- **[The Net Ninja](https://www.youtube.com/c/TheNetNinja)**: Features a wide range of tutorials on React and other web development topics.

- **[Programming with Mosh](https://www.youtube.com/c/programmingwithmosh)**: Offers in-depth tutorials on React and other programming languages and frameworks.

- **[freeCodeCamp.org](https://www.youtube.com/c/Freecodecamp)**: Provides full-length courses and tutorials on React and other web development technologies.



### Forums



- **[DEV’s React community](https://dev.to/t/react)**

- **[Hashnode’s React community](https://hashnode.com/n/reactjs)**

- **[Reactiflux online chat](https://discord.gg/reactiflux)**

- **[Reddit’s React community](https://www.reddit.com/r/reactjs/)**



### 🧩 Contributing



Contributions are welcome! If you have any libraries or tools that you think should be included in this collection, feel free to open an issue or submit a pull request.



### 📃 License



This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.



### ✨ Acknowledgements



Special thanks to all the developers and contributors of the libraries and tools listed in this collection. Your hard work and dedication make the React ecosystem better for everyone.



### 🤝 Contributors



Thanks to the following people who have contributed to this project:





  




If you would like to contribute, please check out the [contributing guidelines](CONTRIBUTING.md).



### ❤️ Support



If you find this collection helpful, please consider giving it a star ⭐ on GitHub. Your support is greatly appreciated!



You can also support me by buying me a coffee:






[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/dayanperez)








  Buy Me a Coffee QR Code




### ✉️ Contact



If you have any questions, suggestions, or feedback, feel free to reach out:



- **Email**: [[email protected]](mailto:[email protected])

- **Twitter**: [@dayanDev](https://twitter.com/dayanDev)

- **LinkedIn**: [Dayan Perez](https://www.linkedin.com/in/drbarzaga/)



We look forward to hearing from you!