React is one of the most popular and preferred frontend UI libraries, used in nearly 50 million projects each month.
It provides all the functionality you need to streamline the process of developing fast, scalable websites and web applications. Pair React with Next.js, and you can build amazing applications capable of handling millions of users. The demand for skilled React developers remains high.
Because of this, there’s a growing need for programmers who are proficient in this powerful JavaScript library.
Let’s get started!
1. Under the Hood: ReactJS
This repository explains the inner workings of React. One of the best ways to master a library is to dig deeper into its core concepts.
Bogdan-Lyashenko / Under-the-hood-ReactJS
Entire React code base explanation by visual block schemes (Stack version)
Under the hood: React
This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put all the logic on visual block-schemes, analyzed them, summarized and explained main concepts and approaches. I've already finished with Stack version and now I work with the next, Fiber version.
I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started Codecrumbs project. It will help to build projects like "Under the hood ReactJs" in a shorter time and in a simpler way!
Each scheme is clickable and can be opened in a new tab, use that to zoom it and be able to read from it. Keep the article and a scheme you are reading about at that moment in separate windows (tabs), that will help to match text and code flow easier.
We…
2. Awesome React
A never-ending list of resources, tools, and references related to React and its ecosystem.
enaqx / awesome-react
A collection of awesome things regarding React ecosystem
Offer API docs that look as good as Stripe's using our sponsor Fern. Request a preview of your docs on Fern.
A collection of awesome things regarding the React ecosystem.
-
React
- React General Resources
- React Tutorials
- React Frameworks
- React Component Libraries
- React State Management and Data Fetching
- React Styling
- React Routing
- React Development Tools
- React Libraries
- React Testing
- React Awesome Components
- React Components Sandboxes
- React Forms
- React Tables and Grids
- React Maps
- React Charts
- React Renderers
- React Internationalization
- React Graphics and Animations
- React Integration
- React Real Apps
- React Native
- Contribution
React
React General Resources
- React Official Website
- React GitHub
- Reactiflux Discord Channel
- React Community
- React Conferences
- React CodeSandbox Playground
React Tutorials
3. React TypeScript Cheatsheet
A cheatsheet for React developers getting started with TypeScript.
4. React Patterns
A compilation of React patterns, techniques, tips, and tricks.
vasanthk / react-bits
✨ React patterns, techniques, tips and tricks ✨
A compilation of React Patterns, techniques, tips and tricks.
Gitbook format: https://vasanthk.gitbooks.io/react-bits
Github repo: https://github.com/vasanthk/react-bits
Your contributions are heartily ♡ welcome. (✿◠‿◠)
Translations by community:
- 中文版 (Chinese): react-bits-cn
- 한국어 (Korean): react-bits-ko
- Design Patterns and Techniques
- Conditional in JSX
- Async Nature Of setState()
- Dependency Injection
- Context Wrapper
- Event Handlers
- Flux Pattern
- One Way Data Flow
- Presentational vs Container
- Third Party Integration
- Passing Function To setState()
- Decorators
- Feature Flags
- Component Switch
- Reaching Into A Component
- List Components
- Format Text via Component
- React Fragments
- Share Tracking Logic
- Anti-Patterns
- Handling UX Variations
- Perf Tips
- Styling
5. React Roadmap
Learn React systematically. This roadmap covers everything you need to know about React and its ecosystem in 2024.
6. A Production-Ready React Application
Dub.sh is one of the best production-grade examples of a React application. It includes Next.js, next-auth, Prisma, and more. It’s also a monorepo.
dubinc / dub
Open-source link management infrastructure. Loved by modern marketing teams like Vercel, Raycast, and Perplexity.
Dub.co
The open-source Bitly successor
Learn more »
Introduction ·
Features ·
Tech Stack ·
Self-hosting ·
Contributing
Introduction
Dub.co is the open-source link management infrastructure for modern marketing teams.
Features
Tech Stack
- Next.js – framework
- TypeScript – language
- Tailwind – CSS
- Upstash – redis
- Tinybird – analytics
- PlanetScale – database
- NextAuth.js – auth
- BoxyHQ – SSO/SAML
- Turborepo – monorepo
- Stripe – payments
- Resend – emails
- Vercel – deployments
- Pangea - link scanning
Self-Hosting
You can self-host Dub.co for greater control over your data and design. Read this guide to learn more.
Contributing
We love our contributors! Here's how you can contribute:
- Open an issue if you believe you've encountered a bug.
- Follow the local development guide to get your local dev environment set up.
- Make a pull request to add new features/make quality-of-life improvements/fix bugs.
Repo Activity
License
Inspired by…
7. Production-Ready React Hooks
A comprehensive collection of production-ready React hooks, including useScroll
, useBattery
, useQueue
, and more.
👍
react-use
Collection of essential React Hooks Port of
libreact
Translations: 🇨🇳 汉语
npm i react-use
-
Sensors
-
useBattery
— tracks device battery state. -
useGeolocation
— tracks geo location state of user's device. -
useHover
anduseHoverDirty
— tracks mouse hover state of some element. -
useHash
— tracks location hash value. -
useIdle
— tracks whether user is being inactive. -
useIntersection
— tracks an HTML element's intersection. -
useKey
,useKeyPress
,useKeyboardJs
, anduseKeyPressEvent
— track keys. -
useLocation
anduseSearchParam
— tracks page navigation bar location state. -
useLongPress
— tracks long press gesture of some element. -
useMedia
— tracks state of a CSS media query. -
useMediaDevices
— tracks state of connected hardware devices. -
useMotion
— tracks state of device's motion sensor. -
useMouse
anduseMouseHovered
— tracks state of mouse position. -
useMouseWheel
— tracks deltaY of scrolled mouse wheel. -
useNetworkState
— tracks the state of browser's network connection. -
useOrientation
— tracks…
-
Wrapping It Up!
Congratulations on making it this far! You’re a fantastic reader!
These are just a few great repositories available for React. There are many more to explore, so feel free to dive deeper into the React ecosystem and find even more amazing resources!
Top comments (0)