Publicado em: 22/07/2023
últimos vídeos
veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.
veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.
Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.
Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.
Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.
Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.
Fala mestre, beleza? No vídeo de hoje vamos falar sobre o projeto criado com Expo. A ideia é entender a estrutura do projeto, o que cada parte faz e como podemos trabalhar com ele nas próximas aulas. Esse vídeo não é sobre arquitetura de software em si, mas sim sobre como o projeto foi montado, quais arquivos estão presentes e qual o papel de cada um.
O projeto foi iniciado usando o Expo. Vamos começar explorando os arquivos principais.
É o arquivo de configuração principal do projeto. Nele temos:
Os scripts definidos aqui permitem comandos como npm start, npm run android ou npm run ios, que executam comandos específicos usando o Expo.
Gerado automaticamente pelo NPM. Ele mantém o controle preciso das versões de todas as dependências (e suas dependências) para garantir consistência entre instalações.
Arquivo de configuração do TypeScript. Toda configuração de tipos, paths e opções relacionadas ao TypeScript são feitas aqui.
Arquivo de configuração do Babel, compilador JavaScript. Ele converte nosso código para um formato que pode ser entendido por diferentes plataformas (Android, iOS, Web).
Arquivo com configurações específicas do Expo, como:
Essas opções estão bem documentadas na documentação oficial do Expo, com exemplos e descrições completas.
Pasta reservada para arquivos estáticos, como imagens, ícones, fontes, SVGs etc. Esses arquivos não são códigos e são usados em diferentes partes do app.
Pastas geradas automaticamente pelo VS Code e pelo próprio Expo. Não são modificadas manualmente e podem ser ignoradas.
Arquivo que lista tudo que deve ser ignorado pelo Git e não incluído no versionamento do projeto.
Arquivo principal de entrada da aplicação. É o ponto de partida quando o app é iniciado. Dentro dele, normalmente apontamos para a estrutura de navegação do app.
Dentro do diretório src/ fica toda a fonte da aplicação. É aqui que a estrutura começa a seguir padrões mais próximos de uma arquitetura:
Essa estrutura pode variar de acordo com o time ou desenvolvedor. Não existe uma única forma certa, mas é importante seguir um padrão definido para manter a organização.
Esse vídeo foi uma introdução à estrutura básica do projeto criado com Expo. Em aulas futuras, serão abordados pontos mais aprofundados, como navegação, componentes, hooks e organização em camadas.