Frameworks
React Cheat Sheet
Print-ready cheat sheet for React, organized for fast lookup, study, and desk-side use
Sample
What's in this cheat sheet
- JSX Basics
- Components
- State (useState)
- Effects (useEffect)
- Lists & Keys
- Event Handling
- Conditional Rendering
- Hooks
- Custom Hooks
- Context API
Expressions & Attributes
const name = "Alice";
const el = <h1>Hello, {name}!</h1>;
const img = <img src={url} alt="photo" />;
JSX Rules
{expression} | Embed any JS expression |
className | Use instead of `class` |
htmlFor | Use instead of `for` |
style={{color: 'red'}} | Inline styles as object |
<Component /> | Self-closing tags required |
<> ... </> | Fragment (no extra DOM node) |
Download the full cheat sheet for all sections, formatted for print
Download PDFDownloads
Choose the treatment that matches how you read
-
Recommended
Standard
B&W, ink-efficient. The default for laser printers and photocopies
Best for Printouts and desk-side reference
-
Color
Warm color accents for on-screen reading or color printers
Best for Screen reading or color printers
-
Reference Card
Maximum density, 4-column layout. Everything on one page
Best for Fast scanning and minimum paper use
