O que acontece quando você começa a desenvolver com React Native
Quando você instala o template padrão e abre o arquivo App.js pela primeira vez, já se depara com uma mistura de HTML-like dentro do JavaScript. Isso não é um bug, nem uma confusão intencional do framework. É o JSX, e ele é o que permite escrever componentes de interface de forma declarativa.
a linguagem utilizada no framework react native é a jsx
Eu levei dois dias pra entender por que meu código quebrava só porque esqueci de envolver dois elementos em uma tag pai. O compilador não aceita siblings soltos no retorno de um componente function. A solução mais simples é usar uma fragmentação vazia: <React.Fragment> ou o atalho <*>. Mas isso só foi o primeiro problema. O JSX no React Native tem particularidades que diferem do React para web. Você não usa class, usa className. Não usa for, usa key nos loops de array. Não existem tags como img, precisa usar Image. Não existem divs, precisa usar View. Essas diferenças parecem pequenas, mas causam erros silenciosos que demoram pra identificar, especialmente pra quem vem do desenvolvimento web tradicional.
A tradução do JSX acontece durante o build. O Metro Bundler converte cada elemento JSX em chamadas para React.createElement() ou, mais recentemente, para react-jsx-runtime. Você raramente precisa pensar nisso na prática, mas entender o processo ajuda quando o erro de compilação aparece e você precisa ler o stack trace gerado pelo babel. Uma coisa que muita gente não percebe é que o JSX no React Native não suporta JavaScript arbitrário em qualquer posição. Você pode colocar expressões dentro de chaves {}, mas não pode colocar uma declaração de variável ali. Se você tentar fazer algo como {let x = 1;}, o transpilador vai falhar imediatamente. A regra é simples: só expressões, nunca declarações.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outro ponto prático que eu aprendi na marra diz respeito às props. Quando você passa uma string como prop, pode escrever direto: <Text>Hello</Text>. Mas se quiser passar uma expressão JavaScript, precisa usar chaves: <Text style={{color: 'red'}}>{userName}</Text>. Esquecer as chaves quando o valor vem de uma variável é um dos erros mais comuns, e o código até compila, mas exibe literalmente a palavra "userName" na tela ao invés do valor da variável. O tratamento de estilos também segue convenções específicas do JSX no React Native. Em vez de um objeto CSS, você passa um array de StyleSheet.create() quando precisa de múltiplos blocos, ou um único objeto inline quando a complexidade é baixa. A diferença de performance entre StyleSheet.create() e objeto inline é significativa em listas grandes com centenas de itens renderizados dinamicamente. Eu já vi telas ficarem travadas porque alguém optou por inline styles em um FlatList com mais de 200 elementos.
Existe também uma limitação importante que quase ninguém menciona nos tutoriais iniciais: o JSX no React Native não suporta comentários inline dentro de elementos de forma tão livre quanto no HTML. Comentários precisam estar envoltos em chaves com sintaxe C-style: {/* este é um comentário */}. E eles só funcionam dentro do corpo do componente, não fora. Quando você trabalha com lógica condicional, o JSX oferece três abordagens principais. A primeira é o operador ternário: {isLoading ? <Spinner /> : <Content />}. A segunda é o operador lógico AND: {showBadge && <Badge count={5} />}. A terceira é usar funções utilitárias que retornam JSX. Cada uma tem seu caso de uso, e escolher a errada pode gerar bugs sutis, especialmente com o && quando a variável é 0 ou null em vez de false.
Uma feature que economiza bastante tempo é o suporte a templates literais dentro de strings do JSX. Você pode interpolar valores diretamente: <Text>Olá, {name}! Você tem {messages.length} mensagens.</Text>. Isso funciona porque o JSX trata strings normais como texto puro, mas expressões dentro de chaves como código JavaScript a ser avaliado. Para quem está começando, o erro mais frustrante diz respeito à exportação de componentes. O JSX precisa que o nome do componente comece com letra maiúscula. Se você criar um componente chamado button e tentá-lo usar como <button></button>, o React vai interpretar como uma tag HTML nativa e vai falhar, pois WebView ou View são os equivalentes no mobile. A correção é simplesmente renomear para Button e usar <Button></Button>.
O debug de JSX no React Native também merece atenção. O Metro Bundler mostra erros de syntaxe com linhas e colunas precisas, mas às vezes o número da linha reported não corresponde exatamente à linha do seu arquivo fonte original porque o babel insere linhas adicionais durante a transformação. Eu aprendi a confiar mais no trecho do código exibido no erro do que no número da linha em si. Em resumo, dominar o JSX no React Native é mais sobre entender as restrições do que sobre aprender sintaxe nova. O formato parece familiar, mas cada tag, cada propriedade, e cada expressão dentro de chaves segue regras específicas do ambiente mobile. Erros comuns incluem confundir nomes de componentes, esquecer chaves em interpolações, e usar elementos web onde existem equivalents nativos do React Native. A melhor forma de internalizar essas regras é escrever código, errar, e ler os messages de erro com calma.
