JSX vs HTML
Última atualização: 2026-11-03
JSX vs HTML JSX vs HTML
JSX parece HTML, mas algumas regras mudam: os atributos usam camelCase, class vira className, style recebe um objeto e toda tag precisa ser fechada. Conhecer essas diferenças desde o começo evita os erros de compilação que pegam a maioria dos iniciantes em React e facilita a tradução de trechos de HTML já prontos.
| Grupo | Conceitos Básicos |
|---|---|
| Tipo | Referência |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
<div className="box" style={{ fontSize: 14 }}>
// ↑ class vira className ↑ style é um objeto com chaves em camelCase
<img src="a.png" /> {/* Elementos vazios precisam ser auto-fechados */}
<label htmlFor="mail">Email</label> {/* for vira htmlFor */}
</div>Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Um cartão com borda e cantos arredondados contendo um título, um label "Email", um input com placeholder e uma linha de texto explicativo em vermelho — tudo renderizado com atributos camelCase do JSX e um style como objeto.💡 Pontos-chave
⚠️ Aviso Escrever class quebra a compilação na hora — é preciso usar className; style={{}} é um literal de objeto, daí as chaves duplas.
💡 Dica Elementos vazios como img, br e input precisam ser auto-fechados em JSX: <img />, caso contrário o build falha.
ℹ️ Informação Os demais atributos quase só mudam para camelCase: onclick → onClick, tabindex → tabIndex. A semântica não muda.
🏷️ Mais Conceitos Básicos
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Por que o JSX usa className em vez de class?
R Porque o JSX faz parte do JavaScript e class é uma palavra reservada da linguagem; por isso o React escolheu className, para ficar igual a element.className na API do DOM.
P Como escrevo style em JSX?
R style recebe um objeto, não uma string: style={{ fontSize: 14, color: 'red' }}. As chaves usam camelCase e os números são tratados automaticamente como pixels.
P Tags JSX podem ficar sem fechamento?
R Não. O fechamento estrito no estilo XML é uma regra do JSX — <img>, <br> e <input> precisam ser escritos na forma auto-fechada.
