Estoy tratando de aprender React.

Una de las tareas que intento hacer es convertir mis archivos html/js/css existentes a React.

Mi pregunta es: ¿Existe una manera simple y universal de incluir rutinas de JavaScript en React sin cambiar nada en la rutina de JavaScript?

He intentado varias formas dadas en varios tutoriales, pero todavía tengo que encontrar algún método para usar las rutinas de manera simple sin ningún cambio.

Específicamente, he probado los siguientes métodos:

1. Usando la etiqueta React-script
2. usando casco
3. Método DOM JavaScript.

Personalmente me gustó el tercer método, pero me dio un error de la siguiente manera:

Error de sintaxis no detectado: token inesperado '<' (en newfunction.js:1:1)

El archivo javascript se llamó newfunction.js y el script fue el siguiente:

 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); };

Realmente agradecería alguna ayuda para solucionar este problema.

Muchas gracias