Git Product home page Git Product logo

awesome-react's Introduction

Awesome React Awesome

A collection of awesome things regarding the React ecosystem.

React

React General Resources

React Tutorials

React Frameworks

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

React Component Libraries

  • shadcn-ui - Beautifully designed components built using Radix UI and Tailwind CSS
  • ant-design - An enterprise-class UI design language and React UI library
  • material-ui - Ready-to-use foundational React components
  • chakra-ui - Component system for building SaaS products with speed
  • react-bits - A collection of animated, interactive & fully customizable React components
  • mantine - Fully featured React components library
  • 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-email - Unstyled components for creating beautiful emails
  • 8bitcn-ui - A retro 8-bit themed React component library built on top of shadcn
  • headlessui - Completely unstyled, accessible UI components for React
  • ruixen-ui - Modern, lightweight React component library with elegant design

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
  • 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

React Icon Libraries

  • react-icons - SVG React icons of popular icon packs
  • lucide-react - Beautiful & consistent icon toolkit
  • heroicons - Beautiful hand-crafted SVG icons by the makers of Tailwind CSS
  • thesvg - A collection of free SVG icons for popular brands and technologies

React Routing

React Development Tools

  • vite - Next Generation Frontend Tooling
  • parcel - The zero configuration build tool for the web
  • reactotron - A desktop app for inspecting your React and React Native projects
  • eslint-plugin-react - React specific linting rules for ESLint
  • react-scan - Scan for React performance issues and eliminate slow renders in your app
  • why-did-you-render - Monkey patches React to notify you about avoidable re-renders

React Libraries

  • ai-sdk - The AI Toolkit for TypeScript and React from the creators of Next.js
  • 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
  • playwright - A framework for Web Testing and Automation

React Awesome Components

React Components Sandboxes

  • storybook - Storybook is a frontend workshop for building UI components and pages in isolation
  • react-cosmos - Dev tool for creating reusable React components
  • bit - A build system for development of composable software

React Forms

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 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
  • xyflow - A customizable React component for building node-based editors and interactive diagrams

React Renderers

React Internationalization

  • formatjs - Internationalize your web apps
  • react-i18next - Internationalization for React done right
  • react-intlayer - Internationalization focused on maintainability for React

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
  • simple-parallax-js - The easiest way to get a parallax effect with React and JavaScript

React Integration

  • rescript-compiler - A robustly typed language that compiles to efficient and human-readable JavaScript
  • fulcro - A library for development of web applications in clj/cljs

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
  • readest - A minimalistic, feature-rich and cross-platform eBook reader
  • bookcars - Car rental platform
  • notifuse - Modern self-hosted emailing platform to send newsletters & transactional emails

React Native

React Native General Resources

React Native Navigation

React Native Awesome Components

React Native Libraries

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 (if you know what it was) had not yet been released. Today, React has become boring mainstream. 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. I would prefer GitHub links, please. Your input and suggestions are wholeheartedly♡ appreciated. (✿◠‿◠)

CC0

awesome-react's People

Contributors

enaqx avatar browniefed avatar haroenv avatar paulmelnikow avatar caprica-six avatar semigradsky avatar appleboy avatar tonyspiro avatar mbasso avatar xgrommx avatar karesztrk avatar hugoovf avatar gaearon avatar da-vaibhav avatar sachin-inguva avatar erickeno avatar eanplatter avatar rwieruch avatar readmecritic avatar michelebertoli avatar designorant avatar gilbarbara avatar thelordoftheboards avatar stanleycyang avatar awesome-bot avatar rickwong avatar killavus avatar koistya avatar ngokevin avatar ilyalesik avatar

Stargazers

 avatar Sandeep Raju Prabhakar avatar  avatar Martin Bartošek avatar 帅武宾 avatar Yandif avatar  avatar Jordan Begian avatar yinchuanming avatar MetzyS avatar  avatar  avatar Molly avatar  avatar Mohammed Shakib avatar Sibaprasad Mohanty avatar Arthur Jackson Baker avatar  avatar Purwanto  avatar  avatar  avatar PHAKINGIFT/PHAKIN-PECTHMAKIN avatar hashcode avatar esc-dev avatar  avatar Elijah E.L. Nouvellez-Bleaux avatar  avatar Ricardo Cuba avatar  avatar  avatar Shashank T A avatar  avatar Brandon Little avatar  avatar notaquacc avatar Farhiya Abdulle avatar  avatar Joao Luccas Marques avatar  avatar Frédérick REMBEAUX avatar  avatar  avatar  avatar Justin Jacob avatar João Marinotti avatar Waleed Javed_07 avatar Connor Dougherty avatar Salvador Agr avatar  avatar  avatar Mauro Junio avatar rajdigitech avatar Robson Miranda avatar Jock Reed avatar  avatar  avatar  avatar copyright arena  avatar  avatar Quách Thảo avatar Pawel Borkar avatar  avatar  avatar KrIsS avatar  avatar  avatar  avatar saman  avatar  avatar DIONATAS VIEIRA avatar  avatar  avatar  avatar  avatar  avatar MrWoods24 avatar  avatar  avatar  avatar Sarah lamb avatar  avatar Kassie Garcia  avatar PJ Graham avatar  avatar  avatar  avatar Amjad Al-Smadi avatar Saad Akhtar avatar  avatar  avatar TheGeechi avatar Willow avatar  avatar  avatar Nikita avatar pangping avatar Anthony avatar Justin Cullen avatar ARAN avatar  avatar

Watchers

Rolly Ferolino avatar arden avatar Lance Ennen avatar Travis Jeffery avatar Gabriel Medina avatar Daniele Alessandri avatar Kohei Hasegawa avatar Weston avatar Laurian Gridinoc avatar Facunesh avatar Michał Świtoń avatar  avatar liuyicai avatar −− −−− ·−· ··· · avatar Adam Balachowski avatar David avatar Stephen Kraushaar avatar vladk1m0 avatar Fabian Aussems avatar George Khromchenko 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 Dmitry Sobolev avatar Steve Li avatar Handrus Stephan Nogueira avatar Adrian A. avatar  avatar Steffen Bruchmann avatar Kevin Dai avatar Levi Strope avatar David Liman avatar Dave Lee avatar nant avatar Chaitanya avatar Sebastian Brandt avatar kenny avatar Ken Powers avatar Volodymyr Pavlyshyn (Wolodymyr Pawlyschyn) avatar Eduardo Vaz de Mello avatar  avatar Serhii Zavadskyi avatar Allen Galler avatar  avatar  avatar Thierry Charbonnel 🦋 @anotherplanet.io 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 Neo avatar André Lima avatar Jandy avatar  avatar Chris avatar Ahmed Abu Eldahab avatar Marek Pawłowski 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 dmm avatar 孟志昂 avatar biz man avatar 穿山甲 avatar Simon X. L. avatar Zbynek Svoboda avatar Roman avatar jejen akrom avatar Kostas avatar Han avatar Yoshiyuki IEYAMA avatar Luca Peduto avatar ChaiChunyan avatar Akshat Paul avatar Péter Magyar avatar Alejandro Chang avatar Fred avatar Heng avatar

awesome-react's Issues

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.

Maintained?

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

the old articles

hi,
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!

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

Examples

If you are interested, connect this repo to https://travis-ci.org/ and add a .travis.yml file to the project.

See https://github.com/dkhamsing/awesome_bot for options, more information
Feel free to leave a comment 😄

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

Announcement

http://blogs.msdn.com/b/typescript/archive/2015/09/02/announcing-typescript-1-6-beta-react-jsx-better-error-checking-and-more.aspx

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.

image

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.

Details

https://github.com/Microsoft/TypeScript/wiki/JSX

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

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:
create-react-app
nwb
next.js
neutrino
razzle
rekit

Add Built With React

Would it make sense to add builtwithreact.io 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.

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.

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?

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.

Metadata:

  • 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.

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!

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.

Merge `Awesome React Components` into `Awesome React`

We want to merge https://github.com/brillout/awesome-react-components and https://github.com/enaqx/awesome-react. As mentioned in sindresorhus/awesome#698.

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

https://gist.github.com/brillout/5fa9218b21f4a02067beb41c3ca212f8

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 (http://devarchy.com/react-components) 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?

Two travis checks do not pass

Issues :-(
> Links 
  1. [L0522] 404 https://github.com/uNmAnNeR/imaskjs/tree/gh-pages/plugins/react  
  2. [L0988] 404 https://webcache.googleusercontent.com/search?q=cache:xFibiodnfmgJ:https://fistfulofbytes.com/graphql-and-g2sd+&cd=1&hl=en&ct=clnk&gl=fr  
> Dupes 
  None ✓

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.

  • 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.