[Dúvida] />

Oi, Felipe, tudo bem?

As tags em React são fechadas diretamente como em <exemplo />por conta da sintaxe do JSX, que é uma extensão de sintaxe do JavaScript usada em React. Essa tag é conhecida como "elemento auto-fechado", por não requerer fechamento, já que não possui um elemento interno e foi adotada para tornar o código mais conciso e legível, evitando a duplicação desnecessária de tags de abertura e fechamento quando não há conteúdo entre elas.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Olá Felipe!

No React, usamos tags auto-fechadas (como <exemplo />) para componentes sem filhos. Isso é chamado de JSX, e é uma extensão de sintaxe para JavaScript.

Usamos tags auto-fechadas em vez de <exemplo></exemplo> por alguns motivos:

1. Simplicidade - É mais simples ter uma tag de abertura e fechamento na mesma linha.

2. Prevenção de erros - Com tags auto-fechadas, você não pode esquecer de adicionar uma tag de fechamento.

3. Compilação para React.createElement() - JSX é compilado para chamadas React.createElement(). Usar compila para React.createElement('exemplo'), enquanto <exemplo></exemplo> compila para React.createElement('exemplo'), null, null. Isso é um pouco mais limpo.

4. Convenção - A convenção em React é usar tags auto-fechadas para componentes sem filhos, então parece mais "Reacty" do que <exemplo></exemplo>.

Em HTML, você deve sempre usar tags de abertura e fechamento (<div></div>), porque HTML não suporta JSX ou a compilação para React.createElement().

Então, resumindo, usamos tags auto-fechadas em JSX (como no React) por conveniência e para seguir as convenções, mas em HTML puro, sempre usamos tags de abertura e fechamento.