Estoy aprendiendo a reaccionar y estoy experimentando con el código, ayer quise hacer una pelota que se mueve cuando se presionan las flechas, vi algunos tutoriales y lo hice con js, muy fácil, luego quise hacerlo con reaccionar pero el problema que tuve es que no sabía por dónde empezar, solo hice un componente Ball con la altura, el peso, etc., pero no sabía cómo acceder a este componente e interactuar con él o rastrear dónde estaba el componente. es en este momento (por ejemplo en el scratch de javascript que hice, pude colocar una función que fuera como "cuando la pelota llegue a la izquierda: 40 muéstrame un mensaje), entonces el problema es que no sé si esta lógica ( como el de moverlo con las teclas de flecha debe colocarse dentro del componente Ball o tal vez en el componente de la aplicación que representa el componente Ball) Pondré el código del js para que vean lo que quería traducir en React.
HTML
<body> <div class="circle" id="circle"></div> <script src="script.js"></script> </body>CSS
.circle{ height: 100px; width: 100px; border-radius: 50%; background-color: purple; }JS
let circle = document.querySelector(".circle"); let circleID = document.getElementById("circle"); let moveBy = 10; window.addEventListener("load", () => { circleID.style.position = "absolute"; circleID.style.left = 0; circleID.style.top = 0; }); window.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowLeft": circle.style.left = parseInt(circle.style.left) - moveBy + "px"; if (circleID.style.left == "40px") { console.log("40px reached"); } break; case "ArrowRight": circle.style.left = parseInt(circle.style.left) + moveBy + "px"; break; case "ArrowUp": circle.style.top = parseInt(circle.style.top) - moveBy + "px"; break; case "ArrowDown": circle.style.top = parseInt(circle.style.top) + moveBy + "px"; break; } });¡Gracias a todos por la atención y que tengan un buen día!