Convenções de nomes em React: Componentes, Props e Hooks
5 min de leitura
O React tem convenções de nomes rígidas impostas pelo próprio JSX — os componentes devem começar com letra maiúscula.
Componentes: PascalCase
Todos os componentes React usam PascalCase: UserProfile, ShoppingCart, NavBar. É obrigatório — o JSX trata tags em minúsculas como elementos HTML.
Props: camelCase
As props usam camelCase: userName, isLoading, onSubmit, maxRetries.
Hooks: use + PascalCase
Hooks personalizados começam com use: useAuth, useFetch, useLocalStorage.
Manipuladores de eventos
Props: on + Evento (onClick, onSubmit). Funções manipuladoras: handle + Evento (handleClick, handleSubmit).
Nomes de arquivo
| Tipo | Convenção | Exemplo |
|---|---|---|
| Componente | PascalCase | UserProfile.tsx |
| Hook | camelCase | useAuth.ts |
| Utilitário | camelCase | formatDate.ts |
| Estilo | PascalCase | UserProfile.module.css |
| Teste | Igual à fonte | UserProfile.test.tsx |
Converter nomes
Conversor para PascalCase para componentes, camelCase para props, ou o hub.