Pq as tags em se tratando de React são fechadas diretamente assim<exemplo /> ? Em HTML ou js geralmente seria <exemplo></exemplo>.
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!
Pq as tags em se tratando de React são fechadas diretamente assim<exemplo /> ? Em HTML ou js geralmente seria <exemplo></exemplo>.
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:
Simplicidade - É mais simples ter uma tag de abertura e fechamento na mesma linha.
Prevenção de erros - Com tags auto-fechadas, você não pode esquecer de adicionar uma tag de fechamento.
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.
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.