JSX Sintaxe JSX

Última atualização: 2026-11-03

JSX Sintaxe JSX

JSX é uma extensão de sintaxe do JavaScript que permite escrever a marcação da interface diretamente dentro de um arquivo JS. Ela é compilada em chamadas de função comuns, que descrevem como a tela deve ficar para o estado atual. Todo componente React renderiza por meio de JSX, então dominar a sintaxe é o primeiro passo para escrever componentes que continuem legíveis conforme a complexidade cresce.

ℹ️ 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

const el = <h1 className="title">Hello, {name}</h1>
//         ↑ tag     ↑ prop camelCase       ↑ qualquer expressão JS dentro de {}

Retorna：Sem valor de retorno — JSX é uma convenção e um modelo mental: depois da compilação, é uma expressão JS comum cujo valor descreve a interface.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

A página mostra o título "Hello, React Learner!", uma linha com "Role: Admin" e um campo de texto; digitar no campo atualiza o nome no título em tempo real.

💡 Pontos-chave

🏷️ Mais Conceitos Básicos

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós