Atividade 10.5: Saindo do Snack e Indo para o PC
Agora que você já entendeu a base no navegador, vamos subir um nível e começar a programar no computador com a estrutura real do Expo.
🎯 Objetivos desta aula
- ✓ Entender a diferença entre o Expo Snack e um projeto local no PC.
-
✓
Aprender a criar um app novo usando
npx create-expo-app@latest --template. - ✓ Preparar o terreno para a próxima atividade, onde a estrutura em pastas passa a fazer mais sentido.
🧱 Antes de abrir o terminal
Nesta aula, a grande mudança não é o React Native em si. A mudança é o ambiente de trabalho. Em vez de programar em uma página online, agora você vai começar a trabalhar em um projeto real dentro do computador.
Checklist rápido
- ✓ Ter o Node.js instalado no computador.
- ✓ Ter um editor como o VS Code.
- ✓ Continuar com o Expo Go no celular para testar o app.
🧭 Quando o Snack deixa de ser suficiente?
Até aqui o Expo Snack foi perfeito para aprender rápido: abrir o navegador, testar ideias e ver o resultado sem instalar quase nada. Só que, conforme o app cresce, começamos a sentir algumas limitações.
No Snack
- É ótimo para exemplos curtos e testes rápidos.
- Funciona muito bem com um único arquivo ou poucos arquivos.
- Ajuda bastante no início porque elimina a parte técnica da instalação.
No projeto local
- Você ganha liberdade para criar várias pastas e arquivos.
- Fica muito mais fácil usar navegação, componentes e organização profissional.
- É assim que projetos reais são construídos no mercado.
Ideia principal: o Snack é excelente para aprender a lógica. O PC entra quando precisamos de um projeto mais completo, organizado e próximo do mundo profissional.
⚙️ O comando que cria o projeto
Para começar um app novo no computador, vamos usar o comando oficial do Expo. Ele cria a pasta do projeto, prepara os arquivos iniciais e deixa o ambiente pronto para você começar:
npx create-expo-app@latest meu-primeiro-app --templateO que cada parte faz?
npx: executa uma ferramenta sem você precisar instalar globalmente.create-expo-app@latest: usa a versão mais atual do criador oficial de projetos Expo.meu-primeiro-app: é o nome da pasta do projeto, e você pode trocar por outro nome.--template: indica que vamos escolher um modelo inicial em vez de começar de qualquer jeito.
Dica prática
Depois de digitar --template, o assistente normalmente pede qual template você quer usar.
Para a nossa fase do curso, o ideal é escolher um template mais simples, para que a estrutura fique mais fácil de entender.
🧪 Como pensar no template
O template é o modelo inicial do seu projeto. Alguns já vêm mais limpos. Outros trazem navegação, exemplos e mais arquivos prontos.
Para este momento do curso
Prefira um template mais simples, porque ele ajuda a turma a enxergar melhor o que cada pasta faz e evita distrações logo no começo.
Mais adiante
Quando os alunos já estiverem confortáveis com a estrutura, faz sentido usar templates com mais recursos prontos, especialmente para navegação e organização de telas.
🗂️ O que muda quando o projeto é criado
No Snack, boa parte da estrutura fica escondida. Já no PC, você enxerga o projeto de verdade. Isso é ótimo, porque passa a ficar claro onde está cada coisa.
meu-primeiro-app/
├── app/
├── assets/
├── package.json
├── app.json
└── node_modules/Pastas importantes
app/: onde as telas passam a viver quando usamos Expo Router.assets/: imagens, ícones, fontes e arquivos estáticos.node_modules/: bibliotecas instaladas automaticamente.
Arquivos importantes
package.json: lista dependências e scripts do projeto.app.json: configurações gerais do aplicativo Expo.
🚀 Passo a passo recomendado
1. Abra o terminal
Pode ser o terminal do VS Code, PowerShell ou Prompt de Comando.
2. Rode o comando de criação
Use o npx create-expo-app@latest nome-do-app --template e escolha um template simples.
3. Entre na pasta
cd meu-primeiro-app4. Inicie o servidor Expo
npx expo start5. Teste no celular
Abra o Expo Go e escaneie o QR Code, exatamente como você já fazia com o Snack.
🔁 O que continua igual?
Mesmo saindo do Snack, várias coisas continuam familiares:
- • Você ainda programa com React Native e Expo.
- • Você ainda pode testar no celular com o Expo Go.
- • A lógica dos componentes continua a mesma. O que muda é a organização do projeto.
🧠 O que você precisa guardar desta aula
- ✓ O Snack foi a nossa fase de treinamento rápido.
- ✓ O projeto local no PC mostra a estrutura real usada por desenvolvedores.
-
✓
O comando
npx create-expo-app@latest --templateé a porta de entrada para essa nova etapa. - ✓ Na próxima aula, a ideia de múltiplas telas e arquivos vai fazer muito mais sentido.
➡️ Próximo passo
Esta atividade extra não tem quiz. Ela existe para fazer uma transição suave: sair do navegador, entrar no projeto local e chegar na próxima aula com mais contexto.