Tem alguma explicação do porquê fechar os componentes dessa forma? Pois no HTML convencional, utilizamos </tag>
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!
Tem alguma explicação do porquê fechar os componentes dessa forma? Pois no HTML convencional, utilizamos </tag>
Salve, Gabriel!
Em JSX, a sintaxe <Banner /> é chamada de "tag de fechamento automático" ou "tag vazia". Quando o compilador Babel (ou outro compilador JSX) encontra uma tag de fechamento automático, ele a converte em uma chamada para o componente React correspondente.
A principal vantagem de usar a sintaxe de tag de fechamento automático é que ela torna o código JSX mais conciso e legível. Em vez de ter que escrever duas tags separadas (uma de abertura e outra de fechamento), podemos simplesmente usar uma única tag vazia para representar o componente.
A alternativa seria escrever:
<Banner></Banner>
Em HTML é um pouco diferente, por exemplo:
A tag é uma tag de "auto-fechamento", o que significa que ela não precisa de uma tag de fechamento separada. O uso da barra invertida () é comum em XHTML, mas não é necessário na versão 5 do HTML.