I'm relatively new to coding and am working on a React App. I have some jQuery code that I'd like to use in it but have read it is bad to mix react and jQuery. I am very unsure of how to turn this into code I can use with react because I'm quite the dolt at this point. Thanks in advance!

var $die = $(".die"),
  sides = 20,
  initialSide = 1,
  lastFace,
  timeoutId,
  transitionDuration = 500,
  animationDuration = 3000;

$("ul > li > a").click(function () {
  reset();
  rollTo($(this).attr("href"));

  return false;
});

function randomFace() {
  var face = Math.floor(Math.random() * sides) + initialSide;
  lastFace = face == lastFace ? randomFace() : face;
  return face;
}

function rollTo(face) {
  clearTimeout(timeoutId);

  $("ul > li > a").removeClass("active");
  $("[href=" + face + "]").addClass("active");

  $die.attr("data-face", face);
}

function reset() {
  $die.attr("data-face", null).removeClass("rolling");
}

$(".randomize, .die").click(function () {
  $die.addClass("rolling");
  clearTimeout(timeoutId);

  timeoutId = setTimeout(function () {
    $die.removeClass("rolling");

    rollTo(randomFace());
  }, animationDuration);

  return false;
});