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 HTML
- Text - Para exibir textos
- StatusBar - 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.