Practice is the key to mastery in any skill or field of knowledge. You don’t learn things in a day. You need weeks, months, and sometimes even years of consistent practice to be good at something. React, in general, is also vast and it takes time to learn it well. So instead of weeping in front of the mirror when you forget concepts or syntax, look out for the solutions. I am assuming here that you have at least a basic familiarity with React, because if you don’t, I have another gift for you, open it here. OK, so looks like you already have some experience with React, but the concepts and syntax are escaping your memory. In that case, the following are the 9 great cheatsheets that could potentially help you in your journey: Note: Cheatsheets are helpful not only to beginner devs but also to experienced ones. Programming is about finding solutions not memorizing syntax, so the more familiar you are with the basics, the more it helps.
1. Developer Cheatsheet
Developer Cheatsheets is a web development cheatsheet website by Leon Gilyadov. This minimally designed website contains cheatsheets on: History of web dev
React React Router Redux ES6
This React cheatsheet doesn’t have much depth but it does provide surface-level content good enough to skim the snippets and syntax. Check it out to quickly catch up with the syntax when in hurry. As of April 2022, this cheatsheet has syntax for (counting only functional components):
Create React App Stateless component Props in stateless component Children useRef Hook useState Hook Higher-Order Component Render Props
2. DevHints
Devhint.io is another website full of cheatsheets for various technologies. DevHint’s React cheatsheet contains more content than Developer Cheatsheets. However, most of its content is based on class components which you probably won’t need unless working on a legacy codebase. Still, this cheatsheet contains some useful snippets from the world of functional components. These are the declaration of functional component, declaration and examples of useState hook, useEffect hook, and most importantly how to create a custom hook.
3. Reed Barger
This cheatsheet is a freecodecamp article by Reed Barger. It’s one of my favorites and the best React cheatsheet for beginners. It was published in February 2022, so it’s also the most recent among other cheatsheets mentioned in this article. The good part of this cheatsheet is that it’s not a syntax-only cheatsheet but it also gives you the context behind the syntax and teaches you a little about those concepts. So if you are at the beginner level, this will be useful. This cheatsheet contains content on the very basics like React Elements, attributes, styles, fragments, components, props, etc to various hooks like useState, useEffect, useRef, useContext, useCallback, and useMemo. The content is well written, beginner-friendly, and has enough depth to hold you here for most of the problems. Personally, I don’t think there’s any reason for this website to not to be in your bookmarks.
4. Eric The Coder
This cheatsheet is a dev.to article by Eric The Coder. He wrote this article in June 2021 as a memory aid when he forgets React concepts and syntax. The content in this cheatsheet is not very deep but it does contain a lot of very basic things which other cheatsheets might have missed. This includes basic JSX rules, JavaScript in JSX, List with key, various click events details, etc. When it comes to hook, this cheatsheet includes useState, useEffect, and useRef. Eric created this cheatsheet when he was a beginner in React. So even the very basic things are properly documented and emphasized (which other cheatsheets miss to some extent).
5. SheCodes
Shecodes’ React Cheatsheet is a syntax-only, fully functional component-based cheatsheet. You can check out all the snippets at once or filter them category-wise. There is no explanation given with the snippets so you can use it to only have a quick look at the various syntax. The content is similar to other websites and is easily and quickly accessible, making it a great cheatsheet for quick reference of syntax.
6. React TypeScript
Finally, we have something amazing for our TypeScript developers. React Typescript is an MIT licensed open source cheatsheet project with more than 33K stars on GitHub and lots of awesome contributors to keep the project alive and quality high. If you love working in React and TypeScript, you’ll surely love this cheatsheet too. You can access the content on their website or GitHub README. The whole cheatsheet is divided into 4 parts:
Basic – Focused on helping React devs just start using TS in React apps. Advanced – Shows and explains advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React libraries. Migrating – Helps collate advice for incrementally migrating large codebases from JS or Flow, from people who’ve done it. HOC – Compiles all available knowledge for writing Higher Order Components with React and TypeScript.
The quality of the whole project is top notch, necessary explanations are given wherever necessary and, above all, this cheatsheet is actively maintained and updated by the community.
7. Codingcheats.io
This is another only functional component-based great React cheatsheet. Although not excellent in design, this cheatsheet does have excellent content. All the snippets are available on the homepage with a little explanation of each. Content includes basic component syntax, shorthands, event handling, and 6 different hooks – useState, useEffect, useRef, useMemo, useReducer. useCallback. Proper examples are given in each snippet with a short explanation of each. You should definitely check out this cheatsheet at least once.
8. Ohans Emmanuel
This cheatsheet is LogRocket’s article by Ohans Emmanuel. Unlike other cheatsheets on our list, this one doesn’t focus on the basics of React. It’s a React Hooks cheatsheet that only deals with explaining React Hooks. It contains syntax, how hooks work, and the best practices to keep in mind when working with Hooks in React. Everything is explained with examples and the content is very well written. Following Hooks are included in the cheatsheet:
useState useEffect useContext useLayoutEffect useReducer useCallback useMemo useRef
As a modern React developer, knowledge of Hooks is essential and this cheatsheet will help you deeply understand their core and how to use them in your daily life. Learning React is not a one-day task. It will take time but being consistent, investing in your knowledge, and being smart by using cheatsheets will help you stay in the game for the long run. I wish you good luck on your journey. If you have any questions, ping me on Twitter. Check out my blog for more. Happy Coding!
