DEV Community

Cover image for 19 GitHub Repositories to Become a React Master βš›οΈπŸ§™
Madza
Madza Subscriber

Posted on • Originally published at madza.hashnode.dev

19 GitHub Repositories to Become a React Master βš›οΈπŸ§™

React is among the most popular choices to build interactive UIs. Learning and mastering it can be challenging if you are not aware of the resources that are available to you.

In this article I have compiled some of the most useful GitHub repositories, so you don't need to apply for expensive courses and boot camps.

I have further sorted all the resources into categories from the core library itself to learning, projects, best practices, components, hooks, cheatsheets, snippets, preparing for interviews, as well as additional resources so can study to broaden your React knowledge even more.


Core library

1. react

⭐ GitHub stars: 189k+

GitHub logo facebook / react

A declarative, efficient, and flexible JavaScript library for building user interfaces.

A declarative, efficient, and flexible JavaScript library for building user interfaces.

2. under-the-hood-reactjs

⭐ GitHub stars: 4k+

GitHub logo Bogdan-Lyashenko / Under-the-hood-ReactJS

Entire React code base explanation by visual block schemes (Stack version)

Entire React codebase explanation by visual block schemes.


Learning

3. react-developer-roadmap

⭐ GitHub stars: 17k+

GitHub logo adam-golab / react-developer-roadmap

Roadmap to becoming a React developer

Roadmap to becoming a React developer.

4. react-in-patterns

⭐ GitHub stars: 11k+

GitHub logo krasimir / react-in-patterns

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

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


Projects

5. 30-days-of-react

⭐ GitHub stars: 12k+

GitHub logo 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.

A practical step-by-step guide to learning React in 30 days.

6. real-world-react-apps

⭐ GitHub stars: 2k+

GitHub logo jeromedalbert / real-world-react-apps

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

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


Best practices

7. react-bits

⭐ GitHub stars: 11k+

GitHub logo vasanthk / react-bits

✨ React patterns, techniques, tips and tricks ✨

React patterns, techniques, tips, and tricks.

8. react-redux-typescript-guide

⭐ GitHub stars: 11k+

GitHub logo piotrwitek / react-redux-typescript-guide

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

A compendium documenting the most important patterns and recipes on how to use React.


Components

9. awesome-react-components

⭐ GitHub stars: 29k+

GitHub logo brillout / awesome-react-components

Curated List of React Components & Libraries.

A curated list of React components & libraries.

10. hocs

⭐ GitHub stars: 1k+

GitHub logo deepsweet / hocs

🍱 Higher-Order Components for React

The list of higher-order components for React.


Hooks

11. react-use

⭐ GitHub stars: 29k+

GitHub logo streamich / react-use

React Hooks β€” πŸ‘

A great collection of custom React hooks.

12. beautiful-react-hooks

⭐ GitHub stars: 5k+

GitHub logo antonioru / beautiful-react-hooks

πŸ”₯ A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development πŸ”₯

A collection of useful React hooks to speed up your components and hooks development.


Cheatsheets

13. react-cheatsheets

⭐ GitHub stars: 33k+

GitHub logo typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

Cheatsheets for experienced React developers getting started with TypeScript.

14. react-hooks-cheatsheet

⭐ GitHub stars: 600+

GitHub logo ohansemmanuel / react-hooks-cheatsheet

πŸ¦– React hooks cheatsheet with live editable examples

React hooks cheatsheet with live editable examples.


Snippets

15. 30-seconds-of-react

⭐ GitHub stars: 4k+

GitHub logo 30-seconds / 30-seconds-of-react

Short React code snippets for all your development needs

Short React code snippets for all your development needs.


Interviews

16. reactjs-interview-questions

⭐ GitHub stars: 21k+

GitHub logo sudheerj / reactjs-interview-questions

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

List of top 500 React interview questions and answers.


Challenges

17. react-coding-challenges

⭐ GitHub stars: 1k+

GitHub logo alexgurr / react-coding-challenges

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

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


Resources

18. awesome-react

⭐ GitHub stars: 48k+

GitHub logo enaqx / awesome-react

A collection of awesome things regarding React ecosystem

A collection of awesome things regarding React ecosystem.

19. react-redux-links

⭐ GitHub stars: 21k+

GitHub logo markerikson / react-redux-links

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

Curated tutorial and resource links on React, Redux, ES6, and more.


Bonus

As bonus material, I want to share a couple of my own open-source React projects that I built while learning the library. I've also written in-depth tutorials for both, so you can get further insight into what practical examples of working in React looks like.

audio-player

⭐ GitHub stars: 80+

GitHub logo madzadev / audio-player

🎡 Music player with custom controls, playlist, filters, and search.

Music player with custom controls, playlist, filters, and search.

The full-length tutorial is available here.

calculator

⭐ GitHub stars: 60+

GitHub logo madzadev / calculator

βž— Calculator with decimals, negative values, percentages.

Calculator with decimals, negative values, and percentages.

The full-length tutorial is available here.


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

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Top comments (16)

Collapse
 
lalami profile image
Salah Eddine Lalami

Thanks for sharing ,
here another project you can learn from it's Mern-stack React.js Redux Node.js :
github.com/idurar/idurar-erp-crm

open source erp

Collapse
 
madza profile image
Madza

Awesome, thanks for sharing! πŸ‘πŸ’―

Collapse
 
jarvisscript profile image
Chris Jarvis

Thanks for making this list. Adding it to my bookmarks.

Collapse
 
madza profile image
Madza

Happy to hear you found it useful βœ¨πŸ‘πŸ’―

Collapse
 
getcodescandy profile image
codescandy

thank you for this useful Github repositories.

Collapse
 
madza profile image
Madza

Happy to help, thanks a lot πŸ‘βœ¨

Collapse
 
levintech profile image
Levin

Great, you are always doing good work.

Collapse
 
madza profile image
Madza

Thanks a lot βœ¨πŸ‘πŸ’―

Collapse
 
bobbyiliev profile image
Bobby Iliev

Great list! Well done!

Collapse
 
madza profile image
Madza

Thanks a lot, Bobby βœ¨πŸ‘πŸ˜‰

Collapse
 
sarmaakondi profile image
Sarma Akondi V N M

Awesome share as always 😊

Collapse
 
madza profile image
Madza

Thank you so much πŸ’―πŸ‘βœ¨

Collapse
 
faisalamin001 profile image
Faisal Amin

Awesome, thanks for sharing

Collapse
 
madza profile image
Madza

My pleasure, thanks for checking them out πŸ‘βœ¨βœ¨

Collapse
 
hasan_ali_62def8a987524d0 profile image
hasan ali

Are these repositories still relevant in 2024?

Collapse
 
madza profile image
Madza

Most of them are resource and learning repositories, that are still actively updated so I would say that they are still relevant in 2024 as well. Thanks for checking out the article and I hope it's useful for you!