7 Interesting GitHub Repositories to Become a Pro React Developer

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…

View on GitHub

---

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

Awesome React

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
  • React Native General Resources
  • React Native Navigation
  • React Native Awesome Components
  • React Native Libraries
• Contribution

React

React General Resources

• React Official Website
• React GitHub
• Reactiflux Discord Channel
• React Community
• React Conferences
• React CodeSandbox Playground

React Tutorials

• React Official Tutorial
• Using React in Visual Studio Code
• React Interview Questions & Answers
• Design patterns and Component patterns for building powerful Web…

View on GitHub

---

3. React TypeScript Cheatsheet

A cheatsheet for React developers getting started with TypeScript.

React TypeScript Cheatsheets | React TypeScript Cheatsheets

React TypeScript Cheatsheets

react-typescript-cheatsheet.netlify.app

---

4. React Patterns

A compilation of React patterns, techniques, tips, and tricks.

vasanthk / react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

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
  • Introduction
  • Props In Initial State
  • findDOMNode()
  • Mixins
  • setState() in componentWillMount()
  • Mutating State
  • Using Indexes as Key
  • Spreading Props on DOM elements
• Handling UX Variations
  • Introduction
  • Composing UX Variations
  • Toggle UI Elements
  • HOC for Feature Toggles
  • HOC props proxy
  • Wrapper Components
  • Display Order Variations
• Perf Tips
  • Introduction
  • shouldComponentUpdate() check
  • Using Pure Components
  • Using reselect
• Styling
  • Introduction
  • Stateless UI Components
  • Styles Module
  • Style…

View on GitHub

---

5. React Roadmap

Learn React systematically. This roadmap covers everything you need to know about React and its ecosystem in 2024.

React Developer Roadmap: Learn to become a React developer

Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.

roadmap.sh

---

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

• Advanced Analytics
• Branded Links
• QR Codes
• Personalization
• Team Collaboration

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…

View on GitHub

---

7. Production-Ready React Hooks

A comprehensive collection of production-ready React hooks, including useScroll, useBattery, useQueue, and more.

streamich / react-use

React Hooks — 👍

👍
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 and useHoverDirty — 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, and useKeyPressEvent — track keys.
  • useLocation and useSearchParam — 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 and useMouseHovered — tracks state of mouse position.
  • useMouseWheel — tracks deltaY of scrolled mouse wheel.
  • useNetworkState — tracks the state of browser's network connection.
  • useOrientation — tracks…

View on GitHub

---

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!