Curso avançado de React: #17 - Revisão das refatorações para usar o tailwindcss no projeto todo
Ya has superado la mitad. Estás muy cerca de completar el curso.
Sobre esta lección
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do curso avançado de React, eu te mostro a refatoração completa do nosso projeto para eliminar de vez os antigos arquivos .module.css e passar a usar apenas o Tailwind CSS. A gente revisa toda a estrutura da aplicação, incluindo login, listagem de tarefas, formulários, botões e mensagens de erro. Tudo foi convertido com cuidado para manter o visual e a usabilidade, mas aproveitando os benefícios da abordagem utilitária do Tailwind, como classes condicionais, @apply, organização por layers e temas personalizados. Durante a aula, te explico como cada componente foi ajustado: desde pequenos detalhes como hover, disabled, alinhamentos com flex, até melhorias de usabilidade como cores de fundo diferenciadas em inputs carregando dados. Mostro também como configurar temas com variáveis CSS, organizar os estilos por layout, pages e components, e como reaproveitar estilos com lógica aplicada, mantendo o código limpo, previsível e muito mais fácil de manter. Se tu está buscando uma forma moderna e eficiente de lidar com estilos em aplicações React, essa aula é fundamental. Ela não só te ensina a configurar e usar o Tailwind na prática, como também te ajuda a pensar em como estruturar melhor teus componentes e separar responsabilidades de uma forma mais profissional. Dá o play e confere como ficou o projeto depois dessa transformação completa. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/1bc2459c1b3a61567380fe2c8b1252dcc5c293df 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Apresentação da aula 0:17 | Avisos importantes 0:37 | Revisão das refatorações 10:00 | Finalização e agradecimentos CODARSE - [Membros apenas] Tratamento avançado de CSS #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação
Sobre este curso
Bem-vindo à playlist oficial do Curso Base de React! Aqui você encontra todas as aulas organizadas na ordem certa para aprender React do jeito certo — direto ao ponto, com prática e explicações claras. Neste curso gratuito e completo, você vai: - Entender o que é o JSX e como o React funciona por baixo dos panos - Aprender a criar componentes reutilizáveis - Trabalhar com useState, useEffect, useCallback, useMemo e muito mais - Utilizar React com TypeScript desde o início - Construir uma aplicação prática enquanto aprende cada conceito - Evitar atalhos e aprender React puro antes de partir para frameworks como Next.js O curso é ideal tanto para quem está começando quanto para quem quer fortalecer a base no React com boas práticas e contexto moderno (usando Vite como bundler). Dica bônus: Quer uma experiência de estudo mais limpa e focada, sem distrações do YouTube? Acesse a versão deste curso na plataforma externa: https://codarse.com Quer maratonar? Os membros do canal têm acesso antecipado a todas as aulas. Mas se você está vendo isso depois do lançamento, aproveite: o curso completo já está disponível aqui na playlist! Prepare seu ambiente, inscreva-se no canal, ative as notificações e bora codar com React! #CODARSE
Lo que aprenderás en este curso:
- Comprender la arquitectura de componentes de React
- Gestionar el estado de la aplicación con hooks y context
- Crear interfaces de usuario dinámicas y reactivas
- Implementar enrutamiento y navegación en aplicaciones React