Regras do JSX: expressões, atributos e fragmentos
Use expressões JSX com { }, aplique atributos em camelCase (className, onClick) e retorne vários elementos por meio de fragmentos.
Regras do JSX: expressões, atributos e fragmentos é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 3. 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 3 aulas no total.
O que o JSX acrescenta
Objetivo: domine os conceitos básicos de JSX — use { } para expressões, aplique atributos em camelCase e agrupe elementos irmãos com fragmentos.
Expressões e atributos
Expressões ficam dentro de { } e podem ser variáveis, chamadas de função ou cálculos simples. Os atributos usam camelCase, como className, htmlFor e onClick.
Demonstração: expressões e atributos
Renderize valores dinâmicos com { } e use className/title/onClick como atributos em camelCase.
<div id="root"></div>
Fragmentos para elementos irmãos
Retorne vários elementos irmãos usando um fragmento: <>...</> ou <React.Fragment>. Os fragmentos evitam elementos div adicionais como contêineres.
Demonstração: fragmentos
Use fragmentos curtos <> para agrupar elementos irmãos; eles não renderizam nós DOM adicionais.
<div id="root"></div>
Dicas e armadilhas
Dicas:
- Apenas expressões entre { } (não instruções).
- Use className em vez de classe.
- Prefira fragmentos a elementos div contêineres desnecessários.
Regra das expressões JSX
Recapitulação
Recapitulação: coloque valores dinâmicos em { }, use atributos em camelCase e agrupe elementos irmãos com fragmentos para manter a marcação organizada.
Perguntas Frequentes
A aula “Regras do JSX: expressões, atributos e fragmentos” é grátis?
Sim — o texto completo de “Regras do JSX: expressões, atributos e fragmentos” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 3 aulas no total.
O que vou aprender em “Regras do JSX: expressões, atributos e fragmentos”?
Use expressões JSX com { }, aplique atributos em camelCase (className, onClick) e retorne vários elementos por meio de fragmentos. Você pratica React 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 React Academy?
Nenhuma experiência prévia é necessária. React 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 3.
Quanto tempo leva a aula “Regras do JSX: expressões, atributos e fragmentos”?
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 React Academy?
Sim. Cada aula de React 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
- Regras do JSX: expressões, atributos e fragmentos
- Listas e chaves; renderização condicional
- Opções de estilo: módulos CSS, estilos embutidos e auxiliares de classes