I am trying to learn React.

One of the tasks I am trying to do is to convert my existing html/js/css files to React.

My question is: Is there a simple, universal way to include JavaScript routines into React without changing anything in the JavaScript routine?

I have tried various ways given in various tutorials but am yet to find some method to simple use the routines without any changes.

Specifically, I have tried the following methods:

1. Using React-script-tag
2. Using Helmet
3. JavaScript DOM method.

I personally liked the third method but it gave me an error as follows:

Uncaught SyntaxError: Unexpected token '<' (at newfunction.js:1:1)

The javascript file was named newfunction.js and the script was as follows:

const loveMe = document.querySelector('.loveMe');
const times = document.querySelector('#times');

let clickTime = 0;
let timesClicked = 0;

loveMe.addEventListener('click', (e) => {
  if (clickTime === 0) {
    clickTime = new Date().getTime();
  } else {
    if (new Date().getTime() - clickTime < 800) {
      createHeart(e);
      clickTime = 0;
    } else {
      clickTime = new Date().getTime();
    }
  }
});

const createHeart = (e) => {
  const heart = document.createElement('i');
  heart.classList.add('fas');
  heart.classList.add('fa-heart');

  const x = e.clientX;
  const y = e.clientY;

  const leftOffset = e.target.offsetLeft;
  const topOffset = e.target.offsetTop;

  const xInside = x - leftOffset;
  const yInside = y - topOffset;

  heart.style.top = `${yInside}px`;
  heart.style.left = `${xInside}px`;

  loveMe.appendChild(heart);

  times.innerHTML = ++timesClicked;

  setTimeout(() => heart.remove(), 1000);
};

Would really appreciate some help in getting around this issue.

Many thanks