Módulo 1 BÁSICO

Atividade 2: Conhecendo o Expo.dev

Descubra a plataforma que vamos usar para criar nossos apps!

🎯 Objetivos desta aula

  • Conhecer o Expo e entender suas vantagens
  • Explorar o Expo Snack - editor online
  • Criar uma conta gratuita no Expo.dev
  • Entender a interface do editor

🤔 O que é o Expo?

O Expo é uma plataforma que simplifica o desenvolvimento de aplicativos React Native. Pense nele como um "kit de ferramentas" que elimina a parte complicada de configurar o ambiente de desenvolvimento.

🎁 Vantagens do Expo:

Sem instalação pesada

Não precisa do Android Studio ou Xcode

Programação no navegador

O Snack funciona 100% online

Teste instantâneo

Veja o app no celular via QR Code

Multiplataforma

Funciona em Android, iOS e Web

💡 Analogia: Se React Native é como construir uma casa, o Expo é como usar um kit de construção com todas as ferramentas organizadas. Você foca em criar, não em configurar!

🍿 O que é o Expo Snack?

O Expo Snack é um editor de código online onde você pode criar, testar e compartilhar aplicativos React Native diretamente no navegador!

📂 Partes principais do Snack:

📝
Editor de Código (esquerda)

Onde você escreve o código do seu app

📱
Preview (direita)

Simulador que mostra como seu app vai ficar

📁
Explorador de Arquivos

Lista com os arquivos do projeto

⚙️
Barra de Ferramentas

Salvar, compartilhar, exportar

🚀 Abrir Expo Snack

👤 Criando sua conta no Expo.dev

Para salvar seus projetos e compartilhá-los, você precisa criar uma conta gratuita:

  1. 1
    Acesse expo.dev

    Abra o site no navegador

  2. 2
    Clique em "Sign Up"

    No canto superior direito

  3. 3
    Escolha como criar a conta

    Pode usar GitHub, Google ou criar com email

  4. 4
    Pronto! Você está logado

    Agora pode salvar seus projetos no Snack

⚠️ Importante: Use o mesmo email que você vai usar no Expo Go (app do celular). Assim seus projetos ficam sincronizados!

🎯 Tarefa Prática

Antes de continuar para o quiz, faça o seguinte:

  1. Acesse snack.expo.dev
  2. Crie uma conta (ou faça login se já tiver)
  3. Explore a interface - onde fica o editor? O preview?
  4. Tente mudar algum texto no código e veja o que acontece!

💡 Dica: No arquivo App.js, procure por algum texto entre aspas e mude para outra coisa. O preview atualiza automaticamente!

📝 Quiz - Teste seus conhecimentos