[Dúvida] Por que devemos fechar os componentes dessa forma?

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.