As developers, we often find ourselves looking up the same commands and syntax repeatedly. Having quick reference guides—cheatsheets—can significantly boost productivity and reduce context switching. This comprehensive guide covers essential cheatsheets for Git, JavaScript, React, CSS, and other tools that every developer should have bookmarked.

Why Cheatsheets Matter

Cheatsheets serve as quick reference guides that help you work faster without interrupting your flow. Instead of searching through documentation or Stack Overflow, a well-organized cheatsheet gives you instant access to the information you need. They're especially valuable for commands and patterns you use regularly but don't memorize.

Git Cheatsheet: Essential Version Control Commands

Git is the foundation of modern version control. Mastering these commands will make your development workflow much smoother.

Basic Git Commands

These are the commands you'll use daily:

git status - Check repository status and see which files have changed
git add . - Stage all changes in the current directory
git add <file> - Stage a specific file
git commit -m "message" - Commit changes with a message
git commit -am "message" - Stage and commit all tracked files
git push origin main - Push commits to remote repository
git pull - Pull latest changes from remote
git fetch - Download changes without merging

Branch Management

Branches are essential for organizing your work:

git branch - List all local branches
git branch -a - List all branches (local and remote)
git checkout -b feature-name - Create and switch to a new branch
git checkout branch-name - Switch to an existing branch
git branch -d branch-name - Delete a local branch
git merge branch-name - Merge a branch into the current branch

Advanced Git Commands

For more complex scenarios:

git stash - Temporarily save uncommitted changes
git stash pop - Apply stashed changes
git log - View commit history
git log --oneline - Compact commit history
git diff - See changes between commits
git reset --soft HEAD~1 - Undo last commit, keep changes staged
git revert HEAD - Create a new commit that undoes changes

JavaScript Essentials: Modern Syntax and Patterns

JavaScript has evolved significantly. Here are the modern patterns and syntax you should know.

Array Methods

These methods are essential for data manipulation:

map() - Transform each element: arr.map(x => x * 2)
filter() - Select elements: arr.filter(x => x > 0)
reduce() - Accumulate values: arr.reduce((acc, x) => acc + x, 0)
forEach() - Execute function for each element
find() - Find first matching element
some() - Check if any element matches condition
every() - Check if all elements match condition
includes() - Check if array contains value

Object and Array Destructuring

Destructuring makes code cleaner and more readable:

const { prop, other } = obj - Object destructuring
const [first, second] = array - Array destructuring
const { prop: alias } = obj - Destructuring with renaming
const { prop = defaultValue } = obj - Destructuring with default values

Spread and Rest Operators

Powerful operators for working with arrays and objects:

[...array] - Spread array elements
{...obj} - Spread object properties
[...array1, ...array2] - Combine arrays
{...obj1, ...obj2} - Merge objects
function(...args) - Rest parameters

Template Literals

Modern string interpolation:

`Hello ${name}` - Basic interpolation
`Multi-line string` - Multi-line strings
`Value: ${value.toFixed(2)}` - Expression evaluation

Arrow Functions

Concise function syntax:

const fn = () => {} - Basic arrow function
const fn = x => x * 2 - Single parameter, implicit return
const fn = (x, y) => x + y - Multiple parameters

Async/Await

Modern asynchronous programming:

async function fn() {} - Async function declaration
const result = await promise - Await promise resolution
try/catch - Error handling with async/await

React Quick Reference: Components and Hooks

React's component model and hooks are fundamental to modern React development.

Component Structure

Basic functional component pattern:

function Component(props) { return JSX } - Function component
const Component = (props) => JSX - Arrow function component
export default Component - Default export
export { Component } - Named export

Essential React Hooks

Hooks are the foundation of modern React:

useState(initialValue) - State management
useEffect(() => {}, [deps]) - Side effects and lifecycle
useContext(Context) - Access React Context
useRef(initialValue) - Mutable reference
useMemo(() => value, [deps]) - Memoize expensive calculations
useCallback(() => {}, [deps]) - Memoize functions
useReducer(reducer, initialState) - Complex state logic

Common React Patterns

Patterns you'll use frequently:

props.children - Access child elements
key={id} - List item keys
onClick={handleClick} - Event handlers
className="..." - CSS classes (not class)
style={{ prop: value }} - Inline styles

CSS Flexbox & Grid: Modern Layout Systems

Flexbox and Grid are powerful tools for creating responsive layouts.

Flexbox Properties

Flexbox is perfect for one-dimensional layouts:

display: flex - Enable flexbox
flex-direction: row | column - Main axis direction
justify-content: center | space-between | space-around - Main axis alignment
align-items: center | stretch | flex-start - Cross axis alignment
flex-wrap: wrap - Allow items to wrap
gap: 1rem - Space between items
flex: 1 - Grow to fill available space

CSS Grid Properties

Grid excels at two-dimensional layouts:

display: grid - Enable grid
grid-template-columns: repeat(3, 1fr) - Define columns
grid-template-rows: auto - Define rows
grid-gap: 1rem - Gap between grid items
grid-column: span 2 - Span multiple columns
grid-row: span 2 - Span multiple rows
grid-area: name - Named grid area

TypeScript Quick Reference

TypeScript adds type safety to JavaScript:

const x: string = "hello" - Type annotation
interface User { name: string } - Interface definition
type Status = 'active' | 'inactive' - Union types
const fn = (x: number): number => x * 2 - Function types
const arr: number[] = [1, 2, 3] - Array types
const obj: { prop: string } = { prop: "value" } - Object types

npm/yarn Commands

Package management essentials:

npm install package - Install package
npm install -D package - Install dev dependency
npm uninstall package - Remove package
npm run script - Run npm script
npm update - Update packages
yarn add package - Yarn install
yarn remove package - Yarn uninstall

Creating Your Own Cheatsheet

While this guide covers common patterns, consider creating your own personalized cheatsheet:

Document commands you use frequently
Include project-specific patterns
Add notes and examples
Keep it updated as you learn new things
Share it with your team

Conclusion

Cheatsheets are invaluable tools that save time and improve productivity. Keep this reference handy, bookmark it, and consider creating your own personalized version with commands and patterns specific to your workflow. The goal isn't to memorize everything, but to have quick access to the information you need when you need it.