react_componentlisted
Install: claude install-skill feralbureau/luminy
# react_component
React components are the building blocks of the frontend. This skill covers patterns for writing components that are readable, composable, testable, and performant.
## Component Design Principles
### 1. Single Responsibility
Each component does one thing. If a component is doing data fetching AND rendering AND form validation, split it.
### 2. Separate Concerns: Container vs. Presentational
- **Container (Smart) components**: Handle data fetching, state, side effects. Return presentational components.
- **Presentational (Dumb) components**: Pure UI. Accept props, render JSX. Easy to test, easy to reuse.
```tsx
// Container — handles data
function OrderListContainer() {
const { orders, isLoading, error } = useOrders();
if (isLoading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return <OrderList orders={orders} />;
}
// Presentational — pure UI
function OrderList({ orders }: { orders: Order[] }) {
return (
<ul>
{orders.map(order => (
<OrderItem key={order.id} order={order} />
))}
</ul>
);
}
```
### 3. Props Interface First
Define the TypeScript interface for props before writing the component body. It forces you to think about the API.
```tsx
interface ButtonProps {
label: string;
onClick: () => void;
variant?: 'primary' | 'secondary' | 'danger';
disabled?: boolean;
isLoading?: boolean;
}
export function Button({
label,
onClick,
variant = 'primary',
disabled = false,