React cria interfaces web com elementos HTML; React Native cria apps iOS e Android com views nativas. Veja o equivalente nativo de cada elemento web e o que dá para compartilhar.
React é a biblioteca; o React Native a usa para criar apps iOS e Android. Com React na web, você renderiza elementos HTML como div e button em uma página do navegador. O React Native renderiza os próprios componentes, como View e Text, que viram views reais da plataforma. Componentes, props, state e hooks funcionam do mesmo jeito nos dois.
Lado a lado
O jeito mais rápido de ver a diferença é traduzir um elemento web para o equivalente nativo. Busque no mapa abaixo uma tag HTML, uma prop ou um hábito de CSS, e cada linha mostra o substituto no React Native com uma nota curta sobre o que se comporta de outro jeito.
Não. React é a biblioteca de componentes; React Native é um framework que usa React para controlar views móveis nativas. Você escreve componentes do mesmo jeito, mas renderiza View, Text e outros componentes nativos em vez de HTML, e não existe DOM de navegador.
Não diretamente. Não há elementos div ou span nem arquivos CSS. Os estilos são objetos JavaScript com nomes em camelCase que espelham o CSS na maior parte, e o layout usa flexbox com alguns padrões diferentes.
React primeiro, na maioria dos casos. A própria documentação do React Native ensina componentes, JSX, props e state do React como base, e praticar isso na web dá um retorno mais rápido.
A lógica pode ser compartilhada: tipos, clientes de API, validação e hooks que não mexem no DOM. Telas e componentes geralmente não, porque renderizam primitivas diferentes.
Sim. A documentação do React Native explica que, em tempo de execução, ele cria as views Android e iOS correspondentes aos seus componentes, então uma View vira uma view nativa, e não uma página web dentro de um wrapper.
A lógica do componente é idêntica: as mesmas props, a mesma chamada de useState, o mesmo handler. Só os elementos e a estilização mudam.
Elementos HTML, uma classe CSS e onClick. O navegador posiciona o botão depois do texto.
View, Text e Pressable do react-native, estilos de StyleSheet.create e onPress no lugar de onClick.
FlatList só renderiza o que está perto da tela, o que mantém listas longas fluidas. keyExtractor faz o papel da prop key.
Um container com layout flexbox, estilo e tratamento de toque. Ele não rola.
Todo texto precisa estar dentro de Text. Text aninhado herda estilos; não existem tags de título.
Imagens da rede precisam de largura e altura explícitas. Arquivos locais usam require().
onChangeText passa a nova string diretamente, em vez de um evento.
A prop multiline permite várias linhas de texto.
Esconde o texto digitado. Não funciona junto com multiline.
Um input booleano controlado: atualize value a partir de onValueChange.
Button recebe uma prop title; Pressable envolve qualquer filho que você queira tornar tocável.
Pressable também oferece onPressIn, onPressOut e onLongPress.
Renderiza todos os filhos de uma vez, então use só para conteúdo curto.
Renderiza listas longas com eficiência. Precisa de data e renderItem; keyExtractor define cada key.
Abre a URL com um app instalado, como o navegador. Envolva em um Pressable para ter um link tocável.
Estilos são objetos, geralmente definidos com StyleSheet.create. Passe um array para combiná-los; o último prevalece.
Os nomes de estilo são em camelCase, como na prop style do próprio React na web.
Toda View é um container flex e empilha os filhos na vertical, a menos que você diga o contrário.
Busque um elemento, uma prop ou uma ideia de CSS
img, onClick, class...
Mostrando {n} de {v} linhas
Nada corresponde. Tente um nome de tag como div ou input.
Elementos web e seus equivalentes no React Native
React na web
React Native
O que muda
Comece grátis · Sem cartão de crédito