React e React Native

Saudações, futuro(a) aprovado(a)! Professor Gunter Amorim aqui.

Hoje vamos falar sobre duas das tecnologias mais dominantes e requisitadas no mercado de desenvolvimento: React e React Native. Ambas foram criadas pelo Facebook (atual Meta) e compartilham a mesma filosofia de design, mas resolvem problemas fundamentalmente diferentes. Para as bancas de concurso, entender a distinção entre a biblioteca web (React) e o framework mobile (React Native) é essencial. Vamos desvendar o que cada um faz e onde eles se separam.

O que é React (ou React.js)?

O React (ou React.js) é uma biblioteca JavaScript de código aberto focada na criação de interfaces de usuário (UI) para aplicações web. 

Seu principal objetivo é permitir que desenvolvedores criem UIs complexas e interativas de forma declarativa e baseada em componentes.

Principais Conceitos do React:

• Componentes: O React é baseado na ideia de dividir a interface em pequenos blocos isolados e reutilizáveis, chamados componentes (ex: <Header />, <Botao />, <Formulario />).
• DOM Virtual (Virtual DOM): Esta é a “mágica” do React. Em vez de manipular o DOM (a estrutura de árvore do HTML no navegador) diretamente, o que é lento, o React mantém uma cópia leve em memória (o DOM Virtual). Quando o estado da aplicação muda, ele recalcula o DOM Virtual, compara com a versão anterior (processo chamado de “diff”) e aplica apenas as mudanças necessárias no DOM real.
• JSX (JavaScript XML): Uma extensão de sintaxe que permite escrever algo muito semelhante ao HTML dentro do código JavaScript. Isso facilita a visualização e a construção dos componentes.

Exemplo React.js (com JSX):

// Um componente de boas-vindas em React
function BoasVindas(props) {
  return (
    <div className="container">
      <h1>Olá, {props.nome}!</h1>
    </div>
  );
}

Neste exemplo, o <div> e o <h1> não são HTML, são JSX que o React converterá em elementos do DOM do navegador.

O que é React Native?

O React Native é um framework de desenvolvimento que usa os conceitos do React para criar aplicativos móveis nativos para iOS e Android, usando um único código-base em JavaScript.

O ponto mais importante e que mais cai em prova é: o React Native não cria uma “WebView” (que é basicamente um site rodando dentro de um app). Ele usa uma “ponte” (bridge) para traduzir os componentes React em componentes nativos reais da plataforma.

Principais Conceitos do React Native:

• Componentes Nativos: Você não usa HTML (
  , ). Em vez disso, o React Native fornece seus próprios componentes que são mapeados para os equivalentes nativos.
  • <View> é traduzido para UIView (iOS) ou ViewGroup (Android).
  • <Text> é traduzido para UILabel (iOS) ou TextView (Android).
• “Learn once, write anywhere”: A filosofia é que, se você sabe React, pode aprender rapidamente a escrever apps móveis nativos, embora os componentes e APIs sejam diferentes.
• Estilização via JavaScript: Não há CSS. A estilização é feita usando uma API do React Native (StyleSheet) que se assemelha ao CSS, mas é escrita como objetos JavaScript.

Exemplo React Native:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';


// Um componente de boas-vindas em React Native
function BoasVindas(props) {
  return (
    <View style={styles.container}>
      <Text style={styles.texto}>Olá, {props.nome}!</Text>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  texto: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

Note o uso de <View> e <Text> em vez de <div> e <h1>.

Comparativo: React vs React Native

Quando Usar Cada Um?

• Escolha React (React.js) se:
  • Você está construindo uma aplicação web (um site, um painel administrativo, uma SPA – Single Page Application).
  • O alvo principal é o navegador (Chrome, Firefox, Safari).
  • Você precisa de máximo desempenho e otimização para SEO (Search Engine Optimization).
• Escolha React Native se:
  • Você precisa construir um aplicativo móvel para iOS e Android.
  • Você deseja reutilizar a lógica de programação entre as duas plataformas (reduzindo custo e tempo).
  • Você precisa de acesso a recursos nativos do celular (câmera, GPS, acelerômetro), o que é possível através da “ponte”.

Bora ver como esse assunto é cobrado nos concursos!

1. (FGV/ANALISTA/TRF-1/2024)

O analista Francisco está considerando o uso do React para implementar um software de exibição de análise de dados. Ele sabe que o React possui uma variante voltada a aplicativos móveis chamada React Native. Analisando a documentação na página oficial do React Native, Francisco descobriu que a comunidade de código-aberto e algumas empresas parceiras estenderam seu suporte para outras plataformas, além do Android e do iOS.

Dessa forma, Francisco descobriu que é possível executar nativamente uma aplicação feita com o React Native:

1. na Web, no Windows e no MacOS;
2. no Windows e no MacOS, mas não na Web;
3. na Web e no Windows, mas não no MacOS;
4. no MacOS, mas não no Windows nem na Web;
5. na Web, mas não no Windows nem no MacOS.

COMENTÁRIO

A alternativa correta é a letra A. O React Native, originalmente criado para desenvolvimento de aplicativos móveis em Android e iOS, foi ampliado por meio de projetos mantidos pela comunidade e empresas parceiras, como React Native for Web, React Native Windows e React Native macOS, permitindo que aplicações desenvolvidas com o mesmo código base possam ser executadas nativamente também nessas plataformas. Essa expansão do ecossistema reforça o princípio de reutilização de componentes e código, central para o desenvolvimento multiplataforma moderno.

2. (AVANÇASP/ANALISTA/PREF-AMERICANA/2023)

No React um conceito de programação onde uma representação ideal, ou “virtual”, da interface do usuário é mantida em memória e sincronizada com o DOM “real” por uma biblioteca como o ReactDOM é conhecido como:

1. DOMReact.
2. ReactDOM.
3. DOM
4. DOMPrincipal
5. VirtualDOM

COMENTÁRIO

A alternativa correta é a letra E. No React, o Virtual DOM é uma representação em memória do DOM real (Document Object Model). Ele funciona como uma camada intermediária que permite ao React atualizar a interface de forma eficiente: em vez de modificar diretamente o DOM real, operação custosa em termos de desempenho, o React realiza alterações no Virtual DOM e, por meio de um processo de comparação chamado reconciliation, aplica ao DOM real apenas as mudanças necessárias. Essa abordagem melhora o desempenho da aplicação e torna as atualizações da interface mais rápidas e previsíveis.

3. (CEBRASPE/ANALISTA/MPE-CE/2020)

Julgue o item seguinte, a respeito de arquitetura de aplicações para ambiente web e arquitetura em camadas.

React é uma biblioteca JavaScript usada para a criação de interfaces gráficas com o usuário e cuja arquitetura é baseada em componentes. Essa biblioteca pode ser renderizada no servidor, utilizando-se Node.

COMENTÁRIO

O item está certo. O React é, de fato, uma biblioteca JavaScript voltada à criação de interfaces gráficas (UI), cuja arquitetura é baseada em componentes reutilizáveis. Esses componentes permitem a construção de interfaces dinâmicas e modulares, separando a lógica de exibição em pequenas partes independentes. Além disso, o React pode ser renderizado no lado do servidor por meio do Node.js, utilizando técnicas de Server-Side Rendering (SSR), um processo que gera o HTML no servidor antes de enviá-lo ao cliente, melhorando desempenho e SEO. Essa combinação reforça a flexibilidade da arquitetura React em aplicações web modernas.

Conclusão

Embora venham da mesma família e compartilhem a mesma lógica declarativa e baseada em componentes, React e React Native são ferramentas para universos diferentes. O React.js domina a web (o navegador e o DOM), enquanto o React Native domina o mobile (iOS/Android e os componentes nativos). Saber essa diferença é o primeiro passo para gabaritar qualquer questão sobre o ecossistema React!

Nos vemos no próximo artigo!