JSX: sintaxe e transpilação
Escreva JSX, entenda como o Babel o compila em chamadas React.createElement e aplique as regras: um elemento raiz, className e tags autocontidas.
JSX: sintaxe e transpilação é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é JSX?
JSX (XML de JavaScript) é uma extensão de sintaxe que permite escrever marcação semelhante a HTML dentro de JavaScript. Não é um recurso do navegador — Babel ou TypeScript o transforma em chamadas de função JavaScript antes da execução.
Transpilação de JSX
Babel transforma JSX em chamadas React.createElement(). Com a nova transformação de JSX (React 17+), não é necessário importar React — Babel injeta automaticamente as importações necessárias.
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });Regras de JSX: um elemento raiz
As expressões JSX devem ter exatamente um elemento raiz. Envolva elementos irmãos em um <div> ou utilize Fragmentos (<></> ou <React.Fragment>) para evitar a adição de nós DOM extras.
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className e htmlFor
Os atributos JSX utilizam camelCase. Como class e for são palavras reservadas de JavaScript, utilize className e htmlFor.
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>Etiquetas autocontidas
Em JSX, todas as etiquetas devem ser fechadas corretamente. Elementos sem filhos devem utilizar uma barra de autocontenção: <img />, <br />, <input />.
Expressões em JSX: {}
Incorpore qualquer expressão JavaScript em JSX usando chaves. Variáveis, chamadas de função, operadores ternários e operações aritméticas funcionam. Instruções (if, for) não funcionam.
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSX e strings
Texto adjacente e expressões JSX são concatenados automaticamente. É possível misturar texto e expressões livremente dentro de um elemento.
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>Renderizar nada: null e false
Retorne null ou false para não renderizar nada. Ambos são valores JSX válidos que não produzem saída no DOM. Isso é útil para renderização condicional.
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}Atributo style — sintaxe de objeto
Estilos embutidos em JSX utilizam um objeto, não uma string. Os nomes das propriedades estão em camelCase.
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX é JavaScript
Como JSX é compilado para JavaScript, pode colocá-lo em variáveis, retorná-lo de funções, passá-lo como propriedades e armazená-lo em matrizes. Os elementos React são objetos JavaScript simples.
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript e JSX: arquivos .tsx
Utilize a extensão .tsx para arquivos TypeScript que contêm JSX. TypeScript verifica os tipos de JSX, identificando erros de tipo de propriedades e propriedades ausentes durante a compilação.
Verificação rápida
Por que utilizamos className em vez de class em JSX?
Recapitulação: JSX
JSX é uma forma abreviada de React.createElement(). Utilize um elemento raiz ou Fragmento por expressão. Utilize className e htmlFor para atributos com palavras reservadas. Feche automaticamente todos os elementos vazios. Incorpore expressões com {}. Retorne null/false para não renderizar nada. Estilos embutidos utilizam sintaxe de objeto em camelCase. JSX é JavaScript — trate-o como um valor.
Perguntas Frequentes
A aula “JSX: sintaxe e transpilação” é grátis?
Sim — o texto completo de “JSX: sintaxe e transpilação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “JSX: sintaxe e transpilação”?
Escreva JSX, entenda como o Babel o compila em chamadas React.createElement e aplique as regras: um elemento raiz, className e tags autocontidas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “JSX: sintaxe e transpilação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- JSX: sintaxe e transpilação
- Componentes funcionais e props
- Hook useState: estado e novas renderizações
- Listas, chaves e renderização condicional