Frontend Developer Cheat Sheet

Frontend Developer Cheat Sheet

Build tools, frameworks, and debugging for frontend development.

Quick Reference

# Development
npm run dev

# Production build
npm run build && npm run preview

# Type check
npx tsc --noEmit

# Fix lint issues
npm run lint -- --fix

Package Management

npm

# Install dependencies
npm install
npm install package-name
npm install -D package-name  # dev dependency

# Scripts
npm run dev
npm run build
npm test

# Update packages
npm outdated
npm update
npx npm-check-updates -u

# Clean install
rm -rf node_modules package-lock.json
npm install

pnpm/yarn

# pnpm (faster, disk efficient)
pnpm install
pnpm add package-name
pnpm run dev

# yarn
yarn
yarn add package-name
yarn dev

React Patterns

Hooks

// State
const [count, setCount] = useState(0);

// Effect
useEffect(() => {
  fetchData();
  return () => cleanup();
}, [dependency]);

// Memo
const expensive = useMemo(() => compute(data), [data]);

// Callback
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

// Ref
const inputRef = useRef<HTMLInputElement>(null);

// Context
const value = useContext(MyContext);

Component Patterns

// Props with children
interface Props {
  title: string;
  children: React.ReactNode;
}

// Event handlers
<button onClick={(e) => handleClick(e)}>

// Conditional rendering
{isLoading ? <Spinner /> : <Content />}
{items.length > 0 && <List items={items} />}

// List rendering
{items.map(item => (
  <Item key={item.id} {...item} />
))}

TypeScript

Common Types

// Basic types
const name: string = "John";
const age: number = 30;
const active: boolean = true;

// Arrays
const items: string[] = [];
const numbers: Array<number> = [];

// Objects
interface User {
  id: number;
  name: string;
  email?: string;  // optional
}

// Functions
function greet(name: string): string {
  return `Hello, ${name}`;
}

// Generics
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

Utility Types

Partial<User>      // All properties optional
Required<User>     // All properties required
Pick<User, 'id'>   // Only selected properties
Omit<User, 'id'>   // Exclude properties
Record<string, T>  // Object with string keys

CSS/Tailwind

Flexbox

.container {
  display: flex;
  justify-content: center;  /* main axis */
  align-items: center;      /* cross axis */
  gap: 1rem;
}

Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Tailwind Common Classes

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">

<!-- Responsive -->
<div class="w-full md:w-1/2 lg:w-1/3">

<!-- States -->
<button class="hover:bg-blue-600 focus:ring-2 disabled:opacity-50">

Debugging

Browser DevTools

// Console
console.log('value:', value);
console.table(arrayOfObjects);
console.time('operation'); /* code */ console.timeEnd('operation');

// Debugger
debugger;  // Breakpoint in code

// Performance
performance.mark('start');
// ... code ...
performance.mark('end');
performance.measure('operation', 'start', 'end');

React DevTools

- Components tab: Inspect component tree
- Profiler tab: Performance analysis
- Highlight updates: See re-renders

Build Tools

Vite

# Create project
npm create vite@latest my-app -- --template react-ts

# Dev server
npm run dev

# Build
npm run build
npm run preview

Environment Variables

# .env.local
VITE_API_URL=http://localhost:8000

# Access in code
const apiUrl = import.meta.env.VITE_API_URL;

Testing

# Run tests
npm test
npm test -- --watch
npm test -- --coverage

# Specific file
npm test -- src/components/Button.test.tsx