Convenciones de nombres en React: Componentes, Props y Hooks
5 min de lectura
React tiene convenciones de nombres estrictas impuestas por el propio JSX — los componentes deben empezar con mayúscula.
Componentes: PascalCase
Todos los componentes de React usan PascalCase: UserProfile, ShoppingCart, NavBar. Es obligatorio — JSX trata las etiquetas en minúscula como elementos HTML.
Props: camelCase
Las props usan camelCase: userName, isLoading, onSubmit, maxRetries.
Hooks: use + PascalCase
Los hooks personalizados empiezan con use: useAuth, useFetch, useLocalStorage.
Manejadores de eventos
Props: on + Evento (onClick, onSubmit). Funciones manejadoras: handle + Evento (handleClick, handleSubmit).
Nombres de archivo
| Tipo | Convención | Ejemplo |
|---|---|---|
| Componente | PascalCase | UserProfile.tsx |
| Hook | camelCase | useAuth.ts |
| Utilidad | camelCase | formatDate.ts |
| Estilo | PascalCase | UserProfile.module.css |
| Test | Igual que la fuente | UserProfile.test.tsx |
Convertir nombres
Conversor a PascalCase para componentes, camelCase para props, o el hub.