A Linguagem Utilizada No Framework React Native É A Jsx

o compilador rejeita na hora. É preciso converter para uma expressão: {(() => { let data = new Date(); return {data.toDateString()}; })()} Eu perdi cerca de quarenta minutos num projeto real tentando entender por que um condicional renderizado de forma aninhada falhava silenciosamente em dispositivos Android. O problema era um operador ternário mal fechado dentro de uma prop de estilo que eu havia passado diretamente no JSX: style={{ margin: condicao ? 10 : 0, padding: outraCondicao ? 20 : 5 }}. O linter não sinalizava erro, o bundle compilava, mas no device o layout simplesmente não atualizava quando as condições mudavam. A solução foi extrair o cálculo de estilos para uma função separada chamada useMemo, que garantia recalculação correta sempre que as dependências variavam. Tempo economizado a partir daí: uns quinze minutos de debugging em vez de horas.

O outro ponto que pouca gente enfatiza é performance. JSX não é gratuito. Cada atualização de componente gera uma árvore virtual, e na prática do React Native isso pode se tornar caro se você não segmentar seus componentes direito. Já vi projetos onde um único componente pai com trinta filhos JSX era reconstruído inteiramente a cada mudança de estado, mesmo quando apenas um filho tinha cambiado. A correção foi quebrar aqueles filhos em componentes autônomos com React.memo ou useMemo onde fazia sentido, reduzindo o tempo de renderização da tela em cerca de dois terços num projeto que eu mantive no ano passado. Existem trade-offs que vale a pena conhecer antes de entrar de cabeça. JSX no React Native tem suporte limitado para acessibilidade em comparação com HTML semântico. Tags como nav ou article não têm equivalentes nativos diretos, então você precisa mapear manualmente roles de acessibilidade usando a prop accessibilityRole. Isso é algo que muitos desenvolvedores descobrem tarde demais, quando o app passa pela revisão da Apple Store ou da Play Store e é rejeitado por problemas de contrastes ou navegação por talkback. Outro ponto prático: a integração com ferramentas de snapshot testing. Se você usa Jest com react-test-renderer para testar componentes, o resultado em JSON do renderizado JSX no React Native é diferente do que seria no React web. Componentes como ScrollView e FlatList têm comportamento assíncrono de renderização que exige espera explícita nos testes. Ignorar isso gera tests verde-falso que passam no CI mas falham em produção, algo que já me custou duas sprints de correção em projetos anteriores.

Para quem está começando, a curva de aprendizado é mais suave do que parece. A sintaxe é intuitiva porque você já tem noção de HTML e JavaScript. O desafio real é entender que React Native é um framework nativo disfarçado de web. Cada tag que você usa no JSX mapeia para um componente nativo da plataforma, e isso importa na hora de performance, estilização e acessibilidade. O JSX é a interface, mas o que roda na tela é código nativo. Se você quer colocar a mão na massa, o primeiro passo é instalar o Node.js versão 18 ou superior, depois executar npx react-native init nome-do-projeto. Isso cria um projeto base com configuração de bundler Metro, pacotes necessários e exemplos funcionais. A partir daí, você edita o arquivo App.jsx ou App.tsx e vê as mudanças em tempo real com o watch do Metro. Hot reload funciona bem para a maioria das alterações de JSX, mas mudanças em arquivos de configuração ou dependências exigem recarregamento completo. Dica prática que pouca gente menciona: use o React DevTools para inspecionar a árvore de componentes renderizada no dispositivo. Ele mostra exatamente como o JSX foi transformado em elementos reais, quais props estão passando, e onde estão os gargalos de renderização. A ferramenta é integrada no app do metro e funciona tanto em iOS quanto em Android, mas muitos desenvolvedores nunca a abrem nos primeiros seis meses de projeto.