React TypeScript Development
Core Patterns
Component Structure
import { type FC, type ReactNode } from 'react';
interface ComponentProps {
children?: ReactNode;
variant?: 'primary' | 'secondary';
disabled?: boolean;
onClick?: () => void;
}
export const Component: FC<ComponentProps> = ({
children,
variant = 'primary',
disabled = false,
onClick,
}) => {
return (
<div
className={`component component--${variant}`}
data-disabled={disabled}
onClick={disabled ? undefined : onClick}
>
{children}
</div>
);
};
Typing Guidelines
| Pattern | Use |
|---|
FC<Props> | Standard functional components |
ReactNode | Children, any renderable content |
ComponentPropsWithoutRef<'button'> | Extend native HTML element props |
forwardRef<HTMLDivElement, Props> | Components needing ref forwarding |
Event Handler Types
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
Custom Hooks Pattern
import { useState, useCallback } from 'react';
interface UseToggleReturn {
value: boolean;
toggle: () => void;
setTrue: () => void;
setFalse: () => void;
}
export const useToggle = (initialValue = false): UseToggleReturn => {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => setValue(v => !v), []);
const setTrue = useCallback(() => setValue(true), []);
const setFalse = useCallback(() => setValue(false), []);
return { value, toggle, setTrue, setFalse };
};
Context Pattern
import { createContext, useContext, type FC, type ReactNode } from 'react';
interface ThemeContextValue {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextValue | null>(null);
export const useTheme = (): ThemeContextValue => {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme must be used within ThemeProvider');
return context;
};
File Naming
ComponentName/
├── ComponentName.tsx # Implementation
├── ComponentName.types.ts # Types (optional)
├── ComponentName.stories.tsx # Storybook
├── index.ts # Exports
Best Practices
- Explicit return types for public functions
- Discriminated unions for complex state
as const for literal types- Generic components for reusable patterns
- Handle undefined explicitly
Integration
- Atomic Design: See atomic-design skill for hierarchy
- CSS Tokens: See css-tokens skill for styling
- Storybook: See storybook skill for docs
