Pq as tags em se tratando de React são fechadas diretamente assim<exemplo /> ? Em HTML ou js geralmente seria <exemplo></exemplo>.
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.