Publicado em: 23/08/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.
No vídeo de hoje, mergulhamos no mundo das rotas dinâmicas no Expo Router, mostrando como implementar esse recurso poderoso que transforma a forma como lidamos com navegação em aplicativos React Native.
Começamos com um cenário comum: nossa aplicação tinha rotas fixas como /ordens/carrinho, mas esbarramos na limitação de precisar acessar informações específicas (como um ID de pedido). Qualquer tentativa de navegar para /ordens/12345 resultava em erro, pois não tínhamos uma rota configurada para aceitar parâmetros dinâmicos.
A solução veio com a criação de um arquivo especial:
ordens/list[id].tsx[id] indicam que esta parte da URL é dinâmicaEste simples padrão de nomenclatura permite que qualquer valor após ordens/list/ seja capturado como parâmetro.
1router.push('/ordens/list/12345')O valor '12345' é automaticamente capturado como parâmetro id na rota de destino.
1router.push({ pathname: '/ordens/list/[id]', params: { id: 'mestres' } })Esta abordagem é mais explícita e permite enviar múltiplos parâmetros.
No vídeo, testamos diversos cenários:
12345)mestres)Em todos os casos, o Expo Router fez o parse automático dos valores, disponibilizando-os no componente de destino.
Essa técnica abre portas para:
[pedidoId] é melhor que [id])[categoria]/[produtoId]As rotas dinâmicas são um divisor de águas no desenvolvimento com Expo. Elas trazem a flexibilidade que conhecíamos no desenvolvimento web para o mundo mobile, mantendo a simplicidade característica do Expo Router.