Curso avançado de React: #13 - Como converter datetime local e salvar no backend com date-fns-tz
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, a gente continua a aprofundar no tema de date time e time zone, que sempre gera dor de cabeça quando estamos desenvolvendo aplicações reais. Aqui, eu vou te mostrar na prática como tratar corretamente a data e hora no frontend para enviar ao backend no formato UTC, garantindo que tudo funcione de forma precisa mesmo com usuários em fusos horários diferentes. Esse processo é essencial para evitar inconsistências nos dados, especialmente quando a aplicação começa a crescer e chega em diferentes regiões do país — ou do mundo. Vamos usar o Zod para validar e transformar a data inserida pelo usuário no frontend, convertendo de forma segura o valor local para o formato UTC. A aula cobre com detalhes como utilizar as funções do date-fns e date-fns-tz para manipular corretamente esses dados, e ainda te ensino como identificar e configurar o time zone da sua região. O conteúdo está todo integrado ao projeto real que estamos construindo, então você vai ver na prática como adaptar formulários, ajustar validações e garantir que a data seja enviada corretamente para o backend sem erros. Se você já sofreu com datas inconsistentes, problemas de horário no servidor ou valores que pareciam certos mas eram interpretados de forma errada, essa aula vai te ajudar a resolver tudo isso com clareza. Vamos garantir que sua aplicação seja robusta, confiável e pronta para rodar em produção com usuários de qualquer lugar. Dá o play, acompanha até o fim e me diz aqui nos comentários se tu conseguiu descobrir o bug final que deixei como desafio. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/4b596be1ae1b2abcccbb3a2885ff6ceeda350d44 🗨️ 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:32 | Avisos importantes 1:05 | Aplicando a validação do zod sobre o datetime 5:30 | Tranformando a data local para UTC 9:20 | Lista de timezones 11:10 | Desafio para a próxima aula CODARSE - [Membros apenas] Datetime e timezone #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