Hola a todos, Estaba encontrando una buena manera de hacer una pantalla de carga/animación para mi pequeña aplicación React, y encontré 3 formas diferentes de hacer buenas pantallas de carga, : Usando la biblioteca . Tipo-1 de carga de reacción : Uso de la biblioteca . Tipo-2 react-lottie : usando simple. Tipo-3 CSS Si prefiere ver el video tutorial, puede verlo aquí; de lo contrario, solo mire los primeros 2 minutos para tener una idea de lo que vamos a construir aquí... ¡y siga leyendo!😄 Empecemos a Construir... Crea tu aplicación de reacción con, npx create-react-app React-Loading-Screen A continuación, instale dos bibliotecas que vamos a utilizar. npm install react-loading react-lottie Aquí, estoy usando para obtener datos, para mostrar cómo podemos usar el precargador cuando usamos la API. NOTA: la API jsonplaceholder Tipo 1 Cree un archivo separado como PreLoader1.js. Cree un componente funcional y aquí, vamos a usar dos estados, [data, setData] = useState([]); [done,setDone]=useState( ); const const undefined : para almacenar datos que provienen de la llamada API. estado de datos : es booleano para decidir el clima para mostrar el precargador o no. estado hecho Ahora en el efecto de uso, useEffect( { setTimeout( { fetch( ) .then( response.json()) .then( { .log(json); setData(json); setDone( ); }); }, ); }, []); => () => () "https://jsonplaceholder.typicode.com/posts" ( ) => response ( ) => json console true 2000 Puedes poner tu propia lógica en useEffect! Ahora en el método useEffect anterior, Primero usamos el método de búsqueda para obtener datos de API, luego convertimos esos datos en json, luego estableceremos el estado de datos con datos json, y luego estableceremos el estado hecho en verdadero. NOTA: Aquí he usado la función de tiempo de espera durante 2 segundos para que podamos ver la pantalla de carga durante más tiempo. Ahora rendericemos nuestro componente. comprobaremos si el estado es falso, entonces representaremos el componente de precarga; de lo contrario, representaremos los datos que queremos mostrar. Línea 22: done aquí he usado la biblioteca de carga reactiva, donde solo tenemos que establecer el tipo, el color, la altura y el ancho. Puedes encontrar más funcionalidades en Línea 23: aquí desde aquí he mapeado el estado de los datos dentro de la etiqueta ul que devuelve el título de cada publicación en la etiqueta li. Línea 30: (use console.log() dentro de useEffect para ver qué tipo de datos estamos obteniendo) Ese es el final de la Parte 1 aquí. Tipo 2 Cree un nuevo archivo y asígnele el nombre PreLoader2.js Cree un componente funcional e importe la biblioteca react-Lottie. Lottie import from "react-lottie" En este tipo de pantalla de carga tenemos que descargar archivos de animación desde https://lottiefiles.com/ Para este tutorial estoy usando debajo de dos archivos, Animación de la Tierra: https://lottiefiles.com/1055-world-locations Animación de éxito: https://lottiefiles.com/1127-success Descargue este archivo (Lottie JSON) y guárdelo en el directorio de su proyecto. Importemos estos archivos json como a continuación, * location ; * success ; import as from "../1055-world-locations.json" import as from "../1127-success.json" Como se menciona en la documentación de la biblioteca react-Lottie, debemos establecer opciones predeterminadas para usar estos archivos de animación en nuestro proyecto, así que primero declare estas opciones como, aquí defaultOptions1 = { : , : , : location.default, : { : , }, }; defaultOptions2 = { : , : , : success.default, : { : , }, }; const loop true autoplay true animationData rendererSettings preserveAspectRatio "xMidYMid slice" const loop true autoplay true animationData rendererSettings preserveAspectRatio "xMidYMid slice" para el primer archivo mientras que para el segundo archivo. defaultOptions1 defaultOptions2 En este tutorial vamos a usar 3 estados: [data, setData] = useState([]); [loading, setloading] = useState( ); [completed, setcompleted] = useState( ); const const undefined const undefined : para almacenar datos que provienen de la llamada API. estado de datos estado de booleano para el primer archivo de animación. carga: estado booleano para el segundo archivo de animación cuando se completa la llamada a la API. estado completado: estado useEffect( { setTimeout( { fetch( ) .then( response.json()) .then( { .log(json); setData(json); setloading( ); setTimeout( { setcompleted( ); }, ); }); }, ); }, []); => () => () "https://jsonplaceholder.typicode.com/posts" ( ) => response ( ) => json console true => () true 1000 2000 Puedes poner tu propia lógica en useEffect! El método UseEffect es casi el mismo que en la parte 1, la única diferencia es que, en lugar del estado terminado, tenemos que establecer el estado completado y cargando en verdadero, Además, he usado una función de tiempo de espera más durante 1 segundo para ver la segunda animación. ( <Lottie options={defaultOptions1} height={200} width={200} /> ) : ( <Lottie options={defaultOptions2} height={100} width={100} /> )} </> ) : ( <> <h1>Your Data</h1> </> )} </> ); } return {!completed ? ( {!loading ? ( <> <> Como se muestra en el código anterior, en la devolución, si el estado completado es falso, mostraremos la pantalla de carga; de lo contrario, mostraremos nuestros datos. En la parte de animación haremos una representación condicional más, cuando el estado de carga es falso, representaremos la animación de la tierra; de lo contrario, representaremos la animación de éxito. No olvides configurar para el archivo 1 y para el archivo 2. options={defaultOptions1} options={defaultOptions2} Código completo: Ahora, según la licencia Creative Commons de https://lottiefiles.com/page/license , los creadores deben atribuirse en su solicitud. Puede atribuir al creador como se muestra en las líneas 60 a 71. Ese es el final de la Parte 2. Tipo-3 En este tipo, no vamos a usar ninguna biblioteca, sino que solo usamos un estilo css simple. Ahora, la lógica de mostrar el precargador es la misma que en la parte 2, así que aquí no les mostraré todo el proceso. Crear nuevo archivo PreLoader3.js Copie todo el código del archivo PreLoader2.js y elimine todo el código relacionado con la biblioteca react-Lottie y mantenga todo como está. solo cambie la declaración de devolución como se muestra a continuación, ( <div className="spinner"> <span>Loading...</span> <div className="half-spinner"></div> </div> <div className="completed">&#x2713;</div> <h1>Your Data</h1> return {!completed ? ( {!loading ? ( <> <> ) : ( )} ) : ( </> <> )} ); </> </> En el código anterior, div con la clase spinner contiene Loading text y spinner. mientras que div con el nombre de clase completado contiene el símbolo de éxito (✓). Ahora hagamos un poco de estilo css. cree un archivo separado preloader3.css para diseñarlo e impórtelo en el archivo preloader3.js. Ahora, La clase es simplemente caja para spinner. .spinner contiene estilos y animaciones para cargar texto. .spinner span contiene estilos para spinner. .half-spinner ahora, para cortar toda esta rueda giratoria como en la línea n. ° 20, solo tiene que configurar el borde superior en transparente. contiene estilo y animación para el símbolo de éxito (✓). .completed Este es el Fin del tipo 3. Puede encontrar el repositorio de código completo desde . aquí 😄 Gracias por leer y apoyar. Siéntete libre de visitar mi canal de youtube: @CodeBucks Publicado anteriormente aquí .

Fetch

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Subscribe to Learn ReactJS by building Projects!

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Guía paso a paso para crear 3 tipos diferentes de pantallas de carga en React

Demasiado Largo; Para Leer

People Mentioned

Companies Mentioned

@codebucks

HISTORIAS RELACIONADAS