Actualmente estoy en el proceso de aprender ReactJS y Javascript en general. Tengo este problema donde si pongo un código Javascript en el archivo. solo se ejecuta una vez cuando inicio el servidor de prueba (o compilación), pero después de eso parece estar roto. Supongo que esto se debe a la forma en que funciona ReactJS y cómo se puede guardar o almacenar en caché el Javascript. Espero que alguien pueda orientarme en la dirección correcta, ya que este problema ocurre con cada pieza de código que pruebo, a continuación publicaré mi código. gracias de antemano :)
import "./main.css"; import gsap from "gsap"; function Hero() { let tl = gsap.timeline(); tl.from(".hero--image", { opacity: 0, scale: 0.4 }); return ( <div className="container hero--image shadow-sm h100 br"> <div className="container d-flex h-100 h-md-0 text-reveal"> <div className="col col-12 col-md-6 d-inline-flex"> <div className="hero--padding py-md-0 hero--textbox text-white"> <h1 className="text-left">Title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan in nisl ut hendrerit. Praesent dictum massa lectus, quis ullamcorper velit pharetra sed. </p> </div> </div> <div className="col col-12 col-md-6 d-none d-md-inline-flex"> <div className="hero--logo"></div> </div> </div> </div> ); } export default Hero;código fijo
import ReactDOM from "react-dom"; import "./main.css"; import gsap from "gsap"; import { useRef, useEffect } from "react"; function Hero() { const boxRef = useRef(); useEffect(() => { gsap.from([boxRef.current], { opacity: 0, y: 10, duration: 1, rotation: 0.001, delay: 1, }); }); return ( <div className="container hero--image shadow-sm h100 br"> <div className="container d-flex h-100 h-md-0 text-reveal"> <div className="col col-12 col-md-6 d-inline-flex"> <div ref={boxRef} className="hero--padding py-md-0 hero--textbox text-white" > <h1 className="text-left">Title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan in nisl ut hendrerit. Praesent dictum massa lectus, quis ullamcorper velit pharetra sed. </p> </div> </div> <div className="col col-12 col-md-6 d-none d-md-inline-flex"> <div className="hero--logo"></div> </div> </div> </div> ); } export default Hero;