Modern React TypeScript Patterns

# Modern React TypeScript Development

Master modern React development with TypeScript using Google Antigravity IDE. This comprehensive guide covers component patterns, hooks, and type-safe state management.

## Component Patterns
```typescript
// components/Button.tsx
import { forwardRef, ButtonHTMLAttributes, ReactNode } from "react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  loading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = "primary", size = "md", loading = false, className, ...props }, ref) => {
    // Implementation
  }
);
```

## Best Practices
- Use strict TypeScript configuration
- Apply proper generic constraints
- Create typed context with null checks
- Use discriminated unions for state