Coder Social home page Coder Social logo

awesome-react's Introduction

Awesome React Awesome

A collection of awesome things regarding the React ecosystem.


JavaScript Library for building User Interfaces

React General Resources

React Community

React Online Playgrounds

Another Awesome Lists

React Tutorials

React General Tutorials
React Hooks
React and TypeScript
React Performance
React Internals
React Interview Questions

React Tools

React Development Tools
  • react-devtools - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
  • react-hot-loader - Tweak React components in real time
  • react-loadable - A higher order component for loading components with promises
  • loadable-components - React code splitting made easy
  • reactotron - A desktop app for inspecting your React and React Native projects
  • storybook - UI component dev & test
  • docz - Zero Config, live-reloading documentation with Markdown + JSX
  • react-styleguidist - Isolated React component development environment with a living style guide
  • react-cosmos - Dev tool for creating reusable React components
  • eslint-plugin-react - React specific linting rules for ESLint
  • eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements
  • @axe-core/react - Accessibility auditing for React applications
  • DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
  • Why Did You Render - Monkey patches React to notify you about avoidable re-renders.
  • Divjoy - React codebase and UI generator to speed up development (paid)
  • Plasmic - Powerful design tool for building your React components visually.
  • jsx-ast-utils - AST utility module for statically analyzing JSX
  • react-scanner - Extract React components and props usage from code
React Starter Kits and Toolchains
  • create-react-app - Set up a modern Web app by running one command
  • Razzle - Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications
  • Neutrino React Preset - @neutrinojs/react is a Neutrino preset that supports building React web applications
  • react-starter-kit - Isomorphic Web app boilerplate
  • create-react-library - CLI for creating reusable, modern React libraries using Rollup and create-react-app.
  • tsdx - Zero-config CLI for TypeScript package development
React Frameworks
  • next.js - The React Framework
  • gatsby.js - Free and open source framework based on React
  • react-admin - Frontend Framework for building B2B applications on top of REST/GraphQL APIs
  • remix - Finally, a killer React framework from the creators of React Router
  • Blitz - The Fullstack React Framework
  • aleph.js - The React Framework in Deno
  • refine - A React-based framework for building data-intensive applications in no time.
React Styling
  • styled-components - Visual primitives for the component age
  • emotion - Library designed for writing CSS styles with JavaScript
  • radium - A toolchain for React component styling
  • jss - Authoring tool for CSS
  • aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
  • linaria - Zero-Runtime CSS in JS
  • stitches - CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience
  • vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
React Routing
  • react-location - Enterprise Client-Side Routing for React
  • react-router - Declarative routing for React
  • navi - Declarative, asynchronous routing for React
  • curi - JavaScript router for single-page applications
  • reach - Next Generation Routing for React
  • universal-router - A simple middleware-style router for isomorphic JavaScript web apps
  • wouter - A minimalist-friendly ~1.3KB routing library
React Component Libraries
  • material-ui - React components for faster and easier web development
  • blueprint - A React-based UI toolkit for the webs
  • Fluent UI - A set of React components for building Microsoft web experiences
  • react-bootstrap - Bootstrap components built with React
  • reactstrap - Simple React Bootstrap 4 components
  • ant-design - A design system with values of Nature and Determinacy
  • chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
  • semantic-ui-react - The official Semantic-UI-React integration
  • evergreen - Evergreen React UI Framework by Segment
  • grommet - A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
  • rebass - React primitive UI components built with styled-system
  • reakit - Accessible, Composable and Customizable components for React
  • rsuite - A suite of React components
  • atlaskit - Atlassian's official UI library, built according to the Atlassian Design Guidelines.
  • baseweb - Base Web is a foundation for initiating, evolving, and unifying web products.
  • primereact - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
  • eui - Elastic UI Framework
  • react-spectrum - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences
  • ring-ui - JetBrains Web UI components
  • react-bulma-components - React components for Bulma framework
  • react-bulma - React.js components for Modern CSS framework based on Flexbox
  • trunx - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
  • bumbag-ui - Build accessible & themeable React applications with your Bumbag
  • Mantine – A fully featured React library with 100+ hooks and components with native dark theme support
  • radix - An open-source UI component library for building high-quality, accessible design systems and web apps
React Awesome Components
React Testing
React Libraries
  • react-border-wrapper - A wrapper for placing elements along div borders in React.
  • react-magic - Automatically AJAXify plain HTML with the power of React
  • react-toolbox - A set of React components implementing Google's Material Design specification
  • tcomb-react - Library allowing you to check all the props of your React components
  • react-responsive - Media queries in react for responsive design
  • preact - Fast 3kb React alternative with the same ES6 API.
  • riotjs - A React-like, 3.5KB user interface library
  • Maple.js - Bringing the concept of web-components to React
  • react-i13n - A performant, scalable and pluggable approach to instrumenting your React application
  • react-icons - svg react icons of popular icon packs
  • react-open-doodles - Awesome free illustrations as react components.
  • Keo - Plain functions for a more functional Deku approach to creating React components, with functional goodies such as pipe, memoize, etc...
  • Bit - A virtual repository for managing and using react and other web components across applications
  • AtlasKit - Atlassian's React UI library
  • ReactiveSearch - UI components library for Elasticsearch
  • Slate - A completely customizable framework for building rich text editors.
  • react-json-schema - Construct React elements from JSON by mapping JSON definitions to React components that you expose.
  • react-lodash - Lodash as React components
  • react-helmet - A document head manager for React
  • react-snap - Zero-configuration framework-agnostic static prerendering for SPAs
  • Draft.js - A React framework for building text editors
  • refract - Harness the power of reactive programming to supercharge your components
  • react-desktop - OS X and Windows UI components built with React
  • reapop - A simple and customizable React notifications system
  • react-extras - Useful components and utilities for working with React
  • react-instantsearch - Lightning-fast search for React and React Native applications, by Algolia
  • uppy - The next open source file uploader for web browsers
  • react-motion - A spring that solves your animation problems
  • react-esi - React Edge Side Includes
  • react-aria - Adobe's library of React Hooks that provides accessible UI primitives for your design system
  • react-uploady - Modern file-upload components & hooks for React.
React Integration
React State Management
  • redux - Predictable State Container for JavaScript Apps
  • mobx - Simple, scalable state management
  • react-query - Hooks for fetching, caching and updating asynchronous data in React
  • flux - Application architecture for building user interfaces
  • recoil - Experimental state management library for React apps
  • xstate-react - State machines and statecharts for the modern web
  • zustand - Bear necessities for state management in React
  • easy-peasy - Vegetarian friendly state for React
  • hookstate - The simple but very powerful and incredibly fast state management for React that is based on hooks
  • effector - Fast and powerful reactive state manager
  • reactn - React, but with built-in global state management
  • react-facet - Observable-based state management for performant game UIs built in React
React AR and VR
  • Viro React - Platform for rapidly building AR/VR applications using React Native
React Renderers
  • formik - Build forms in React, without the tears
  • react-hook-form - React Hooks for forms validation
  • react-jsonschema-form - A React component for building Web forms from JSON Schema
  • react-final-form - High performance subscription-based form state management for React
  • unform - Performance-focused API for React forms
  • formily - Alibaba Group Unified Form Solution
  • uniforms - A React library for building forms from any schema
  • formsy-react - A form input builder and validator for React
  • react-formal - Sophisticated HTML form management for React
  • vest - Declarative form validation framework inspired by unit testing syntax.
Data Managing
  • immer - Create the next immutable state by mutating the current one
  • ReSub - A library for writing better React components and data stores
  • immutable-js - Immutable Data Collections for Javascript
  • baobab - JavaScript & TypeScript persistent and optionally immutable data tree with cursors
  • WatermelonDB - 🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️
  • RxDB - A realtime Database for JavaScript Applications
  • react-googlemaps - React interface to Google maps
  • react-maps - A map component for React
  • react-google-maps - React.js Google Maps integration component
  • react-gmaps - A Google Maps component for React.js
  • react-map-gl - A React wrapper for MapboxGL-js plus overlay API
  • google-map-react - Isomorphic google map React component
  • react-mapbox-gl - A mapbox-gl-js wrapper to make the API react friendly
  • google-maps-react - A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.
  • react-leaflet - React components for Leaflet maps
  • react-geo - A set of geo-related components using react, antd, and ol
  • pigeon-maps - ReactJS maps without external dependencies
  • vx - Visualization components
  • victory - A collection of composable React components for building interactive data visualizations
  • react-vis - Data Visualization Components
  • recharts - Redefined chart library built with React and D3
  • nivo - Provides a rich set of data visualization components, built on top of the D3 and React libraries
  • echarts-for-react - Apache ECharts components for React wrapper
  • react-apexcharts - React Component for ApexCharts
  • chartify - React plugin for building charts using CSS

React Native

Framework for building native apps using React

React Native General Resources

React Native Tutorials

React Native Development Tools

React Native Sample Apps

React Native Boilerplates

  • Create React Native App - Create React Native apps that run on iOS, Android, and web
  • Ignite - The hottest CLI for React Native, boilerplates, plugins, generators, and more!

React Native Awesome Components

React Native Libraries


Predictable State Container for JavaScript Apps

Redux General Resources

Redux Tools

  • react-redux - Official React bindings for Redux
  • redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
  • redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI
  • reselect - Selector library for Redux
  • redux-thunk - Thunk middleware for redux
  • redux-saga - An alternative side effect model for Redux apps
  • connected-react-router - A Redux binding for React Router
  • redux-form - A Higher Order Component using react-redux to keep form state
  • normalizr - Normalizes nested JSON according to a schema
  • redux-observable - RxJS middleware for Redux
  • redux-undo - Higher order reducer to add undo/redo functionality to redux state containers
  • redux-persist - Persist and rehydrate a redux store
  • Rematch - Redux made easy

Redux Tutorials


A query language for your API

GraphQL General Resources

GraphQL Tools

GraphQL Tutorials

GraphQL Implementations

Database Integration

  • Hasura - Instant GraphQL for all your data
  • Prisma - Next-generation ORM for Node.js and TypeScript
  • graphql-sequelize - GraphQL & Relay for MySQL & Postgres via Sequelize


Data-Driven React Applications

Relay General Resources

Relay Tutorials

Relay Tools


Important Talks

React.js Conf 2015 Playlist

ReactEurope Conf 2015 Day 1 Playlist

ReactEurope Conf 2015 Day 2 Playlist

ReactRally Conf 2015 Playlist

React.js Conf 2016 Playlist

React Amsterdam 2016 Playlist

ReactEurope Conf 2016 Day 1 Playlist

ReactEurope Conf 2016 Day 2 Playlist

ReactRally Conf 2016 Playlist

React Conf 2017 Playlist

React.js Amsterdam 2018 Playlist

React Amsterdam 2019 Playlist

Video Tutorials

Demo React Apps

Real React Apps

  • kibana - Your window into the Elastic Stack
  • firefox debugger - The Firefox debugger that works anywhere
  • spectrum – Simple, powerful online communities
  • mattermost - Open source Slack alternative
  • overreacted - Personal blog by Dan Abramov
  • winamp2-js - Winamp 2 reimplemented for the browser
  • dnote - A command line notebook with multi-device sync and web interface


This list started as personal collection of interesting things about React. At the time it started React was in beta, there was special script to transform JSX to JS and even Flux was not yet published. React is mainstream now, lots of things happened. Please, do not try to use this list as advertisement board or place for public push of your experiments. Only fully free resources here, please. Do not hesitate to suggest cleaning PRs for outdated projects and articles along with new contributions. Your contributions and suggestions are heartily♡ welcome, though. (✿◠‿◠)


awesome-react's People


enaqx avatar browniefed avatar Haroenv avatar paulmelnikow avatar caprica-Six avatar Semigradsky avatar appleboy avatar tonyspiro avatar mbasso avatar gaearon avatar hugovidafe avatar karesztrk avatar xgrommx avatar gilbarbara avatar designorant avatar MicheleBertoli avatar ReadmeCritic avatar rwieruch avatar eanplatter avatar erickeno avatar sachin-inguva avatar da-vaibhav avatar abhijitparida avatar bookercodes avatar alagos avatar bartonhammond avatar ButuzGOL avatar coryhouse avatar fzaninotto avatar ilyalesik avatar


Christian Idylle avatar Elisa avatar malamenteee avatar Ishan Velle avatar jorismertz avatar Hritik R avatar Abhi Dadhaniya avatar element avatar frontendStorm avatar Soojung Chae avatar Ferdi YÖNDEMLİ avatar Yasir Obaibullah avatar Mohammed Taysser avatar Balaji Senthilkumar avatar saheenshoukath avatar Taeyoon Kwon avatar chrllstian avatar  avatar define avatar Eryanto Agusriadi avatar Rahel Oliveira avatar Yuting Hsiao avatar FinzyPHINZY avatar Karl Wills avatar Junior Castro avatar Simmmple avatar Bill Molloy avatar geek-dao avatar Daneel van Tonder avatar  avatar Abhishek Sharma avatar Du_Cheng avatar Greg Wu avatar  avatar Johnny avatar JottaLPB avatar Franco Rossi avatar Valber avatar  avatar Becha Mohamed Amine avatar Jahangir avatar Alex Kim avatar Hiroshi Gaeun avatar Aranganathan Rathinavelu avatar Luan David Sensolo avatar Abhishek jain avatar Aman Rawat avatar Lixiang Ding avatar zlq avatar  avatar  avatar Sam avatar  avatar Ilham Rachmat avatar Jeff Julian Goes avatar  avatar ZxdNoob avatar  avatar healthyhcc avatar  avatar Samuel Lynn Davis III avatar  avatar tuburing avatar  avatar SUXH avatar  avatar  avatar Daniel Nguyen avatar Chase Chen avatar  avatar Yiğit Tanrıverdi avatar Agent avatar Alex Smolnikov avatar keely avatar Tylor_Tian avatar Jeonghye Choi avatar Samuel-Amaro avatar ibrahim üzüm avatar  avatar Kartik Shukla avatar Dastan Özgeldi avatar Luca Pietro avatar Lie Albert Januar Linarco avatar Itay Haim avatar Tanver Islam Tonmoy avatar Bankole Kazeem Olatunji  avatar  avatar Khouloud TAOUCHIKHT avatar Hicabi YILMAZ avatar Siam Rahman avatar Andrey avatar Herlian Zhang avatar Saran avatar Jonas Arden avatar archme avatar Abdullah Sajjad avatar Emirhan Çelebi avatar Luca Poli avatar Nikolai Shabalin avatar Khong Kok Wei avatar


Jonas Grimfelt avatar Rolly Ferolino avatar arden avatar Lance Ennen avatar Travis Jeffery avatar Daniele Alessandri avatar Kohei Hasegawa avatar Weston avatar Laurian Gridinoc avatar Fangdun Tsai avatar Facundo Cabrera avatar Michał Świtoń avatar  avatar liuyicai avatar Adam Balachowski avatar David avatar Chris Canal avatar Stephen Kraushaar avatar vladk1m0 avatar Fabian Aussems avatar George Khromchenko avatar Panayiotis Tzagkarakis avatar Orazio Maico avatar Miguel avatar Moyan avatar Pedro López avatar Diego E. Salazar avatar LPrsd avatar Fernando Parra avatar Jannis Gundermann avatar Oliver Ochs avatar Dima Sobolev avatar Rafał Pocztarski avatar Steve Li avatar Handrus Stephan Nogueira avatar Joseph Chiocchi avatar Adrian A. avatar  avatar Steffen Bruchmann avatar Kevin Dai avatar Levi Strope avatar David Liman avatar Dave Lee avatar nant avatar Chaitanya Malla avatar evandrix avatar Sebastian Brandt avatar kenny avatar Ken Powers avatar Volodymyr Pavlyshyn avatar Eduardo Vaz de Mello avatar Nick Raienko avatar Serj Zavadsky avatar Allen Galler avatar Slava avatar Konstantin Tarkus avatar Thierry Charbonnel avatar Laurence avatar Lamin Barrow avatar Oleh Demianiuk avatar pan avatar Paolo Resmini avatar Tuan Nguyen avatar Francois Henderson avatar Sharlon Balbalosa avatar Pedro Ângelo avatar send2vinnie avatar  avatar André Lima avatar Jandy avatar  avatar Chris avatar Ahmed Abu Eldahab avatar Marek Pawłowski avatar Roman Vasilev avatar Alexey Neyasov avatar Bulent Gorkem avatar Sendy Putra avatar Evandro Abreu avatar Alexey Vertinsky avatar  avatar Kryspin Ziemski avatar  avatar tinyms avatar Richard Hess avatar yleo77 avatar  avatar Alban Minassian avatar Bhupinder Garg avatar 孟志昂 avatar biz man avatar 穿山甲 avatar Simon X. L. avatar Zbynek Svoboda avatar Roman avatar Yang Leijun avatar jejen akrom avatar Kostas avatar Han avatar Yoshiyuki Ieyama avatar

awesome-react's Issues

React/JSX + Typescript is a thing as of Typescript 1.6 btw


One of the key philosophies of TypeScript is to let you write TypeScript anywhere you can develop using JavaScript. While we’ve worked with teams such as Dojo, Aurelia, and Angular to ensure using TypeScript is as easy as using JavaScript, there was still an important library that that presented a difficulty for TypeScript developers: React. This was due to the lack of support for JSX, a popular way of writing DOM and native components in JS. React heavily leverages JSX in everyday code. Unfortunately, the syntax for JSX conflicted with the cast syntax that TypeScript already used.


Refactoring JSX members in TypeScript (click to watch animation)

In 1.6, we’ve introduced a new .tsx file extension. This extension does two things: it enables JSX inside of TypeScript files, and it makes the new ‘as’ operator the default way to cast. With this, we’ve added full support for working with React/JSX in TypeScript in a type-safe way.



We have PRs dating back to Oct 1 2015 — is this maintained any more?

Consider separating toolkits from boilerplates

Right now we have things like create-react-app and next.js along with just-another-react-boilerplate. Which aren't the same thing. The former are considered "toolkits" or "frameworks" while the later is just a plain boilerplate.

So things that allows you to create a project and leverage their packages to run, test and build the project without worrying about the underlying packages would fit better in its own category.

A few examples of these:

Keep commercial resources but mark them as such.

I saw the recent commit that removed some interesting, yet commercial resources. It would be wonderful if this list included non-free resources but simply marked as such. Or, maybe included in a separate section.

I'm not associated with any commercial projects or books. But I would happily trade dollars for the time savings of a well developed resource.

Thanks for maintaining this list. It's a wonderful resource!

Sort by stars?

Possible to make all react components sorted by stars or is that hard?
It is so frustrating trying to find a decent library and sorting by stars makes it easier.

Maybe even sort by number of issues or the last commit.

the old articles

when i read every article from this list,i found there have many articles use the old version of reactjs, however ,it cannot works well with the new version,it's not good for new player to study reactjs!

729 links! Time for organization

The list is great but it has some structural problems that could be fixed.

New React Users

You can't really link new people to this because there's no clear starting place. This could be solved with a curated 'must read' section with 15-25 links. Thinking in react, react-router, the flux primer, one of Pete Hunt's conference talks, etc. The really important stuff when getting into react.

About X in format Y related to Z

This is where things get complicated and a "no" would be understandable. It needs a site where you can filter, which means a little bit of metadata needs to be added for each link. This also lets us add things like the angular/backbone/youtube/github badges on each item to make it easy to identify the X Y and Z in a potentially long list of items.


  • language (js, cljs, coffeescript, typescript, ...)
  • content type[](tutorial, repo, video, component, blog, official, ...)
    • official+video (conference) vs tutorial+video
  • frameworks[](angular, backbone, ...)
  • other?

I'm willing to put in the time for this part.

Technical notes:

Probably yaml files, and autogenerating the readme and site from that.

Add Built With React

Would it make sense to add to this list? Built with React is a list of user interfaces built with React. It’s designed, built, and maintained by the Blimp crew.

Remove deprecated real app

mozilla/payments-ui is using a much older version of React and is deprecated. It might not be the best example anymore.

Two travis checks do not pass

Issues :-(
> Links 
  1. [L0522] 404  
  2. [L0988] 404  
> Dupes 
  None ✓

Add another maintainer?

Should we add another maintainer to this project? There's quite a lot of (aging) pull requests and some of them have great info.

I volunteer to be a maintainer.

One of the things I'd like to do is:

  • have guidelines as to what is appropriate for inclusion so that folks know what to submit
  • give feedback to every open pull request by either a) merging or b) describing why the request wasn't accepted
  • potentially give some sort of ranking / popularity measure to e.g. components to help filter some of the noise

Validate pull requests with Travis

Hello, I wrote a tool that can validate README links (valid URLs, not duplicate). It can be run when someone submits a pull request.

It is currently being used by


If you are interested, connect this repo to and add a .travis.yml file to the project.

See for options, more information
Feel free to leave a comment 😄

Merge `Awesome React Components` into `Awesome React`

We want to merge and As mentioned in sindresorhus/awesome#698.

I've reviewed all react libraries of the Component section of the Awesome React list.

50 % will be removed
30 % are already added to Awesome React Components
20 % are going to be added

My review is subjective and anyone is free to object.

@browniefed @enaqx
I've built a Frontend ( that allows anyone to review/vote whether or not a new entry should be added to the list.
No clue if people would actually do the effort of reviewing/voting but maybe it's worth a try? What do you think?

Can we add container?

Reapop is a React & Redux notifications system.

I opened this issue because i'm not sure if we can add container.

Remove - Learn React by building the Hacker News front page

I've just tried using the tutorial. Unfortunately, the repo has not been maintained (no recent commits + stale PRs) and is no longer a good intro for beginners. A bunch of issues are experienced from the outset due to the syntax not being up-to-date with the most recent release of React.

I would suggest this tutorial is no longer 'awesome'. @enaqx are you ok with me submitting a PR to remove it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.