Hoje gostaria de compartilhar com vocês minha experiência pessoal com o Chakra UI e como usei essa biblioteca para desenvolver a funcionalidade de mudança de cor de tema e aprimorar o design da minha aplicação. Ao longo deste post, vou explorar alguns pontos e dificuldades que enfrentei durante o uso dessa biblioteca no meu portifolio.
O Desafio: Manter consistência de design e facilitar a personalização
Depois de fazer muitos cursos pelo youtube e cursos pagos online, comecei a por em prática o que vinha aprendendo sobre desenvolvimento web. No meu portifolio (que ainda não fiz o deploy) quis oferecer a possibilidade de personalização do tema para meus usuários. Foi aí que pensei em usar o Chakra UI pois ja via o uso dela em outros videos de outros desenvolvedores.
Chakra UI: Simplificando o desenvolvimento
O Chakra UI é uma biblioteca de componentes React que fornece uma abordagem simples e intuitiva para o desenvolvimento de interfaces de usuário. Através de sua sintaxe declarativa e uma ampla variedade de componentes pré-estilizados, o Chakra UI me permitiu acelerar o desenvolvimento da minha aplicação.
Uma das coisas que mais me chamou a atenção foi a facilidade de uso e personalização dos componentes. Com o Chakra UI, posso aproveitar os estilos e temas pré-definidos ou criar os meus próprios, adaptando-os às necessidades específicas do meu projeto. A configuração inicial do tema é feita através do extendTheme, onde posso definir cores, fontes e outros estilos personalizados.
Mudança de tema em tempo real
Com necessidade de alterar a cor do texto em tempo real quando o usuário clicasse no botão de mudança de tema, optei por usar o Chakra UI, e com essa ferramenta isso é surpreendentemente simples de realizar. A biblioteca oferece um componente chamado ThemeProvider que permite o controle dinâmico do tema. Ao envolver minha aplicação com o ThemeProvider em torno do componente AppRoutes que é meu arquivo principal, garanto que toda a aplicação seja atualizada quando o tema é alterado.
Compondo com o Chakra UI
Outro ponto que surgiu durante a implementação e que eu não tinha ainda posto em prática foi a composição de componentes. Dentro do Chakra UI, posso aproveitar o poder do conceito de composição para criar meus próprios componentes personalizados. Por exemplo, eu poderia criar um componente chamado CustomText que encapsula o componente Text do Chakra UI, permitindo definir facilmente estilos e personalizações específicas. Dessa forma, posso reutilizar esse componente em diferentes partes da minha aplicação, facilitando a manutenção e garantindo uma consistência visual.
Aprendendo e crescendo como desenvolvedor
Tenho aprendido bastante usando o Chakra UI e tem sido muito enriquecedor para mim como desenvolvedor frontend. Além de simplificar o processo de criação de interfaces, o Chakra UI me incentivou a explorar conceitos avançados, como temas personalizados, estilização condicional e composição de componentes, isso são coisas bastante simples e muitos sabem fazer isso sem pensar muito, mas ver que pude entender e aprender na prática é um caminho que realmente mostra a nossa evolução como desenvolvedores !!
Ao enfrentar desafios e encontrar soluções, tenho adquirido habilidades valiosas, expandindo meu conhecimento e me tornando mais confiante em minhas capacidades como desenvolvedor. Tenho percebido como registrar minhas dificuldades e aprendizados ao longo do caminho tem sido fundamental para minha evolução contínua.
Espero que essa breve história sobre minha experiência com o Chakra UI tenha sido útil para vocês.
Compartilhe nos comentários se você também é iniciante e tenha enfrentado algo parecido ! Gostaria de saber como o Chakra UI ou outras bibliotecas têm impactado o desenvolvimento de vocês.
Até a próxima!
Top comments (0)