~/VibeHandbook
PDF grátis

App / Mobile

reactnative.dev

React Native

O que é

React Native é um de código aberto, criado pela Meta, para construir aplicativos móveis nativos usando React e JavaScript (ou TypeScript). Você escreve componentes da mesma forma que faria para a web, mas eles são renderizados como widgets reais de UI (User Interface — a Interface de Usuário, a parte visível do app na tela) nativa do iOS e do Android, em vez de uma web view. Uma grande parte do código é compartilhada entre as duas plataformas, mas você ainda pode recorrer a código nativo específico de cada plataforma quando precisar.

Pontos fortes

  • Uma base de código, duas plataformas — compartilhe a maior parte da lógica e da UI entre iOS e Android.
  • Usa React, então desenvolvedores web se tornam produtivos rapidamente e o ecossistema é enorme.
  • Renderiza componentes nativos de verdade, não uma web view, para uma sensação genuinamente nativa.
  • O Fast Refresh oferece feedback quase instantâneo durante a edição.
  • Válvula de escape: escreva módulos nativos em Swift/Kotlin quando encontrar um limite.

Contrapartidas

  • Pense em um tradutor passando mensagens entre duas pessoas que falam idiomas diferentes: há um pequeno atraso a cada troca. O React Native tem uma ponte parecida entre JavaScript e código nativo, e isso pode complicar trabalhos críticos em performance ou intensivos em animação.
  • Dependências nativas e ferramentas de build podem ser frágeis e sensíveis a versões.
  • Você ainda precisa de conhecimento de plataforma (e de um Mac para builds de iOS) para as partes mais difíceis.
  • Alguns recursos mais novos do SO (Operating System — Sistema Operacional, o software central do dispositivo, como iOS ou Android) demoram a chegar até que a comunidade ou você mesmo os encapsule.

Quando usar

Recorra ao React Native quando quiser que um único time e uma única base de código lancem um app nativo tanto para iOS quanto para Android, especialmente se o seu time já conhece React. É uma boa opção para apps de conteúdo, comércio e do tipo CRUD.

Encaixe com vibe coding

O React Native é amigável para programação assistida por IA porque é simplesmente React — os assistentes são extremamente fluentes em componentes, hooks e props. Peça ao modelo para usar TypeScript, para manter os componentes pequenos e sem estado (stateless) sempre que possível, e para combiná-lo com o Expo para builds e módulos nativos sem dor de cabeça. Informe as plataformas-alvo e quaisquer capacidades nativas necessárias desde o início, para que o código gerado recorra às bibliotecas certas.

import { Text, Button, View } from "react-native";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}