Best React open-source projects
This article by Eugene Stepnov is a great resource for any developer interested in contributing to high-quality open-source React projects. He briefly discusses how to identify good open-source projects and then provides a fairly exhaustive list of open-source React projects he recommends.
This article by Eugene Stepnov is a great resource for any developer interested in contributing to high-quality open-source React projects. He briefly discusses how to identify good open-source projects and then provides a fairly exhaustive list of open-source React projects he recommends.
Building a Piano with React Hooks 🎹
This tutorial specifically covers how to map the laptop keys to piano notes, how to map the audio with key press, and how to render the piano keyboard in react
This tutorial specifically covers how to map the laptop keys to piano notes, how to map the audio with key press, and how to render the piano keyboard in react
React keyboard shortcut library 🐆
This package provides two React components that enable keyboard shortcuts in React.
This package provides two React components that enable keyboard shortcuts in React.
airframe-react
High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as MIT license
High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as MIT license
GitHub
GitHub - 0wczar/airframe-react: Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.web…
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe - GitHub - 0wczar/airframe-react: Free Open Source High Quality Dashboard...
CRA Redux template v 1.0.0
You can use this template to set up a brand new create-react-app project that will be automatically set up with:
• Redux Toolkit and React-Redux dependencies included
• A Redux store configured and created
• The React-Redux <Provider> passing the store to your React components
• A small "counter" example showing how to add Redux logic using Redux Toolkit and a "ducks" / feature-based structure, and using the React-Redux hooks API to interact with the store from inside your components
You can use this template to set up a brand new create-react-app project that will be automatically set up with:
• Redux Toolkit and React-Redux dependencies included
• A Redux store configured and created
• The React-Redux <Provider> passing the store to your React components
• A small "counter" example showing how to add Redux logic using Redux Toolkit and a "ducks" / feature-based structure, and using the React-Redux hooks API to interact with the store from inside your components
Thinking in React isn’t enough
A quick read on how Ohans cleaned up some complicated React code at work using the Compound Components pattern
A quick read on how Ohans cleaned up some complicated React code at work using the Compound Components pattern
react-hook-use-cancelable-thunk-reducer
Custom implementation of react hook useReducer that allows to dispatch thunk actions and will cancel all dispatched actions if the component is unmounted
Custom implementation of react hook useReducer that allows to dispatch thunk actions and will cancel all dispatched actions if the component is unmounted
React Tiger Transition
Easy page transitions for react-router. Built with react-transition-group. Use the provided transitions or create your own
Easy page transitions for react-router. Built with react-transition-group. Use the provided transitions or create your own
Hacker UI | a design system for developers
Hacker UI is an open source React design system, currently in early alpha stages. If you want to be involved in building a brandless, simple, responsive design system, the team is looking for contributors
Hacker UI is an open source React design system, currently in early alpha stages. If you want to be involved in building a brandless, simple, responsive design system, the team is looking for contributors
When to use React context or Redux / Redux Toolkit
This post draws from the Redux Docs and various other articles and talks to give a quick, condensed answer about this specific topic.
This post draws from the Redux Docs and various other articles and talks to give a quick, condensed answer about this specific topic.
Writing unit tests with React, Typescript, and react-testing-library
In this article, Wojciech Matuszewski shares a pattern he came up with for writing tests which avoids unnecessary repetition and makes it clear how Typescript can be more of tool and less of a burden
In this article, Wojciech Matuszewski shares a pattern he came up with for writing tests which avoids unnecessary repetition and makes it clear how Typescript can be more of tool and less of a burden
Persisting React State in localStorage
In this tutorial, Josh Comeau walks though how to create a custom React hook (useStickyState) to abstract away the "stickiness" of a React app, so we get it for free whenever we need it.
In this tutorial, Josh Comeau walks though how to create a custom React hook (useStickyState) to abstract away the "stickiness" of a React app, so we get it for free whenever we need it.
Forwarded from 🌰🐿
Event Bubbling and Event Catching in JavaScript and React – A Beginner’s Guide
Mariya Diminsky created this beginner-friendly tutorials to help you understand event bubbling and event catching like a pro. You’ll learn about event propagation and how it works in JavaScript and React in a clear and comprehensible way.
Mariya Diminsky created this beginner-friendly tutorials to help you understand event bubbling and event catching like a pro. You’ll learn about event propagation and how it works in JavaScript and React in a clear and comprehensible way.
Learning React State Manager Jotai With 7GUIS Tasks
In this article, Daishi Kato re-created the 7GUIs task challenge with jotai, a new primitive and flexible state management solution for React. The tasks are organized from basic tasks to advanced tasks, and you will get to see how they are implemented firsthand.
In this article, Daishi Kato re-created the 7GUIs task challenge with jotai, a new primitive and flexible state management solution for React. The tasks are organized from basic tasks to advanced tasks, and you will get to see how they are implemented firsthand.
Virtualizing Large Data Lists with react-window
In this tutorial, Ikeh Akinyemi covers how to render large amount of data, either from an external API or a dummy data file within your application. He’ll use a React library, react-window, to render this large amount of data, then show you how to build a simple e-commerce app displaying a list of products.
In this tutorial, Ikeh Akinyemi covers how to render large amount of data, either from an external API or a dummy data file within your application. He’ll use a React library, react-window, to render this large amount of data, then show you how to build a simple e-commerce app displaying a list of products.
Nice Modal
This is a small, zero dependency utility to manage modals in a natural way for React. It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id. Created by the developers at eBay
This is a small, zero dependency utility to manage modals in a natural way for React. It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id. Created by the developers at eBay