evento dom ready en React

Si encuentras algún detalle que te causa duda puedes dejarlo en los comentarios y haremos todo lo necesario de ayudarte lo más rápido posible.

Solución:

TL;RD Si entiendo correctamente, la respuesta probablemente sea “no es posible”. Pero hay otra solución…

Esto es lo que creo que estás tratando de hacer, descrito como una serie de pasos:

1. la página comienza a cargar, el componente muestra una animación de “carga de página”

2. la página termina de cargarse, el componente se elimina (u oculta) y el componente se inserta (o se muestra) con el contenido de la página “real”.

Aquí está el problema: recuerde que inyecta sus componentes React en la página de esta manera:

ReactDOM.render(, document.getElementById('app'));

En realidad, no puede inyectar un componente React hasta que se cargue el DOM. Así que para ese momento, ya sea aparece durante aproximadamente 2 milisegundos y desaparece, o no aparece en absoluto (dado que el DOM ya está cargado en el momento en que se inyecta en la página).

Si está tratando de mostrar un throbber u otra animación simple (como un GIF animado), probaría un enfoque híbrido:

Configure su HTML de esta manera:

En su etiqueta de secuencia de comandos, incluya un controlador de eventos JQuery “documento listo” para cargar el componente React:

class Page extends Component 

class Wrapper extends Component 
    render() 
        return (
            
        );
    


$(document).ready(function () 
    ReactDOM.render(, document.getElementById('app'));
);

Fíjate que he dejado fuera el – la imagen del throbber está haciendo el trabajo del cargador.

La idea aquí es que mientras la página se está cargando, el GIF throbber palpitará hasta que se cargue el DOM, momento en el cual se activará el evento de documento listo de JQuery y el contenido del div#app será reemplazado.

No he probado esto, pero es debería trabajo, siempre que React realmente reemplaza el contenido de div#app, en lugar de simplemente agregarle cosas. Si ese no es el caso, entonces es una simple cuestión de cambiar el controlador de documento listo a algo como esto:

$(document).ready(function () 
    $('div#app img').remove();
    ReactDOM.render(, document.getElementById('app'));
);

El enfoque que terminé usando (no se necesita JQuery) es el siguiente:

En el index.html, coloque el elemento del cargador justo después de la raíz div

Luego dentro de tu index.js:

document.addEventListener("DOMContentLoaded", function(event)  
  
  ReactDOM.render(
    
      
    
      
    
    
    ,
    document.getElementById("root")
  );

  const loadingScreen = document.getElementById("preloader");
   loadingScreen.style.opacity = 0;
   loadingScreen.style.display = "none";
);

Básicamente, simplemente seguimos un enfoque similar al que sugiere la otra respuesta, pero sin la necesidad de JQuery porque escuchamos el evento de carga usando

document.addEventListener("DOMContentLoaded", function(event)  

Otro enfoque sería simplemente colocar el cargador dentro del div raíz, lo que significa que React lo sobrescribirá de forma predeterminada cuando se cargue:

Mi enfoque personal completo se puede ver en este

Nos encantaría que puedieras difundir este post si lograste el éxito.

---

---

Utiliza Nuestro Buscador