Au 02 - Mobile - React Native - Explorando estrutura de projeto e opções do Expo - Mestres BEGIN
Neste vídeo, aprofundamos nosso entendimento sobre a estrutura de um projeto React Native com Expo, explorando os arquivos principais, configurações e documentação oficial para preparar o desenvolvimento do nosso CRUD de produtos.
Estrutura Básica do Projeto
O projeto criado com Expo possui a seguinte estrutura:
- node_modules/ - Armazena todas as dependências do projeto
- package.json - Configura scripts e lista dependências
- tsconfig.json - Configurações do TypeScript
- babel.config.js - Configurações do Babel para transpilação
- app.json - Configurações específicas do app (nome, ícone, splash screen)
- assets/ - Arquivos estáticos (imagens, ícones)
- App.tsx - Ponto de entrada da aplicação
Componentes e Estilização
No arquivo App.tsx encontramos:
- Componentes React Native básicos:
View- Similar a uma div no HTMLText- Para exibir textosStatusBar- Controla a barra de status do dispositivo
- Estilização com StyleSheet:
- Objetos JavaScript ao invés de CSS
- Sintaxe camelCase (ex: backgroundColor)
- Pode ser separado em arquivos específicos
Workflows do Expo
O Expo oferece dois fluxos de trabalho:
| Managed Workflow | Bare Workflow |
|---|---|
| Expo gerencia toda a configuração | Maior controle sobre o código nativo |
| Ideal para iniciantes e projetos simples | Necessário para integrações complexas |
| Fácil migração para Bare quando necessário | Requer conhecimento da plataforma nativa |
Bibliotecas Úteis do Expo SDK
O Expo oferece diversas bibliotecas prontas:
- Autenticação (Apple, Google)
- Acesso a recursos do dispositivo (câmera, localização)
- Armazenamento local
- APIs para acelerômetro, giroscópio
- Sistema de arquivos
- Funcionalidades de rede
Navegação com React Navigation
Para o nosso CRUD, utilizaremos:
- Stack Navigator - Para navegação em pilha
- Bottom Tabs - Para o menu inferior
- Integração com TypeScript
- Transições entre telas
- Passagem de parâmetros
Próximos Passos - CRUD de Produtos
Na próxima aula iniciaremos:
- Configuração do React Navigation
- Criação das rotas básicas
- Integração com a API existente
- Listagem inicial de produtos
Considerações Finais
Pontos-chave desta aula:
- Entendemos a estrutura básica de um projeto Expo
- Exploramos as capacidades do Expo SDK
- Compreendemos a diferença entre Managed e Bare workflows
- Preparamos o terreno para implementar a navegação
Dicas importantes:
- Consulte frequentemente a documentação do Expo
- Experimente diferentes componentes do React Native
- Organize seus estilos desde o início
- Familiarize-se com o React Navigation antes da próxima aula
Esta base teórica será essencial para o desenvolvimento prático que iniciaremos na próxima aula, onde construiremos as primeiras telas do nosso CRUD de produtos.
