awesome-react

A collection of awesome things regarding React ecosystem

64,351

7,152

64,351

View on GitHub

Top Related Projects

react

44,903

Cheatsheets for experienced React developers getting started with TypeScript

awesome-react-components

41,924

Curated List of React Components & Libraries.

react-hook-form

41,010

📋 React Hooks for form state management and validation (Web + React Native)

react-boilerplate

29,474

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Quick Overview

The "awesome-react" repository is a curated list of React resources, tools, libraries, and learning materials. It serves as a comprehensive collection of React-related content, maintained by the community, to help developers find valuable resources for React development.

Pros

Extensive collection of React resources in one place
Regularly updated with new and relevant content
Well-organized into categories for easy navigation
Community-driven, allowing for diverse perspectives and contributions

Cons

Can be overwhelming due to the sheer amount of information
Some links may become outdated over time
Quality of resources may vary, as not all are thoroughly vetted
May lack in-depth explanations or comparisons between listed resources

Note: As this is not a code library, the code examples and getting started instructions sections have been omitted.

Competitor Comparisons

react

44,903

Cheatsheets for experienced React developers getting started with TypeScript

Pros of react

Focused specifically on TypeScript usage with React
Provides in-depth TypeScript patterns and best practices for React development
Regularly updated with community contributions and latest TypeScript/React features

Cons of react

Less comprehensive in covering general React ecosystem topics
May be overwhelming for beginners due to its TypeScript-centric approach
Lacks extensive lists of React-related tools and libraries

Code Comparison

react (TypeScript-focused):

type Props = {
  name: string;
  age: number;
};

const Greeting: React.FC<Props> = ({ name, age }) => (
  <h1>Hello, {name}! You are {age} years old.</h1>
);

awesome-react (JavaScript-focused):

const Greeting = ({ name, age }) => (
  <h1>Hello, {name}! You are {age} years old.</h1>
);

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

Summary

react is an excellent resource for developers working with TypeScript and React, offering detailed guidance on type-safe React development. awesome-react, on the other hand, provides a broader overview of the React ecosystem, including tools, libraries, and resources. The choice between the two depends on whether you're specifically focusing on TypeScript integration or seeking a more general React resource.

react.dev

10,971

The React documentation website

Pros of react.dev

Official React documentation repository, ensuring up-to-date and accurate information
Comprehensive coverage of React concepts, including advanced topics and best practices
Interactive code examples and tutorials integrated into the documentation

Cons of react.dev

Focused solely on React, lacking information on related tools and libraries
May not cover community-driven solutions or alternative approaches to React development

Code Comparison

react.dev:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

awesome-react:

// No direct code examples provided, as it's a curated list of resources

Summary

react.dev is the official React documentation repository, offering comprehensive and up-to-date information on React development. It includes interactive examples and covers advanced topics, making it an excellent resource for learning and reference.

awesome-react, on the other hand, is a community-curated list of React-related resources, tools, and libraries. It provides a broader overview of the React ecosystem, including third-party solutions and alternative approaches.

While react.dev focuses on core React concepts and best practices, awesome-react offers a wider range of resources that can be valuable for exploring different aspects of React development and staying informed about the latest trends in the community.

awesome-react-components

41,924

Curated List of React Components & Libraries.

Pros of awesome-react-components

More focused on React components, making it easier to find specific UI elements
Better organized into categories, improving navigation and discoverability
Regularly updated with new components and libraries

Cons of awesome-react-components

Less comprehensive coverage of React ecosystem beyond components
Fewer learning resources and tutorials compared to awesome-react
May not include as many general React tools and utilities

Code Comparison

awesome-react:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Hello, World!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

awesome-react-components:

import React from 'react';
import { Button } from 'react-bootstrap';

const MyComponent = () => (
  <Button variant="primary">Click me</Button>
);

The code examples demonstrate that awesome-react focuses on general React usage, while awesome-react-components emphasizes specific component libraries and their implementation.

Both repositories serve as valuable resources for React developers, with awesome-react providing a broader overview of the React ecosystem and awesome-react-components offering a more targeted collection of UI components and libraries.

react-hook-form

41,010

📋 React Hooks for form state management and validation (Web + React Native)

Pros of react-hook-form

Focused specifically on form handling in React applications
Provides a complete solution for form management, including validation and error handling
Offers performance optimizations for form rendering and state updates

Cons of react-hook-form

Limited in scope compared to the broader React ecosystem coverage of awesome-react
May require additional learning for developers not familiar with the specific API
Less flexibility for custom form implementations outside of the provided patterns

Code Comparison

react-hook-form:

import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />
    </form>
  );
}

awesome-react (example from a linked resource):

import React, { useState } from 'react';

function App() {
  const [formData, setFormData] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input onChange={e => setFormData({...formData, firstName: e.target.value})} />
      <input onChange={e => setFormData({...formData, lastName: e.target.value})} />
      <input type="submit" />
    </form>
  );
}

react-boilerplate

29,474

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Pros of react-boilerplate

Provides a complete, production-ready React application structure
Includes built-in features like Redux, Reselect, and Immer
Offers a scalable architecture for large applications

Cons of react-boilerplate

Steeper learning curve due to its comprehensive structure
May be overkill for smaller projects or beginners
Less flexibility in choosing specific tools or libraries

Code Comparison

react-boilerplate:

import { createSelector } from 'reselect';
import { initialState } from './reducer';

const selectHome = state => state.home || initialState;

const makeSelectUsername = () =>
  createSelector(selectHome, homeState => homeState.username);

awesome-react:

// No direct code comparison available as awesome-react is a curated list,
// not a boilerplate or project template

Summary

react-boilerplate is a comprehensive starter kit for building large-scale React applications, offering a robust architecture and built-in features. It's ideal for experienced developers working on complex projects.

awesome-react, on the other hand, is a curated list of React resources, tools, and libraries. It serves as an excellent reference for developers of all levels, providing a wide range of options to choose from when building React applications.

While react-boilerplate provides a ready-to-use structure, awesome-react offers flexibility in selecting individual components and tools for custom project setups.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Awesome React

A collection of awesome things regarding the React ecosystem.

React
React Native
Contribution

React

React General Resources

React Tutorials

React Frameworks

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

React Component Libraries

material-ui - Ready-to-use foundational React components
ant-design - An enterprise-class UI design language and React UI library
shadcn-ui - Beautifully designed components built using Radix UI and Tailwind CSS
react-bootstrap - Bootstrap components built with React
fluentui - Microsoft's Fluent UI
framework7 - Full featured HTML framework for building iOS & Android apps
ariakit - Toolkit for building accessible web apps with React

React State Management and Data Fetching

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

React Styling

styled-components - Visual primitives for the component age
emotion - CSS-in-JS library designed for high performance style composition
linaria - Zero-Runtime CSS in JS library
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript

React Routing

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

React Development Tools

create-react-app - Set up a modern Web app by running one command
vite - Next Generation Frontend Tooling
parcel - The zero configuration build tool for the web
million - An extremely fast and lightweight optimizing compiler
reactotron - A desktop app for inspecting your React and React Native projects
eslint-plugin-react - React specific linting rules for ESLint
why-did-you-render - Monkey patches React to notify you about avoidable re-renders

React Libraries

preact - Fast React alternative with the same modern API
floating-ui - Toolkit to create floating elements
loadable-components - The recommended Code Splitting library for React
react-uploady - Modern file-upload components & hooks for React
downshift - React autocomplete, combobox or select dropdown components
react-error-boundary - A React error boundary component that lets you catch errors

React Testing

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

React Awesome Components

Awesome React Components
react-select - The Select Component for React
react-big-calendar - Calendar component
react-datepicker - A simple and reusable datepicker component for React
react-loading-skeleton - Create skeleton screens that automatically adapt to your app
react-qrcode - QR component for use with React
react-archer - Draw arrows between React elements
react-icons - SVG React icons of popular icon packs
react-complex-tree - Unopinionated Accessible Tree
react-insta-stories - A React component for Instagram like stories
swiper - Most modern mobile touch slider
keen-slider - The Touch slider carousel
cookie-consent-banner â The lightweight and flexible Cookie Consent Banner
heart-switch - A heart-shaped toggle switch component for React
kbar - Fast, portable, and extensible cmd+k interface for your site
tagify - Lightweight, efficient Tags input component
puck - The visual editor for React

React Components Sandboxes

storybook - Storybook is a frontend workshop for building UI components and pages in isolation
react-styleguidist - Isolated React component development environment with a living style guide
react-cosmos - Dev tool for creating reusable React components
bit - A build system for development of composable software

React Forms

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

React Tables and Grids

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

React Maps

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

React Charts

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

React Renderers

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

React Internationalization

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

React Graphics and Animations

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

React Integration

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

React Real Apps

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

React Native

React Native General Resources

React Native Navigation

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

React Native Awesome Components

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

React Native Libraries

realm-js - A mobile database: an alternative to SQLite & key-value stores
react-native-device-info - Device Information for React Native iOS and Android

Contribution

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. (â¿â â¿â )

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot