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.
Criar um sistema de filtragem dinâmica onde:
RangePriceFilter) controla a faixa de preçoProductsPage (Estado Principal) -> ProductSubHeader (Intermediário) -> RangePriceFilter (Disparador)
O desafio técnico principal é o prop drilling, onde:
Solução através de comunicação ascendente:
1// Definição de tipos
2 interface RangePriceFilterProps {
3 value: number;
4 onPriceChange?: (value: number) => void;
5 }Fluxo de Eventos:
onPriceChangeRangePriceFilter como componente totalmente controlado:
1const RangePriceFilter = ({ value, onPriceChange }: RangePriceFilterProps) => {
2 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
3 const newValue = parseInt(e.target.value); onPriceChange?.(newValue);
4 // Notifica o pai
5 }; return ( <input type="range" min="0" max="1000" value={value}
6 // Controlado externamente onChange={handleChange} /> ); };Boas Práticas:
?.)Identificamos oportunidades de otimização:
React.memo para memoizaçãouseCallback para callbacks estáveis| Estágio Atual | Próximos Passos | Benefícios |
|---|---|---|
| Prop Drilling | Context API | Redução de props intermediárias |
| Re-renders globais | Componentes Memorizados | Renderização seletiva |
| Filtro instantâneo | Debounce (300ms) | Menos cálculos durante interação |
Dados fluem para baixo, eventos para cima
Estado centralizado em ProductsPage
RangePriceFilter (UI) vs ProductsPage (Lógica)
"A simplicidade é pré-requisito para a confiabilidade."