Transition do botão de like

Olá João, tudo bem? Sim, é possível implementar essa transição no botão de like em React. Você pode utilizar o useState para controlar o estado do botão e, assim, trocar o ícone quando ele for clicado. Para a transição, você pode utilizar o useEffect para adicionar uma classe ao botão quando ele for clicado e, depois de um tempo, remover essa classe para que a transição ocorra.

Segue um exemplo de como você pode fazer isso:

import { useState, useEffect } from 'react';

function BotaoLike() {
  const [liked, setLiked] = useState(false);

  function handleClick() {
    setLiked(!liked);
  }

  useEffect(() => {
    if (liked) {
      const timer = setTimeout(() => {
        setLiked(false);
      }, 1000);

      return () => clearTimeout(timer);
    }
  }, [liked]);

  return (
    <button
      className={`botao-like ${liked ? 'liked' : ''}`}
      onClick={handleClick}
    >
      {liked ? '❤️' : '♡'}
    </button>
  );
}

No exemplo acima, a classe liked é adicionada ao botão quando ele é clicado e removida após 1 segundo, fazendo com que a transição ocorra. Você pode alterar o tempo da transição alterando o valor passado para o setTimeout.

Espero ter ajudado e bons estudos!