O Results Summary Component é um componente que oferece uma visualização concisa e atrativa dos resultados de diversas categorias em um formato de sumário.
Meu objetivo com esse projeto era aprimorar minha capacidade de criar interfaces web atraentes e funcionais usando práticas de design responsivo e desenvolvimento web moderno. Abaixo você pode conferir mais sobre o projeto.
- Propriedades personalizadas de CSS
- Grid CSS
- Fluxo de trabalho Mobile-first
- React - Biblioteca JS
- Tailwind - Para estilos
Primeiro, avaliei qual seria a hierarquia de componentes. Em seguida, desenvolvi a versão estática do projeto e depois separei as partes em componentes reaproveitáveis.
Fiz consultas na documentação oficial do React e Tailwind.
-
Design Mobile First com Tailwind: Isso não apenas facilitou a adaptação do design para telas maiores, mas também contribuiu para uma experiência de usuário mais consistente e acessível.
-
Aprendizado Ativo Através da Prática: A máxima "aprender fazendo" fica cada vez mais evidente durante o desenvolvimento de novos projeto. Ter paciência, colocar a mão na massa e seguir estudando. Esse é o plano.
-
Gerenciamento Adequado de Classes Dinâmicas: Ao usar o Tailwind CSS, é mais eficaz e recomendado usar as classes predefinidas em vez de criar classes dinâmicas que se aplicam de forma condicional usando JSX. Isso garante que o sistema de classes do Tailwind funcione conforme o esperado e mantenha a coesão visual.
-
Implementação de Componentes Reutilizáveis: Por se tratar de um projeto pequeno, isso não fica tão evidente. Mas percebi que os componentes podem facilitar a manutenção e permite a criação de interfaces consistentes em projetos mais complexos.
Esse é o primeiro de muitos projetos com React. O plano é seguir estudando e colocar em prática.
-
The BEST Way to Create Responsive Design with Tailwind CSS - Isso me ajudou a entender o por que desenvolver a versão mobile primeiro quando estamos utilizando Tailwind. Video claro e objetivo.
-
Thinking in react - A documentação do react é uma das melhores que vi por aí. E esse artigo me ajudou a estruturar meu desenvolvimento.