Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] tag simples no react

por Allan gomes medeiros
| 49.4k xp | 7 posts
      <div>
        <Typography variant="h1">FALA VINNY!</Typography>
        <Typography variant="P">Veja como estão suas finanças hoje.</Typography>
      </div>

No react quando se tem um componente simples, que serve apenas para agrupar, como essa div, pode deixar como realmente um tag ou é recomendado/boa prática deixá-la sempre que possivel , como um componente reutilizável? Colocando apenas children dentro dele?

Até o momento do curso o Vinny deixa como uma tag mesmo, não sei se mais pra frente ele irá mudar

1 resposta
por Lorena Garcia
| 15405.6k xp | 23297 posts
Instrutor

Oi Allan, como vai?

A div pode continuar como uma tag comum sem problema. Em React, nem todo agrupamento precisa virar componente reutilizável. Vale criar um componente quando aquele bloco começa a repetir estrutura, estilo, comportamento ou significado em várias partes da aplicação.

Se ele só está agrupando o Typography do título e do texto naquele ponto específico da tela, manter como div é uma escolha simples e adequada. Quando não precisar de uma tag HTML real no DOM, outra opção é usar Fragment, assim:

<>
  FALA VINNY!
  Veja como estão suas finanças hoje.
</>

Um detalhe: se o variant representar uma tag HTML, o mais comum é usar "p" em minúsculo, já que a tag de parágrafo no HTML é p. Então, no seu exemplo, a div está tranquila; ela só viraria um componente, como Header, IntroSection ou algo parecido, se esse agrupamento passasse a ter um papel mais claro e reutilizável na interface.

Faz sentido pensar nesse bloco como algo específico dessa tela ou você quer ir além e imagina reutilizá-lo em outras partes do projeto?

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA