Martin Adams

Posted on Aug 4, 2022 • Updated on Aug 20, 2022 • Originally published at levelup.gitconnected.com

20 GitHub Repositories to Become a React Master

#react #javascript #webdev #beginners

If you are just starting off with React, this article is well worth your time to read and bookmark. These 20 React Github repositories will undoubtedly assist you in becoming a React Master.

I'm a full-time Freelancer. Hire me on Upwork.

Awesome React ⭐ Github Stars: 49k +
React in Patterns ⭐ Github Stars: 11k +
30 Days Of React
Real-world React Apps
React Bits
React & Redux in TypeScript of Complete Guide
Awesome React Components
Ahooks
Beautiful React Hooks
React Use
UseHooks
React TypeScript Cheatsheets
ReactJS coding challenges
React Interview Questions & Answers
30 seconds of react
React Hooks Cheatsheet
React/Redux Links
React Developer Roadmap
Awesome React Hooks
Awesome Next.js

Awesome React

⭐ Github Stars: 49k +

A collection of awesome things regarding the React ecosystem.

Awesome React

A collection of awesome things regarding the React ecosystem.

React

React General Resources

React Tutorials

View on GitHub

React in Patterns

⭐ Github stars: 11k +

📚 A free book about design patterns/techniques used while developing with React.

React in patterns

📚 A free book that talks about design patterns/techniques used while developing with React.

Book

Translations

简体中文

Content

In brief

Foundation

Data flow

MISC

Source code

The code samples used in the book are available here.

Other resources

React Design principles
…

View on GitHub

30 Days Of React

⭐ Github stars: 4k +

30 Days of React challenge is a step-by-step guide to learning React in 30 days. It requires HTML, CSS, and JavaScript knowledge. It would be best if you were comfortable with JavaScript before starting React.

Asabeneh / 30-Days-Of-React

30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw

30 Days Of React

_{Author: Asabeneh Yetayeh

October, 2020}

Day 1 >>

# Day	Topics
00	Introduction How to Use Repo Requirements Setup
01	JavaScript Refresher
02	Getting Started React
03	Setting Up
04	Components
05	Props
06	List, Map and Keys
07	Class Components
08	States
09	Conditional Rendering
10	React Project Folder Structure
11	Events
12	Forms
13	Controlled and Uncontrolled Component
14	Component Life Cycles
15	Third Party Packages
16	Higher Order Components
17	React Router
18	Fetch versus Axios
19	Projects
20	Projects
21	Hooks
22	Forms Using Hook
23	Fetching Data Using Hooks
24	Project using Hooks
25	Custom Hooks
26	Context
27	Ref
28	project
29	Explore
30	Conclusions

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

Support the author to create more educational materials

View on GitHub

Real-world React Apps

⭐ Github stars: 2k +

Real-world React apps and their open-source codebases for developers to learn from.

jeromedalbert / real-world-react-apps

Real world React apps and their open source codebases for developers to learn from

Real world React apps

Real world React apps and their open source codebases for developers to learn from

Learn from React apps written by experienced developers.

You'll find the source code for the apps in the apps/ subdirectory.

Thank you to every developer who has worked on a project this repo links to, your work is helping developers learn React.

How to install on your computer

# Clone this git repo:
git clone git@github.com:jeromedalbert/real-world-react-apps.git

cd real-world-react-apps/

# The apps are linked to as git submodules.
# This will take some time... (see comment below for possible speedup)
git submodule update --init

# OR if you've got git 2.9+ installed try to run updates in parallel:
# git submodule update --init --jobs 4

How you can analyze the apps

Some of the examples below use ag, but could just as well use grep or equivalent.

Global searches

# Look for

…

View on GitHub

React Bits

⭐ Github stars: 12k +

✨ 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

View on GitHub

React & Redux in TypeScript of Complete Guide

⭐ Github stars: 12k +

A comprehensive approach to utilizing TypeScript for static input in React and Redux apps. This tutorial details the most significant patterns and secrets for using TypeScript to leverage React (and its ecosystem) in a functional approach. It will assist you in making your code completely type-safe while focusing on inferring types from implementation.

piotrwitek / react-redux-typescript-guide

The complete guide to static typing in "React & Redux" apps using TypeScript

React & Redux in TypeScript - Complete Guide

"This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript. It will help you make your code completely type-safe while focusing on inferring the types from implementation so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."

Found it useful? Want more updates?

Show your support by giving a ⭐

What's new?

🎉 Now updated to support TypeScript v4.6 🎉 🚀 _Updated to typesafe-actions@5.x 🚀

Goals

Complete type safety (with --strict flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with any type)
Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like Type Inference and…

View on GitHub

Awesome React Components

⭐ Github stars: 3k +

This is an AWESOME list of components. No, this is not an exhaustive list of every React component under the sun. So, what exactly does “great” mean? Well:

It addresses a genuine issue.
It performs things in an unusual, attractive, or extraordinary manner. (And it’s not very well-known or popular… there’s no use in including those.)
It has recently committed code!
For genuinely great creations, look for a. In addition, watch for quickie maintainer remarks and reviews in (italic parens) after several note listings.

brillout / awesome-react-components

Curated List of React Components & Libraries.

🚀 Absolutely Awesome React Components & Libraries

This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well:

It solves a real problem
It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
It has recent code commits!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

Maintainers:

@petebray, author of Fluxguard — monitor PROD website changes.
@brillout, author of vite-plugin-ssr (like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin) and Telefunc (remote functions instead of APIs).

Contributing

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list…

View on GitHub

Ahooks

⭐ Github stars: 10k +

A high-quality & reliable React Hooks library.

Easy to learn and use
Supports SSR
Special treatment for functions, avoid closure problems
It contains a large number of advanced Hooks that are refined from business scenarios
Includes a comprehensive collection of bare Hooks
Written in TypeScript with predictable, static types

alibaba / hooks

A high-quality & reliable React Hooks library.

English | 简体中文

📚 Documentation

✨ Features

Easy to learn and use
Supports SSR
Special treatment for functions, avoid closure problems
Contains a large number of advanced Hooks that are refined from business scenarios
Contains a comprehensive collection of basic Hooks
Written in TypeScript with predictable static types

📦 Install

$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
# or
$ bun add ahooks

🔨 Usage

import { useRequest } from 'ahooks';

💻 Online Demo

🤝 Contributing

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start

Open your browser and visit http://127.0.0.1:8000

We welcome all contributions, please read our CONTRIBUTING.MD first, let's build a better hooks library together.

Thanks to all the contributors:

👥 Discuss

View on GitHub

Beautiful React Hooks

⭐ Github stars: 5.7k +

A collection of attractive and (hopefully) useful React hooks to help you write components and hooks faster.

antonioru / beautiful-react-hooks

🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

A collection of tailor-made React hooks to enhance your development process and make it faster

🌟 Hooks Playground 🌟

💡 Why?

Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.
I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the component lifecycle.
Therefore, I have created beautiful-react-hooks, a collection of useful React hooks that may help other developers speed up their development process.
Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as possible, making it suitable for larger teams to use and share t -- Please before using…

View on GitHub

React Use

⭐ Github stars: 30k +

The essential collection of custom React Hooks, complete with documentation.

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

UseHooks

⭐ Github stars: 3.6k +

Recipes for React Hook code that are simple to grasp.

uidotdev / usehooks

A collection of modern, server-safe React hooks – from the ui.dev team

useHooks

A collection of modern, server-safe React hooks – from the ui.dev team.

Compatible with React v18.0.0+.

Standard

Install

npm i @uidotdev/usehooks

Hooks

Experimental

Install

npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental

Hooks

View on GitHub

React TypeScript Cheatsheets

⭐ Github stars: 34.8k +

Cheatsheets for experienced React developers getting started with TypeScript.

typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

Web docs | Español | Português | Contribute! | Ask!

👋 This repo is maintained by @swyx, @eps1lon and @filiptammergard. We're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue! 👍

| |

All React + TypeScript Cheatsheets

The Basic Cheatsheet is focused on helping React devs just start using TS in React apps
- Focus on opinionated best practices, copy+pastable examples.
- Explains some basic TS types usage and setup along the way.
- Answers the most Frequently Asked Questions.
- Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning too much TS.
The Advanced Cheatsheet helps show and explain advanced usage of generic types for people writing…

View on GitHub

React Coding Challenges

⭐ Github stars: 1.9k +

A series of ReactJS coding challenges with a variety of difficulties.

alexgurr / react-coding-challenges

A series of ReactJS coding challenges with a variety of difficulties.

⭐️ Looking for collaborators ⭐️

We're looking for people to come and help work on the latest challenge Coinbee. If you're interested, get in touch via our slack community or via my website alexgurr.com!

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here.

Interested in some React fundamentals / philosophies? Check out the react-philosophies GitHub repo.

Time To Estimate. A fun, simple way for agile teams to remotely estimate tasks together. Free, with no sign-up required.

mixmello. Create remixed versions of your favourite Spotify playlists.

The Challenges

Easy 🙂

🚀 Rocket Ship

Unnecessary re-renders, fine grained control.

Medium 😐

🌙 Dark Mode

State / shared state, DOM manipulation.

🐝 Coinbee

Data visualisation and graphing. API usage.

Hard 😬

🎧 Spootify

Loading state, API usage.

🤖 Chatter

Web sockets, events, callbacks & React hooks. Talks to Botty…

View on GitHub

React Interview Questions & Answers

⭐ Github stars: 1.9k +

List of top 500 ReactJS Interview Questions & Answers….Coding exercise questions are coming soon!!

sudheerj / reactjs-interview-questions

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

React Interview Questions & Answers

Click ⭐if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.

I recommend this React course if you’re serious about learning React and want to go beyond the basics
Want to ace your coding interview and get hired at your dream company? Take this coding interview bootcamp

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

No.	Questions
Core React
1	What is React?
2	What is the history behind React evolution?
3	What are the major features of React?
4	What is JSX?
5	What is the difference between Element and Component?
6	How to create components in React?
7	When to use a Class Component over a Function Component?
8	What are Pure Components?
9	What is state in React?
10	What are props in React?
11

…

View on GitHub

30 Seconds of React

⭐ Github stars: 4.3k +

Short React code snippets for all your development needs

Visit our website to view our snippet collection.
Use the Search page to find snippets that suit your needs. You can search by name, tag, language, or a snippet’s description. Just start typing a term and see what comes up.
Browse the React Snippet collection to see all the snippets in this project, or click individual tags at the top of the same page to narrow your search to a specific title.
Click on each snippet card to view the whole snippet, including code, explanation, and examples.
You can use the button at the bottom of a snippet card to view the snippet in Codepen.
If you like the project, give it a star. It means a lot to the people maintaining it.

Chalarangelo / 30-seconds-of-react

Short React code snippets for all your development needs

IMPORTANT NOTICE:

As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.

Please watch, star and follow relevant activity there.

30 seconds of code

Short React code snippets for all your development needs

Visit our website to view our snippet collection.
Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
Browse the React Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
Click on each snippet card to view the whole snippet, including code, explanation and examples.
You can use the button at the bottom of a snippet card to view the snippet in Codepen.
If you like the project, give…

View on GitHub

React Hooks Cheatsheet

⭐ Github stars: 655+

A Cheatsheet with live editable examples 💪

A one-stop reference for the React hooks APIs
Doesn’t replace the official docs.
However, it contains actual code examples, each mimicking all APIs of hooks.
It includes some real-world examples of cases/issues you’ll likely run into
Most importantly, the cheatsheet contains live editable codes.

[

GitHub - ohansemmanuel/react-hooks-cheatsheet: 🦖 React hooks cheatsheet with live editable…

ohansemmanuel / react-hooks-cheatsheet

🦖 React hooks cheatsheet with live editable examples

A Cheatsheet with live editable examples 💪

A one-stop reference for the React hooks APIs
Doesn't replace the official docs.
However, it contains actual code examples each mimicking all APIs of hooks.
Contains some real world examples of cases / issues you'll likely run into
Most importantly, the cheatsheet contains live editable codes.

Examples

includes live examples 🙋‍

👉🏿👉🏿👉🏿 Get Started

Todos

Add example call signatures to all hooks
Add more examples that explain interesting use cases from the official Hooks FAQ

Contributing

Contributions of any kind are welcome. If you wanna knock off any of the todos above, please feel free to issue a PR. Got an interesting idea for the cheatsheet? Issue a PR :)

View on GitHub

React/Redux Links

⭐ Github stars: 21.6K+

Curated tutorial and resource links I’ve collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem as a source for quality information on advanced topics and techniques. Not quite “awesome,” but hopefully useful as a starting point, I can give others. Suggestions welcome.

markerikson / react-redux-links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more

React/Redux Links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.

Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com.

You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and…

View on GitHub

React Developer Roadmap

⭐ Github stars: 17K+

Below you can find a chart demonstrating the paths you can take and the libraries you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, “What should I learn next as a React developer?”

adam-golab / react-developer-roadmap

Roadmap to becoming a React developer

React Developer Roadmap

README in Chinese

README in Japanese

README in Korean

README in Portuguese (Brazil)

README in Russian

README in Spanish

Roadmap to becoming a React developer in 2019:

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a React developer?"

Disclaimer

The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for…

View on GitHub

Awesome React Hooks

⭐ Github stars: 8.2K+

The essential collection of custom React Hooks, complete with documentation.

rehooks / awesome-react-hooks

Awesome React Hooks

awesome-react-hooks

Awesome React Hooks Resources

Documentation

React Hooks Docs

Discussions

React Hooks RFC

Tutorials

Videos

🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Official announcement and first demo.
🎬 ReactConf 2018: 90% Cleaner React by…

View on GitHub

Awesome Next.js

⭐ Github stars: 7.5K+

A selected assortment of books, videos, and articles about Next.js, the React server's rendering framework.

unicodeveloper / awesome-nextjs

📔 📚 A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendered React applications)

Awesome Next.js

Curated list of resources: books, videos, articles about using Next.js.

Next.js: The React Framework.

List inspired by the awesome list thing. You might also like awesome-tdd.

Awesome Next.js
- Contents
- Community
- Essentials
- Articles
- Boilerplates
- Extensions
- Apps
- Books
- Videos
- Projects(Beginner level)
- Newsletters
- Contributing
- License

Community

Essentials

Articles

View on GitHub

Remote Jobs

Give Me Great Power

I'm a full-time Freelancer. Hire me on Upwork.

Writing has always been my passion, and it gives me the pleasure of helping and inspiring people. If you have any questions, feel free to reach out!

Welcome to Connect me on Twitter, LinkedIn, and GitHub!