📖
Core

JSX

Sintaxe que parece HTML mas compila para React.createElement().

📚 O que é

Transpilado pelo Babel/SWC para React.createElement(type, props, ...children). Expressões JS via {}. Atributos em camelCase (className, onClick). Auto-escape de { variavel } previne XSS.

✅ Quando usar

Em todo componente React — é o padrão de fato. Mais legível que createElement manual.

🚫 Quando NÃO usar

Ambientes sem transpilação. Código gerado programaticamente (aí createElement pode ser mais limpo).

👍 Prós
Legível — parece HTML
Auto-escape previne XSS
IntelliSense/TypeScript funciona bem
Suporte massivo em tooling
👎 Contras
Precisa de transpilação (Babel/SWC)
Pode confundir iniciantes (parece HTML mas não é)
Regras: sempre um root, className em vez de class
🔗 Termos relacionados
Virtual DOM
Core

Representação em JS da árvore do DOM real. React compara versões e aplica só as diferenças.

Reconciliation
Core

Algoritmo que compara dois Virtual DOMs e calcula o mínimo de mudanças para o DOM real.

Fiber
Core

Arquitetura interna do React 16+ que permite renderização interrompível e priorização.

Suspense
Core

Componente que mostra fallback enquanto filhos 'suspendem' (lançam Promise não resolvida).

Error Boundary
Core

Componente class que captura erros em filhos. Mostra UI de fallback em vez de quebrar o app.

Hydration
Core

Processo de attachar event listeners do React ao HTML pré-gerado pelo servidor.