Publicado em: 18/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.
Neste tutorial, vamos configurar o sistema de navegação do Expo Router, que utiliza uma abordagem baseada no sistema de arquivos similar ao Next.js. A estrutura de diretórios que criamos define automaticamente as rotas da aplicação.
Para começar, precisamos instalar as dependências necessárias:
npx expo install @react-navigation/native @react-navigation/native-stack react-native-screens expo-linking expo-constants expo-router react-native-gesture-handlerPrimeiro, alteramos o ponto de entrada no package.json para um arquivo index.js. Em seguida, configuramos o esquema (scheme) no app.json, que funciona como um identificador único para deep links.
Adicionamos também o plugin do Expo Router na configuração e, para SDK 48, é necessário especificar a versão do Metro no package.json.
Criamos um diretório 'app' na raiz do projeto, onde:
Cada arquivo exporta um componente React que renderiza o conteúdo da página.
Criamos uma página inicial simples com um texto centralizado. O Expo Router automaticamente detecta as mudanças e atualiza o aplicativo em tempo real.
Nas próximas aulas, exploraremos navegação entre telas, rotas dinâmicas e configurações mais avançadas do sistema de roteamento. Esta configuração inicial permite começar a desenvolver com uma estrutura de navegação robusta e intuitiva, similar à experiência web mas adaptada para aplicativos móveis.