Publicado em: 17/03/2025
ú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.
Nesta aula, concluímos a estilização da lista de produtos, resolvendo problemas de alinhamento e espaçamento para deixar a interface exatamente como planejado no design.
Desafios enfrentados durante a estilização:
Ajustes realizados para resolver os problemas:
| Problema | Solução |
|---|---|
| Bordas inconsistentes | Definição de bordas no contêiner externo |
| Alinhamento vertical | Criação de contêineres adicionais |
| Espaçamento | Uso de padding e margens específicas |
| Quebra de linha | Ajuste de flex values e tamanhos de fonte |
| Distribuição de espaço | Cálculo preciso dos valores flex |
Principais insights desta aula:
Com esta aula, completamos:
Dicas para continuar:
Esta implementação finalizada serve como base para as próximas funcionalidades que veremos no curso, como a edição e exclusão de produtos.