A melhor forma de criar Componentes no React

Paulo Clemente -

Texto de Paulo Clemente
Desenvolvedor e redator de mídias sociais na Rocketseat

Em React, a composição é uma técnica fundamental que permite aos desenvolvedores construir interfaces de usuário complexas a partir de componentes menores e reutilizáveis. Este artigo explora como criar um componente de notificação flexível e reutilizável usando o padrão de composição.

Oferta especial NLW | Rocketseat
Do zero ao avançado, tenha acesso imediato a todas as formações da Rocketseat em uma única plataforma para você aprender na prática as tecnologias mais demandadas do mercado.
Rocketseat

Componente de Notificação: Um Exemplo de Composição

O componente de notificação que estamos construindo é composto por quatro partes distintas: NotificationRoot, NotificationIcon, NotificationContent e NotificationActions. Cada uma dessas partes é responsável por uma funcionalidade específica dentro do componente de notificação.

NotificationRoot: A Base do Componente

O NotificationRoot atua como o contêiner principal para o componente de notificação. Ele define o layout geral e o estilo, servindo como a fundação para os outros subcomponentes.

NotificationIcon: A parte visual

NotificationIcon é um subcomponente que recebe um ícone como propriedade. Este ícone é o elemento visual que ajuda os usuários a identificar rapidamente o tipo de notificação.

NotificationContent: A parte do texto

O NotificationContent é onde o texto da notificação é apresentado. Este subcomponente é projetado para ser altamente flexível, permitindo que os desenvolvedores passem qualquer texto desejado.

NotificationActions: A parte da interação

Por fim, NotificationActions fornece as opções de ação para o usuário, como botões para fechar ou responder à notificação.

Exportando todos componentes relacionados como um objeto módulo

Exportação Agrupada: Aqui esses componentes são agregados em um objeto chamado Notification que é exportado.

Oferta especial NLW | Rocketseat
Do zero ao avançado, tenha acesso imediato a todas as formações da Rocketseat em uma única plataforma para você aprender na prática as tecnologias mais demandadas do mercado.
Rocketseat

Cada componente é mapeado a uma propriedade dentro desse objeto, o que permite que sejam importados e usados de forma desestruturada em outros lugares do aplicativo.

Utilizando o Componente de Notificação

A composição desses subcomponentes em um componente de notificação único é feita da seguinte maneira:

Benefícios da Composição

Utilizando o padrão de composição para construir o componente de notificação, alcançamos várias vantagens:

  • Modularidade: Cada parte do componente de notificação pode ser desenvolvida, testada e mantida independentemente.
  • Flexibilidade: É fácil adicionar, remover ou alterar subcomponentes sem afetar o restante do componente.
  • Reusabilidade: Subcomponentes como NotificationIcon ou NotificationContent podem ser reutilizados em diferentes partes da aplicação.

O padrão de composição é uma prática poderosa no React que nos permite construir componentes complexos e flexíveis, como o componente de notificação discutido aqui. Através da decomposição de um componente em partes menores, conseguimos uma arquitetura de código mais clara, facilitando o desenvolvimento e a manutenção a longo prazo. A composição demonstra ser uma abordagem eficaz para responder às necessidades de desenvolvimento de UIs modernas em React.

Nesse vídeo o Diego Fernandes mostra na prática todo o processo de aplicação desse padrão: