Guide étape par étape pour créer 3 différents Types d'écrans de chargement dans React
Salut les gens,
Je cherchais un bon moyen de créer un écran de chargement / une animation pour ma petite application React, et j'ai trouvé 3 façons différentes de faire de bons écrans de chargement,
Type-1 : Utilisation de react-loading .
Type-2 : Utilisation de react-lottie .
Type-3 : Utilisation de simples CSS .
Si vous préférez regarder le didacticiel vidéo, vous pouvez le regarder ici. Sinon, regardez simplement les 2 premières minutes pour avoir une idée de ce que nous allons construire ici .. et continuez à lire! 😄
Commençons à construire ...
Créez votre application de réaction avec,
npx create-react-app React-Loading-Screen
Ensuite, installez deux bibliothèques que nous allons utiliser.
npm installer react-loading react-lottie
REMARQUE: Ici, j'utilise jsonplaceholder API pour obtenir des données, pour montrer comment nous pouvons utiliser le pré-chargeur lors de l'utilisation de l'API.
Type-1
Créez un fichier séparé comme PreLoader1.js.
Créez un composant fonctionnel et ici, nous allons utiliser deux états,
const [data , setData] = useState (); const [done, setDone] = useState ( undefined );
état des données : pour stocker les données provenant de l'appel d'API.
état terminé : il est booléen de décider de la météo pour afficher le préchargeur ou non.
Maintenant dans useEffect,
useEffect ( () => { setTimeout ( () => { fetch ( "https://jsonplaceholder.typicode.com/posts"" ) .then ( ( response ) => response.json ()) .then ( ( json ) => { console .log (json); setData (json); setDone ( true ); }); }, 2000 ); }, );
Maintenant dans la méthode useEffect ci-dessus ,
Nous utilisons d'abord la méthode fetch pour obtenir les données de l'api, puis nous convertissons ces données en json, Ensuite, nous définirons l'état des données avec les données json, puis définirons l'état done sur true.
Maintenant, nous allons rendre notre composant.
Ligne 22: nous vérifierons si l'état
est faux puis nous rendrons le composant de pré-chargement sinon nous rendrons les données que nous voulons montrer.
Ligne 23: Ici, j'ai utilisé la bibliothèque de chargement de réaction, où nous n'avons qu'à définir le type, la couleur, la hauteur et la largeur. vous pouvez trouver plus de fonctionnalités sur ici .
Ligne 30: De là, j'ai mappé l'état des données à l'intérieur de la balise ul qui renvoie le titre de chaque message dans la balise li. (utilisez console.log () dans useEffect pour voir quel type de données nous obtenons)
C 'est la fin de la partie 1 ici.
< Type-2
Créer nouveau fichier et nommez-le PreLoader2.js
Créez un composant fonctionnel et importez la bibliothèque react-Lottie.
import Lottie from " react-lottie "
Dans ce type d'écran de chargement, nous devons télécharger des fichiers d'animation depuis https: / /lottiefiles.com/
Pour ce tutoriel, j'utilise ci-dessous deux fichiers,
Earth animation: https://lottiefiles.com/1055-world-locations
Animation de réussite: https://lottiefiles.com/1127-success
Téléchargez ce fichier (Lottie JSON) et conservez-le votre répertoire de projet.
Importons ces fichiers json comme ci-dessous,
import * comme emplacement from " ../ 1055-world-locations.json "; import * comme succès de "../ 1127-success.json ;
Comme mentionné ici dans la documentation de la bibliothèque react-Lottie, nous devons définir les options par défaut pour utiliser ces fichiers d'animation dans notre projet, alors déclarez d'abord ces options comme,
const defaultOptions1 = { boucle : true , lecture automatique : true , animationData : location.default, rendererSettings : { preserveAspectRatio : "xMidYMid slice , }, }; const defaultOptions2 = { boucle : true , lecture automatique : true , animationData : success.default, rendererSettings : { preserveAspectRatio : "xMidYMid slice , }, };
defaultOptions1 pour le premier fichier tandis que defaultOptions2 pour le second fichier.
Dans ce tutoriel, nous allons utiliser 3 états:
const [data, setData] = useState (); const [loading, setloading] = useState ( undefined ); const [completed, setcompleted] = useState ( undefined );
état des données : pour stocker des données provenant d'un appel API.
état de chargement : état booléen du premier fichier d'animation.
état terminé : booléen sta te pour le deuxième fichier d'animation lorsque l'appel de l'API est terminé.
useEffect ( () => { setTimeout ( () => { fetch ( "https://jsonplaceholder.typicode.com/posts"" ) .then ( ( response ) => response.json ()) .then ( ( json ) => { console .log (json); setData (json); setloading ( true ); setTimeout ( () => { setcompleted ( true ); }, 1000 ); }); }, 2000 ); }, );
La méthode UseEffect est presque la même que dans la partie 1, la seule différence est qu'au lieu de l'état terminé, nous devons définir l'état terminé et l'état de chargement sur true,
De plus, j'ai utilisé une autre fonction de temporisation pendant 1 seconde pour voir la deuxième animation.
retour ( {!complété ? ( {!Chargement en cours ? ( ): ( )} ): (
Vos données
)} ); } Comme indiqué dans le code ci-dessus,
dans le retour, si rempli l'état est faux alors nous rendrons l'écran de chargement sinon nous rendrons nos données.
Dans la partie animation, nous ferons un rendu conditionnel supplémentaire,
lorsque l'état de chargement est faux, nous rendrons l'animation de la Terre sinon nous rendrons l'animation de réussite.
N'oubliez pas de définir
options={defaultOptions1}
pour le fichier 1 et options={defaultOptions2}
pour le fichier 2. Code complet:
Maintenant selon la licence Creative Commons de https://lottiefiles.com/page/license Le (s) créateur (s ) doit être attribué dans votre application.
Vous pouvez attribuer le créateur comme affiché dans les lignes 60 à 71.
C'est la fin de la partie 2.
Type -3
Dans ce type, nous n'utiliserons aucune bibliothèque à la place, nous n'utilisons qu'un simple style CSS.
Maintenant, la logique d’affichage du pré-chargeur est la même que dans la partie 2 donc ici je ne vais pas vous montrer tout le processus.
Créer nouveau fichier PreLoader3.js
Copiez tout le code du fichier PreLoader2.js et supprimez tout le code lié à la bibliothèque react-Lottie et gardez tout tel quel.
ne modifiez que l'instruction de retour comme indiqué ci-dessous,
return ( {!complété ? ( {!Chargement en cours ? ( Chargement ... ): ( ✓ )} ): (
Vos données
)} ); Dans le code ci-dessus,
tandis que
Maintenant, faisons un peu de style css.
créer un fichier séparé preloader3.css pour le styliser et l'importer dans le fichier preloader3.js.
Maintenant,
La classe .spinner est simplement une boîte pour le spinner.
.spinner contient le style et l'animation pour le chargement du texte.
.half-spinner contient le style pour le spinner.
maintenant pour couper tout ce spinner comme à la ligne n ° 20, il vous suffit de définir la bordure supérieure sur transparent.
.completed contient le style et l'animation du symbole de réussite (✓).
Ceci est la fin du type 3.
Vous pouvez trouver le référentiel Full-Code à partir de ici .
Merci d'avoir lu et soutenu. 😄
N'hésitez pas à visiter ma chaîne youtube:
@ CodeBucks
Publié précédemment ici .
