📱 Ecossistema React Native

Do CLI ao Expo: Entendendo as ferramentas

🎯 Objetivos da Aula

Ao final desta sessão, o aluno será capaz de:

  1. Compreender a origem do React Native na Meta.
  2. Diferenciar os dois fluxos de trabalho: CLI e Expo.
  3. Configurar o ambiente focado em produtividade.
  4. Executar um projeto funcional via Expo Go.

📜 A Gênese: O Problema do Facebook (2013)

Antes do React Native, o Facebook enfrentava o "Caos das Duas Bases":

  • Equipes separadas (Java para Android e Objective-C para iOS).
  • Lentidão: Compilar código nativo demorava minutos; a Web era instantânea.

A Solução (2015):

O Facebook lançou o React Native para permitir o uso de JavaScript para renderizar componentes nativos reais.

"Aprenda uma vez, escreva em qualquer lugar."

🏗️ O Caminho Tradicional: React Native CLI

O CLI (Command Line Interface) é a forma "pura" de desenvolver.

  • Como funciona: Você baixa os SDKs completos do Google (Android Studio) e da Apple (Xcode).
  • Controle: Você tem acesso total às pastas /android e /ios.
  • Complexidade: Exige configuração manual de variáveis de ambiente, simuladores e drivers.
  • Uso Profissional: Geralmente usado por grandes empresas que precisam injetar código C++ ou Java muito específico dentro do app.

🚀 A Revolução Expo: O "Next.js" do Mobile

O Expo nasceu para democratizar o desenvolvimento. Se o CLI é o motor "desmontado", o Expo é o carro pronto para dirigir.

Por que usar Expo?

  • Configuração Zero: Não precisa de Android Studio ou Xcode para começar.
  • Expo Go: Um aplicativo que permite testar no seu celular físico via QR Code.
  • Universal: O mesmo código roda no Android, iOS e Web com esforço mínimo.

⚖️ Comparativo: Qual escolher?

Recurso React Native CLI Expo (Managed)
Configuração Inicial Difícil (Horas/Dias) Instantânea (Minutos)
Pastas Nativas Expostas e editáveis Gerenciadas pelo Expo
Build (Gerar App) Exige Mac para iOS Faz na nuvem (EAS)
Curva de Aprendizado Alta Baixa/Média

Nossa escolha pedagógica: Usaremos o Expo para focar na lógica e interface, sem perder tempo com erros de drivers.

🛠️ Preparando o Ambiente (Expo)

Precisamos de apenas 2 ferramentas no computador:

  1. Node.js (LTS): O motor que executa o ambiente de desenvolvimento.
  2. VS Code: Nosso editor de código.

No Celular:

  • Instale o app Expo Go (disponível na Play Store e App Store).

💻 Criando o Primeiro Projeto

No seu terminal, execute:

# 1. Criar o projeto
npx create-expo-app@latest MeuApp

# 2. Entrar na pasta
cd MeuApp

# 3. Iniciar o servidor
npx expo start

📲 Como visualizar o App?

Após o comando npx expo start, um QR Code aparecerá no seu terminal.

  1. Abra o Expo Go no seu celular.
  2. Escaneie o QR Code.
  3. O app será "transmitido" do seu computador para o celular via Wi-Fi.

Atenção: Celular e Computador devem estar conectados na mesma rede Wi-Fi.

🌐 Conexão Externa com Túnel (Expo)

Se você não estiver na mesma rede Wi-Fi (ou a rede bloquear a conexão local), use o modo tunnel.

# Inicia o Expo com túnel público
npx expo start --tunnel

Depois:

  1. Abra o Expo Go no celular.
  2. Escaneie o QR Code gerado no terminal.
  3. O app será acessado por um link externo seguro, mesmo em redes diferentes.

Dica: O túnel pode ser um pouco mais lento que o modo LAN, mas resolve a maioria dos problemas de rede em sala/laboratório.

🧪 Atividade Prática: Personalizando a Interface

Objetivo: Validar o ambiente e realizar o primeiro "Hot Reload".

  1. Abra a pasta do projeto no VS Code.
  2. No arquivo App.js, localize a tag <Text>.
  3. Altere o conteúdo para: "Meu primeiro app com Expo!".
  4. Mude a cor de fundo (backgroundColor) no objeto styles.
  5. Salve o arquivo e veja a mudança instantânea no seu celular.

Entrega: Print da tela do celular rodando o app personalizado.

🏁 Conclusão

Hoje entendemos que:

  • O CLI oferece controle total, mas exige alta configuração.
  • O Expo oferece agilidade e é o padrão para a maioria dos apps modernos.
  • O ambiente React Native é baseado em componentes reais, não em WebViews.