Componentes e JSX
Componentes funcionais e sintaxe JSX
React é uma biblioteca JavaScript para construir interfaces de usuário baseada em componentes. Um componente é uma função JavaScript que recebe props e retorna JSX — uma extensão de sintaxe que parece HTML mas é transpilada para chamadas JavaScript.
O Virtual DOM é o diferencial do React: ao invés de manipular o DOM real diretamente (que é lento), o React mantém uma cópia em memória. Quando o estado muda, ele compara o Virtual DOM novo com o antigo (reconciliation/diffing) e aplica apenas as mudanças mínimas necessárias no DOM real.
Componentes funcionais são funções comuns: recebem um objeto props como parâmetro e retornam JSX. Todo componente deve começar com letra maiúscula para o React diferenciá-lo de tags HTML nativas. Em JSX, atributos seguem camelCase (className ao invés de class, onClick ao invés de onclick) e expressões JavaScript ficam entre {}.
// ── Componente funcional simples ─────────────────
function Saudacao({ nome, cargo }) {
const hora = new Date().getHours();
const periodo = hora < 12 ? "Bom dia" : hora < 18 ? "Boa tarde" : "Boa noite";
return (
<div className="card">
<h1>{periodo}, {nome}!</h1>
{cargo && <p className="cargo">{cargo}</p>}
</div>
);
}
// ── JSX: regras importantes ───────────────────────
function Exemplo() {
const lista = ["React", "Vue", "Angular"];
const ativo = true;
return (
// Um único elemento raiz (ou Fragment)
<>
{/* Comentários em JSX ficam aqui */}
<h1 className="titulo">Olá</h1> {/* class → className */}
{/* Expressões JS entre {} */}
<p>{2 + 2} itens</p>
{/* Condicional com && */}
{ativo && <span>Ativo</span>}
{/* Ternário */}
{ativo ? <span>Online</span> : <span>Offline</span>}
{/* Listas precisam de key */}
<ul>
{lista.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</>
);
}A prop key em listas é obrigatória e deve ser única e estável — use o ID do dado, não o índice do array. Usar index como key causa bugs de re-renderização quando a lista é reordenada ou filtrada.