Guia Prático para Nomear Componentes React

1. Seja Descritivo e Específico

O nome de um componente deve comunicar claramente sua função. Evite nomes genéricos como "Card" ou "Modal". Prefira nomes específicos que descrevam o propósito: "ProductCard", "CheckoutModal", "UserProfileHeader".

Essa especificidade facilita a navegação no código e reduz a ambiguidade. Quando um desenvolvedor procura por um componente, ele saberá exatamente o que está buscando.

Exemplos práticos:

// ❌ Evite
<Button />
<Card />
<List />

// ✅ Prefira
<SubmitButton />
<ProductCard />
<NavigationList />

2. Use Convenções Consistentes

Estabeleça e siga padrões de nomenclatura em todo o projeto. Se você usa sufixos para indicar o tipo de componente (Container, View, Item), mantenha essa convenção consistentemente.

Algumas convenções úteis:

• Container: Componentes que gerenciam estado e lógica
• View: Componentes de apresentação pura
• List/Item: Para componentes de lista e seus itens
• Layout: Para componentes de estrutura de página

Estrutura recomendada:

// Containers (lógica de negócio)
UserProfileContainer.jsx
ShoppingCartContainer.jsx

// Views (apresentação)
UserProfileView.jsx
ProductCardView.jsx

// Layouts
DashboardLayout.jsx
AuthLayout.jsx

3. Agrupe por Funcionalidade

Organize seus componentes em pastas que refletem suas funcionalidades. Isso cria uma hierarquia clara e facilita a manutenção do código.

components/
├── common/
│   ├── Button/
│   ├── Input/
│   └── Modal/
├── features/
│   ├── auth/
│   │   ├── LoginForm/
│   │   └── RegisterForm/
│   └── products/
│       ├── ProductCard/
│       └── ProductList/
└── layouts/
    ├── MainLayout/
    └── AdminLayout/

Dicas Bônus

Use PascalCase

Sempre use PascalCase para componentes React. Isso os diferencia de elementos HTML nativos e outras variáveis.

Evite Abreviações

UserAuthenticationForm é melhor que UserAuthForm ou UAF. A clareza vale mais que a brevidade.

Componha Nomes Logicamente

Comece com o contexto mais geral e vá para o mais específico:

• ProductListItem (não ItemProductList)
• UserProfileAvatar (não AvatarUserProfile)

Conclusão

Nomear componentes pode parecer trivial, mas é uma das decisões mais importantes para a manutenibilidade do código. Invista tempo pensando em nomes claros e descritivos - seu time (e seu eu futuro) agradecerão.