Atividade 5: Estrutura do Projeto
Entenda como os arquivos de um projeto React Native são organizados!
🎯 Objetivos desta aula
- ✓ Conhecer os arquivos principais de um projeto Expo
- ✓ Entender para que serve cada arquivo
- ✓ Aprender a organizar seu código
📁 Estrutura de Arquivos
Quando você cria um projeto no Expo Snack ou localmente, ele vem com alguns arquivos padrão. Vamos entender cada um:
📝 Detalhes de cada arquivo
App.js
O arquivo principal do seu aplicativo! É aqui que definimos o componente raiz que será renderizado na tela.
💡 Analogia: É como a página index.html de um site - é por onde o app começa a carregar.
package.json
Contém informações do projeto e lista as dependências (bibliotecas externas) que seu app usa.
{
"name": "meu-app",
"version": "1.0.0",
"dependencies": {
"expo": "~49.0.0",
"react-native": "0.72.6"
}
}app.json
Configurações específicas do Expo, como nome do app, ícone, splash screen, versão e permissões.
{
"expo": {
"name": "Meu App",
"slug": "meu-app",
"version": "1.0.0",
"icon": "./assets/icon.png"
}
}assets/
Pasta para guardar arquivos "estáticos" como imagens, ícones, fontes personalizadas e outros recursos.
components/
Pasta para seus componentes reutilizáveis. Por exemplo: um botão personalizado, um card, um cabeçalho, etc.
💡 Boas práticas de organização
✅ Faça
- • Um componente por arquivo
- • Nomes descritivos (ex: BotaoEnviar.js)
- • Organize por função/feature
- • Mantenha arquivos pequenos
❌ Evite
- • Tudo em um só arquivo gigante
- • Nomes genéricos (ex: arquivo1.js)
- • Código duplicado
- • Misturar responsabilidades
💡 Dica pro: À medida que seu app cresce, você pode criar
mais pastas como screens/ para telas,
utils/ para funções auxiliares, e
styles/ para estilos globais.
🎯 Tarefa Prática
Abra um projeto no Snack e explore:
- Localize o painel de arquivos à esquerda
- Clique em cada arquivo e observe o conteúdo
- Tente criar uma pasta chamada "components"
- Crie um arquivo chamado "MeuComponente.js" dentro
⚠️ Atenção: Não altere o package.json manualmente a não ser que saiba o que está fazendo!
📋 Resumo do Módulo 1
Parabéns! Você completou o Módulo 1. Aqui está o que aprendemos:
- ✓ Por que programação mobile é importante
- ✓ O que é Expo e Expo Snack
- ✓ Como instalar e usar o Expo Go
- ✓ Seu primeiro app Hello World
- ✓ Estrutura de um projeto React Native
🎉 No próximo módulo, vamos aprender a criar interfaces mais bonitas com componentes visuais!