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.
Medium
Table of contents
- Awesome React
- React in Patterns
- 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.
enaqx
/
awesome-react
A collection of awesome things regarding React ecosystem
Awesome React 
A collection of awesome things regarding the React ecosystem.
React in Patterns
⭐ Github stars: 11k +
📚 A free book about design patterns/techniques used while developing with React.
krasimir
/
react-in-patterns
A free book that talks about design patterns/techniques used while developing with React.
React in patterns
Book
Translations
Content
Foundation
- Communication
- Event handlers
- Composition
- Controlled and uncontrolled inputs
- Presentational and container components
Data flow
MISC
Source code
The code samples used in the book are available here.
Other resources
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. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take more than 100 days, follow your own pace.
| # 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 |
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…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
- 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
- Share Tracking Logic
- Anti-Patterns
- Handling UX Variations
- Perf Tips
- Styling
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?
typesafe-actions@5.x
Goals
- Complete type safety (with
--strictflag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking withanytype) - Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like Type Inference and…
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
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…
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
📚 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
🔨 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
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 beautiful (and hopefully useful) React hooks to speed-up your components and hooks development
💡 Why?
React custom hooks allow to abstract components' business logic into single reusable functions.
So far, we've found that most of the hooks we've created and therefore shared between our internal projects have quite often a similar gist
that involves callback references, events and components' lifecycle.
For this reason we've tried to sum up that gist into beautiful-react-hooks: a collection of (hopefully) useful React hooks to possibly
help other companies and professionals to speed up their development process.
Furthermore, we created a concise yet concrete API having in mind the code readability, focusing to keep the learning curve as lower as…
React Use
⭐ Github stars: 30k +
The essential collection of custom React Hooks, complete with documentation.
👍
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. -
useHoveranduseHoverDirty— 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. -
useLocationanduseSearchParam— 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. -
useMouseanduseMouseHovered— tracks state of mouse position. -
useMouseWheel— tracks deltaY of scrolled mouse wheel. -
useNetworkState— tracks the state of browser's network connection. -
useOrientation— tracks…
-
UseHooks
⭐ Github stars: 3.6k +
Recipes for React Hook code that are simple to grasp.
This is the repository for usehooks.com, a Gatsby powered blog that publishes easy to understand React Hook code recipes.
If you'd like to submit new post ideas, improve existing posts, or change anything about the website feel free to submit an issue or pull-request.
Please consider sponsoring this project through my Github sponsors page. Any level of support is appreciated. I have a few higher tiers that include having your company listed on the usehooks website and newsletter.
To run locally, yarn, then yarn dev, then open localhost:8000.
Post Index
useFirestoreQuery
useMemoCompare
useAsync
useRequireAuth
useRouter
useAuth
useEventListener
useWhyDidYouUpdate
useDarkMode
useMedia
useLockBodyScroll
useTheme
useSpring
useHistory
useScript
useKeyPress
useMemo
useDebounce
useOnScreen
usePrevious
useOnClickOutside
useAnimation
useWindowSize
useHover
useLocalStorage
Unlicense — public domain
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!
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…
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.
Sponsored
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…
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.
- This React course is good if you’re struggling to learn React beyond the basics
- This coding interview bootcamp is helpful if you’re serious about getting hired as a developer
Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.
Downloading PDF/Epub formats
You can download the PDF and Epub version of this repository from the latest run on the actions tab.
Table of Contents
…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.
30-seconds
/
30-seconds-of-react
Short React code snippets for all your development needs
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 it a star. It means a lot to the people maintaining it.
Want to contribute?
- If you want to help us improve, take a…
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 🙋
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 :)
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…
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
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…
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
Discussions
Tutorials
- "Making Sense of React Hooks" by Dan Abramov
- "From React.Component to hooks" by Octave Raimbault
- "React Hooks: What’s going to happen to my tests?" by Kent C. Dodds
- "State Management with React Hooks - No Redux or Context API" by André Gardi
- "How to Fetch Data with React Hooks?" by Robin Wieruch
- Primer on React Hooks
- React Hooks - A deeper dive featuring useContext and useReducer
- "Using Custom React Hooks to Simplify Forms" by James King
- Testing of a Custom React Hook for Fetching Data with Axios
- The Guide to Learning React Hooks (Examples & Tutorials) by Eric Bishard
- "Sanely Testing React Hooks" by Dave Cooper
- React by Example: Hooks
Videos
-
🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Official announcement and first demo. -
🎬 ReactConf 2018: 90% Cleaner React by…
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.
Contents
Community
Essentials
Articles
- Using Next.js with FaunaDB: How to Query the Database from Your App
- How to Build a Serverless Next.js Blog with ButterCMS
- Build a Universal JavaScript App with Next.js
- Getting Started with Next.js — Setting Up Your App
- Getting Started with Next.js — Bringing Data In
- How to build a Next.js React Universal App
- Next on Next.js
- Accept payments on your site with nextjs, stripe, and micro
- Next.js on Cloud Functions for Firebase with Firebase Hosting
- Building a Blog With Next.js
- Using Google Analytics with Next.js
- Build a Universal JavaScript App with…
Would you like to support me?
Your tip will go to Martin through Stripe of his choice, letting him know you appreciate his story. Give a tip
I’m Martin Adams, the founder of @RemoteCamp and @DailyContentWriting.
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!
Discussion (8)
really thanks :)
You're welcome.
medium.com/gitconnected/build-70-r...
Thanks 😊
good job, well appreciated!
You're welcome.
Build 70+ React Projects to Master React for Free
medium.com/gitconnected/build-70-r...
Amazing resource this was a good post.
You're welcome.
Build 70+ React Projects to Master React for Free
medium.com/gitconnected/build-70-r...
Thank you so much for sharing all these amazing resources! I've been looking for something like this for quite a long while :)