Cheatsheets for Git, JavaScript, and More: A Developer's Companion

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.