enaqx / awesome-react Goto Github PK

View Code? Open in Web Editor NEW

55.9K 1.5K 6.7K 2.41 MB

A collection of awesome things regarding React ecosystem

react react-native tutorial samples awesome-list react-tutorial react-apps awesome javascript typescript

awesome-react's Introduction

Awesome React

A collection of awesome things regarding the React ecosystem.

React
React Native
Contribution

React

React General Resources

React Tutorials

React Development Tools

create-react-app - Set up a modern Web app by running one command
vite - Next Generation Frontend Tooling
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 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
aleph - The Full-stack Framework in Deno

React Component Libraries

material-ui - Material UI, which implements Google's Material Design
ant-design - An enterprise-class UI design language and React UI library
chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
fluentui - Microsoft's Fluent UI
blueprint - A React-based Palantir's UI toolkit for the web
mantine – A fully featured React components library
framework7 - Full featured HTML framework for building iOS & Android apps
react-bootstrap - Bootstrap components built with React
reactstrap - Simple React Bootstrap components
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
ariakit - Toolkit for building accessible web apps with React
rsuite - A suite of React components
baseweb - A React Component library implementing the Uber's Base design language
eui - Elastic UI Framework
react-spectrum - Adobe's collection of libraries and tools
ring-ui - A collection of JetBrains Web UI components
radix-primitives - An open-source UI component library for building high-quality web apps
nextui - Beautiful, fast and modern React UI library

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
watermelondb - Reactive & asynchronous database for powerful React and React Native apps

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
jss - authoring tool for CSS which uses JavaScript as a host language

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 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
reapop - A simple and customizable React notifications system
react-uploady - Modern file-upload components & hooks for React
downshift - React autocomplete, combobox or select dropdown components

React Testing

jest - Delightful JavaScript Testing
enzyme - JavaScript Testing utilities for React
react-testing-library - Simple and complete React DOM testing utilities
react-hooks-testing-library - Simple and complete React hooks 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-dnd - Drag and Drop for React
react-rnd - A resizable and draggable component for React
react-dropzone - Simple drag-drop zone with 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-device-detect - Detect device, and render view accordingly
react-colorful - A tiny color picker component
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

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

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
react-final-form - High performance subscription-based form state management for React
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
react-transition-group - An easy way to perform animations 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
gooey-react - The gooey effect for React

React Integration

rescript-compiler - A robustly typed language that compiles to efficient and human-readable JavaScript
react-rails - Integrate React with Rails
reagent - A minimalistic ClojureScript interface to React
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

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. (✿◠‿◠)

awesome-react's People

Contributors

Stargazers

Watchers

Forkers

princed xeodou zhengjunwei elierotenberg gaearon isabek pieterv arden semigradsky raypatterson kyleamathews krahman pohchen poyhsiao gin1314 jarvizx jasonsee alexislitool mikepence epixa enbifa jonmumm prigara qvin yelled3 tomekl fatelei sunnyrjuneja jquense strml baatar zenlambda brandturner javabridger fuzzyalej msmakhlouf shrunyan randylien 9629831527 nullnotfound josephmisiti mcohen01 esaul tech-curriculums mapele mikaelbr jedwatson technotronicoz tyraeltong yeyuguo kjavier volland bradparks davidcalhoun linmingren ocaddons dragosh marcelaraujo huxiaoqi567 yilab albertfdp imskyer rakesh-mohanta jackunion awesomes-collection fudong1127 vishal-h shallker kenwheeler debianw bcbcb midoripop uicoded escalant3 duereg smcguinness ieja qblake andrewraycode lynnaloo marwanhilmi avert rushing3 vipulnsward mewben ravishi adam-singer catalinmiron tinkerwell larjo dmitrisweb smnplk javascriptworks haru01 reecer mayank-patel grasp tidydee markandrewj njd0523

awesome-react's Issues

No credits? No party

https://dineshramitc.wordpress.com/2015/01/02/a-collection-of-awesome-react-tools-resources-videos-and-shiny-things/

evil 666

separate section for react alternatives

separate preact, riot etc. Plus add inferno and link to speed/size comparison.

Consider adding re-frame

Under "React and ClojureScript" you might consider adding:
https://github.com/Day8/re-frame

(disclosure: I am the author)

backbone-to-react/

http://joelburget.com/backbone-to-react/

http://jamesfriend.com.au/implementing-flux-coffeescript seems to be dead - returns 404

in order to pass checks we need to replace http://jamesfriend.com.au/implementing-flux-coffeescript with https://archive.fo/l9ih6 (cached version of http://jamesfriend.com.au/implementing-flux-coffeescript)

A new part of awesome.

Hello @enaqx. I have one interesting list of awesome repos regarding redux. What do you think if I'll add this list to your awesome list? This is my awesome list of repos awesome-redux

Super easy and lightweight transitions animation library for React.

https://github.com/a-jie/react-anix

Super easy and lightweight transitions animation library for React.

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.

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

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?

add hooks section

and then merge with awesome react hooks

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.

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

Photo Gallery that works perfectly on desktop and mobile. Inspired by Apple Photos

Elegant and clean UI, full-screen support. Check it out:
https://github.com/UnforbiddenYet/react-sleek-photo-gallery

Links of the Server-Client with React section doesn't work in the readme file

When clicking on the links of that section, I end up on an error page in the readme file.

travis error

Checking white listed URLs: x

White listed:

[L1141] 403 https://vimeo.com/96639841
Issues :-(

Links
All OK ✓
Dupes

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?

react-d3 is deprecated

https://github.com/esbullington/react-d3 is deprecated so we need to change the link to the active fork: https://github.com/yang-wei/rd3

Awesome React Components List

Hi,
I'm creating this ticket as a follow up of sindresorhus/awesome#698.
Are you still interested in collaborating?

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.

Dead link : Animating Web UI with React and Haskell

Hi, everything is in the title :)

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.

Adding cosmos

Not sure where it fits in, so I didn't add a PR, but I think this would be great to add:
https://github.com/skidding/cosmos

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.

Announcing getAwesomeness()

I just created a repo, getAwesomeness.It gives developers an option to have a consolidated view on all of the awesome awesomeness. Please let me know if it helps or not.

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

Request to add router5 to awesome list

Hi,

Router5 is a mature battle tested routing library that is growing in popularity. Could we add this to the awesome list?

See here for more details http://router5.github.io/

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!

Add Meetups around the globe

It would be helpful to have a list like the one we have in here: React Wiki

I can make a PR if you're ok with this.

Thanks!

jFlux.js has nothing to do with React and breaks back button

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 ✓

missing a license

This repo seems to miss a license. You could use https://github.com/sindresorhus/awesome#license as inspiration.

Require that PRs include the links in the description

…that way, maintainers and people following along with the changes can look at the proposed content with way fewer clicks.

"Pro Javascript React Tutorial" is broken

(http://webdesignporto.com/react-js-an-interactive-tutorial-to-get-started/)

Thanks.
Nic

samples projects list

Hi!
Please consider to add the link to the 5K React.js samples project list : https://gist.github.com/sAbakumoff/7b8510adcb16bded189d747e34f5e114

Add Preact

From the description:
Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Source: https://github.com/developit/preact
Docs: https://developit.github.io/preact

Created a new repository to organize data.

Dear All.

I create a new repository, since it was not want to pull request is accumulated.
I'm glad when you guys get to the contributions and suggestions.

New repository:
https://github.com/syossan27/awesome-react-me

I suggest creating a new category for React-Native

The framework although for different platform is spinning off on its own. I wanted to add this catalogue of React-Native components and was not sure where it should go.

Describe which libraries add Shadow DOM capability

The ones I have found:

https://github.com/Wildhoney/Maple.js
https://github.com/Wildhoney/ReactShadow (not in the list)

Shadow DOM is a keyword that people will be looking for when searching the list.

`React browser prototyping for components` http://react.run is not avaliable now

Grommet should be added to the list

Its a UI framework of react components.

https://github.com/grommet/grommet

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

https://travis-ci.org/matteocrippa/awesome-swift/builds/96526196 ok ✅
https://travis-ci.org/matteocrippa/awesome-swift/builds/96722421 link redirected / rename 🔴
https://travis-ci.org/dkhamsing/open-source-ios-apps/builds/96763135 bad link / project deleted 🔴
https://travis-ci.org/dkhamsing/open-source-ios-apps/builds/95754715 dupe 🔴

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 😄

adding more to boilerplates

@jashmenn How about adding react scripts forks, like custom-react-scripts (by @kitze) , react-super-scripts (shameless self publicity 😉 ), ... etc.
I can make a quick pull request if you like .

CI is dead. It sad

Something wrong with your travis. Can you fix it please?)

I also suggest smart-css and fluxmax

https://github.com/hackhat/smart-css: Write CSS in JavaScript with namespaces, proper names, no conflicts and expected results for react.js.

https://github.com/hackhat/fluxmax: 2 phase events: update stores then views. 1 way flow. Static event deps checker.

Check them out and consider them adding to your awesome react libs (: