I came across a couple of GitHub repositories that will make you a React Pro in no time! If you're new to React or are already familiar with the framework and want to advance, you should check out these GitHub repositories.
1. Awesome React
⭐ 50.3K
A massive collection of nearly everything you need to know about React.
enaqx / awesome-react
A collection of awesome things regarding React ecosystem
Awesome React
A collection of awesome things regarding the React ecosystem.
-
React
- React General Resources
- React Tutorials
- React Development Tools
- React Frameworks
- React Component Libraries
- React State Management and Data Fetching
- React Styling
- React Routing
- 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
- React Official Tutorial
- Using React in Visual Studio Code
- React Interview Questions & Answers
- Design patterns and Component patterns for building powerful Web Apps
- A simple, scalable, and powerful architecture for building production ready React applications
- Cheatsheets for experienced React developers getting started with…
2. React Bits
⭐ 12.3K
A collection of React patterns, techniques, tips, and tips.
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
3. React Developer Roadmap
⭐ 17.4K
An amazing road map to becoming 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…
4. React Hooks Cheat sheet
⭐ 750+
A cheatsheet for React hooks with live editable examples
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 :)
5. ReactJs Interview Questions
⭐ 23.1K
This repository contains almost every React interview question imaginable.
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.
Table of Contents
6. React in Patterns
⭐ 11.6K
A free book that talks about design patterns/techniques used while developing with
krasimir / react-in-patterns
A free book that talks 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
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
7. 30 Days Of React
⭐ 15.6K
This repository provides a step-by-step guide to learning React in 30 days. Before you begin, however, you should be familiar with HTML, CSS, and JavaScript. This repository is intended for beginners, intermediates, and advanced developers.
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
# 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 🧡🧡🧡
8. React World React Apps
⭐ 2.7K
This repository's /app
directory contains a plethora of open source real-world projects built by highly experienced React developers.
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
…9. React Coding Challenges
⭐ 2.1K
As the name implies, this repository contains a curation of various React challenges ranging in difficulty level.
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
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…
10. React TypeScript Cheatsheet
⭐ 35.8K
If you're a React developer learning TypeScript, this repository includes a variety of cheatsheets that you'll find extremely useful.
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…
Conclusion
That's it for this article.
If you found it useful, consider following me on Twitter and signing up for my weekly newsletter for more web developer content.
Top comments (1)
And if you want a profesional configuration system, I recommend wj-config.
Cheers.