Comment créer des visites guidées interactives avec React Joyride
La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous examinons Joyride et comment l’intégrer dans une application React.
L’expérience utilisateur est essentielle lorsqu’il s’agit de l’efficacité des applications Web. Vous voulez vous assurer que les utilisateurs de votre application comprennent quoi faire et comment naviguer dans les différentes sections de l’application. La création d’une visite guidée interactive de votre application peut résoudre ce problème. C’est une manière explicite de présenter l’application aux utilisateurs et de les familiariser avec ses fonctionnalités.
Bien que la plupart des bibliothèques résument le fonctionnement interne et facilitent les étapes de création de visites guidées interactives dans les applications Web, la Bibliothèque React Joyride se démarque. Il est plus flexible et permet un certain niveau de personnalisation.
Dans cet article, nous examinerons brièvement la bibliothèque React Joyride, son fonctionnement et ses différences avec les bibliothèques similaires. De plus, nous allons créer une démo d’une page de destination et y intégrer la bibliothèque React Joyride, avec quelques personnalisations. Commençons!
Configuration du projet
Exécutez la commande suivante dans votre terminal pour configurer une application React :
npx create-react-app react-joyride-demo
Ensuite, exécutez les commandes ci-dessous pour naviguer dans le dossier du projet créé et installer la bibliothèque React Joyride.
cd react-joyride-demo
npm install react-joyride
Exécutez la commande ci-dessous pour démarrer votre serveur de développement :
npm start
Un aperçu de la bibliothèque React Joyride
Le package React Joyride est très apprécié pour le développement de visites interactives d’applications Web, avec plus de 5 000 étoiles sur GitHub et un système de maintenance actif. Avec React Joyride, les utilisateurs d’une application peuvent voir ses fonctionnalités via une visite interactive, qui les invite à explorer des points d’intérêt spécifiques et met en évidence les fonctionnalités de base.
La bibliothèque React Joyride cible les éléments DOM dans une application sur laquelle elle affiche une info-bulle avec la description définie par le développeur des éléments individuels. Chaque info-bulle d’un élément pointe vers et décrit l’élément tel qu’il est défini. Sous le capot, la bibliothèque React Joyride utilise flotteur de réaction pour positionner et styliser correctement l’info-bulle.
Comparée à des bibliothèques similaires, la bibliothèque React Joyride est moins rigide et offre plus de flexibilité et de personnalisation. Il permet de redéfinir le thème de la bibliothèque pour répondre aux besoins de l’application. Il rend chaque action et événement visible pour l’utilisateur, ce qui vous permet de l’adapter à vos besoins. Il comprend également des solutions pour la majorité des cas d’utilisation des visites de produits.
Pour créer des visites interactives avec la bibliothèque React Joyride, il vous suffit d’importer son composant dans votre application et de transmettre les accessoires requis. Dans une section ultérieure, nous examinerons de près comment nous pouvons le faire. Cependant, dans la section suivante, créons une simple page d’accueil avec laquelle nous pouvons travailler.
Construire une application frontale simple
Avec React installé et notre application démarrée, construisons une version de démonstration de la page de destination d’une compagnie d’assurance. Après quoi, nous intégrerons la bibliothèque React Joyride.
Pour le style, ouvrez le src/App.css fichier et remplacez les styles prédéfinis par ceux-ci :
Nous voulons un Hero composant de section pour la page qui inclut un composant d’en-tête. Nous aurons également un Packages composant qui répertorie les offres et un Footer composant.
Dans le src dossier, créez un nouveau dossier nommé components et ajouter un Header.js déposer dessus. Ouvrez le src/components/Header.js fichier et ajoutez-y ce qui suit :
Ici, nous avons défini la Header composant. Ensuite, créons un Hero.js dossier dans le src/components/ dossier et ajoutez-y le code ci-dessous :
import React from"react";import Header from"./Header";exportdefaultfunctionHero(){return(<section className="hero"><Header /><div className="container hero__body"><h1>Get Insurance Policy and Save 30%!</h1><p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model words.</p><a href="https://www.telerik.com/" className="signup">
Get Started
</a></div></section>);}
Ici, nous avons défini la Hero composant et rendu le Header composant avec du texte factice.
Créons également un Packages.js dossier dans le src/components dossier et ajoutez-y ce qui suit :
import React from"react";exportdefaultfunctionPackages(){return(<section className="packages"><div className="container"><h3>PACKAGES</h3><p>An overview of exciting insurance packages we offer</p><div className="cards"><div><h4>Health</h4><p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model
words.</p></div><div><h4>Travel</h4><p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model
words.</p></div><div><h4>Life</h4><p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model
words.</p></div></div><a href="https://www.telerik.com/" className="explore">
Click here to explore {">>>"}</a></div></section>);}
Dans le code ci-dessus, nous avons défini un Packages composant qui renvoie des exemples de packages. Pour ajouter le Footer composant, créez un Footer.js dossier dans le src/components dossier et ajoutez-y ce qui suit :
Ici, nous avons importé et rendu le Hero, Packages et Footer Composants. Nous avons également importé les styles que nous avons précédemment définis dans le App.css déposer.
Enregistrez les modifications et prévisualisez l’application dans votre navigateur pour voir ce que nous avons.
Intégration de la bibliothèque React Joyride
La librairie React Joyride exporte un core Joyride composant que nous pouvons utiliser pour créer des visites dans les applications React. Le Joyride le composant attend un requis steps prop lors du rendu. Le steps prop est un tableau d’objets utilisé pour définir les différentes étapes ou phases de la visite. Le target et content sont deux propriétés essentielles que chaque objet du tableau doit contenir.
Le target La propriété accepte une valeur qui pointe vers l’élément approprié que nous voulons mettre en évidence pour une étape particulière de la visite. Il peut s’agir d’un sélecteur CSS ou d’un HTMLElement.
Le content propriété, d’autre part, définit le corps de l’info-bulle. Il accepte les valeurs qui spécifient le contenu affiché pour l’étape.
Il est important de noter que l’ordre dans lequel nous définissons les objets dans le steps array est l’ordre dans lequel la visite se déroulera.
Pour voir cela en action, remplacez le contenu de votre src/App.js fichier comme ceci:
import Hero from"./components/Hero";import Packages from"./components/Packages";import Footer from"./components/Footer";import"./App.css";import Joyride from"react-joyride";const steps =[{
target:".header > h3",
content:"Welcome!! Please spare a minute to learn about our page",},{
target:".login",
content:"You can log in here",},{
target:".signup",
content:"Sign up here, if you're new",},{
target:".packages h3",
content:"The packages we offer",},{
target:".explore",
content:"Click here to find out more about other packages",},{
target:".footer .form",
content:"Subscribe to our newsletter here",},];functionApp(){return(<><Joyride steps={steps}/><div className="App"><Hero /><Packages /><Footer /></div></>);}exportdefault App;
Dans le code ci-dessus, nous avons importé et rendu le Joyride composant. Ensuite, nous avons défini une steps tableau et l’a passé comme accessoire au Joyride composant. Notre visite devrait comporter six étapes puisque nous avons défini six objets dans le steps déployer. Vous pouvez toujours modifier ou modifier cela selon vos préférences.
Enregistrez les modifications et testez l’application dans votre navigateur. Vous devriez voir une balise animée (un petit cercle de couleur rouge) sur le premier élément ciblé dans le steps déployer. Cliquez sur la balise pour démarrer la visite.
Personnaliser la visite
Comme mentionné précédemment, l’un des avantages de l’utilisation de la bibliothèque React Joyride est qu’elle est moins rigide et permet une plus grande personnalisation. En plus de steps prop, d’autres accessoires facilitent ces personnalisations.
Dans les sections suivantes, nous examinerons certains des autres accessoires. Cependant, avant de continuer, résolvons rapidement un problème de comportement avec notre visite. Vous devriez avoir remarqué que vous devez fermer chaque étape de la visite avant de passer à la suivante. Le Joyride composant accepte également un continuous prop qui peut être utilisé pour résoudre ce problème. Il prend une valeur booléenne qui maintient la visite en mouvement lorsqu’il est défini sur true.
Ouvrez votre src/App.js fichier et mettre à jour le Joyride composant comme indiqué ci-dessous :
<Joyride steps={steps} continuous={true}/>
Cela fait, vous devriez voir un bouton suivant qui peut être utilisé pour continuer la visite sans avoir à le fermer à intervalles réguliers.
Ajout de styles personnalisés
L’état actuel de notre tournée montre que le thème général par défaut du Joyride composant ne correspond pas au thème de notre application. Le composant accepte également styles props pour remplacer certains styles par défaut. Pour ajuster le thème général, cependant, nous devons imbriquer un options objet au sein de styles objet. Voici la valeur par défaut options objet, comme on le voit dans documents officiels.
Le thème général prend ces valeurs, donc pour remplacer l’un des styles, nous devons le définir dans notre options objet imbriqué dans styles objet et passé comme accessoire au Joyride composant.
En plus de changer les styles du thème général, nous pouvons également remplacer les styles de certains des composants fournis avec le Joyride composant. Par exemple, nous pouvons remplacer les styles des spotlightle tooltip composant, le beacon composant, etc. Il suffit de définir l’objet styles pour chaque composant et de les ajouter au styles objet. Cliquez sur ici pour voir tous les composants remplaçables définis par la bibliothèque React Joyride.
Ouvrez le src/App.js fichier et mettre à jour le Joyride composant comme ceci pour remplacer certains des styles par défaut :
Ici, nous avons changé certains styles pour le thème général et le spotlight composant à aligner avec les styles de la page.
Enregistrez les modifications et testez l’application pour voir les modifications.
Afficher la progression de la visite
Pour montrer le déroulement de la tournée, le Joyride composant accepte également un showProgress soutenir. Lorsqu’il est réglé sur truel’accessoire affiche la distance parcourue par l’utilisateur avec la visite.
Ouvrez votre src/App.js fichier et mettre à jour le Joyride composant comme indiqué ci-dessous :
Nous avons ajouté un nouveau showProgress prop pour afficher la progression de la visite à chaque étape.
Enregistrez le fichier pour voir les modifications dans votre navigateur.
Activer le saut à chaque étape
Un utilisateur particulier peut déjà être familiarisé avec l’application et souhaiter immédiatement quitter la visite. Le Joyride composant accepte également un showSkipButton prop qui, lorsqu’il est réglé sur trueajoute un bouton de saut qui peut être utilisé pour quitter la visite immédiatement.
Notez que le bouton d’annulation en haut à droite de chaque info-bulle ne fait que quitter une étape particulière et passer à l’étape suivante. Le bouton de saut termine entièrement la visite.
Ouvrez votre src/App.js fichier et mettre à jour le Joyride composant comme ceci:
Ici, nous avons ajouté le showSkipButton prop pour ajouter un bouton de saut à chaque étape.
Enregistrez le fichier pour voir les modifications dans votre navigateur.
Démarrer automatiquement la visite au chargement de la page
Jusqu’à présent, nous avons toujours dû cliquer sur la balise pour démarrer la visite. Nous pouvons également définir la visite pour qu’elle démarre automatiquement après le chargement de la page. Pour cela, il suffit d’ajouter un disableBeacon propriété à la première étape de la tournée définie dans le tableau steps. Lorsqu’il est défini sur vrai, le disableBeacon La propriété démarre automatiquement la visite au chargement de la page.
Ouvrez votre src/App.js fichier et mettre à jour le steps tableau comme indiqué ci-dessous :
const steps =[{
target:".header > h3",
content:"Welcome!! Please spare a minute to learn about our page",
disableBeacon:true,},{
target:".login",
content:"You can log in here",},{
target:".signup",
content:"Sign up here, if you're new",},{
target:".packages h3",
content:"The packages we offer",},{
target:".explore",
content:"Click here to find out more about other packages",},{
target:".footer .form",
content:"Subscribe to our newsletter here",},];
Ici, nous avons ajouté le disableBeacon propriété au premier step objet et définissez sa valeur sur true.
Enregistrez le fichier pour voir les modifications dans votre navigateur.
Conclusion
La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous avons examiné la bibliothèque React Joyride et comment l’intégrer dans une application React. Cependant, vous pouvez aller plus loin en plongeant dans le documents officiels pour en savoir plus sur d’autres choses intéressantes que vous pouvez faire avec la bibliothèque.
avril 23, 2023
Comment créer des visites guidées interactives avec React Joyride
La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous examinons Joyride et comment l’intégrer dans une application React.
L’expérience utilisateur est essentielle lorsqu’il s’agit de l’efficacité des applications Web. Vous voulez vous assurer que les utilisateurs de votre application comprennent quoi faire et comment naviguer dans les différentes sections de l’application. La création d’une visite guidée interactive de votre application peut résoudre ce problème. C’est une manière explicite de présenter l’application aux utilisateurs et de les familiariser avec ses fonctionnalités.
Bien que la plupart des bibliothèques résument le fonctionnement interne et facilitent les étapes de création de visites guidées interactives dans les applications Web, la Bibliothèque React Joyride se démarque. Il est plus flexible et permet un certain niveau de personnalisation.
Dans cet article, nous examinerons brièvement la bibliothèque React Joyride, son fonctionnement et ses différences avec les bibliothèques similaires. De plus, nous allons créer une démo d’une page de destination et y intégrer la bibliothèque React Joyride, avec quelques personnalisations. Commençons!
Configuration du projet
Exécutez la commande suivante dans votre terminal pour configurer une application React :
Ensuite, exécutez les commandes ci-dessous pour naviguer dans le dossier du projet créé et installer la bibliothèque React Joyride.
Exécutez la commande ci-dessous pour démarrer votre serveur de développement :
Un aperçu de la bibliothèque React Joyride
Le package React Joyride est très apprécié pour le développement de visites interactives d’applications Web, avec plus de 5 000 étoiles sur GitHub et un système de maintenance actif. Avec React Joyride, les utilisateurs d’une application peuvent voir ses fonctionnalités via une visite interactive, qui les invite à explorer des points d’intérêt spécifiques et met en évidence les fonctionnalités de base.
La bibliothèque React Joyride cible les éléments DOM dans une application sur laquelle elle affiche une info-bulle avec la description définie par le développeur des éléments individuels. Chaque info-bulle d’un élément pointe vers et décrit l’élément tel qu’il est défini. Sous le capot, la bibliothèque React Joyride utilise flotteur de réaction pour positionner et styliser correctement l’info-bulle.
Comparée à des bibliothèques similaires, la bibliothèque React Joyride est moins rigide et offre plus de flexibilité et de personnalisation. Il permet de redéfinir le thème de la bibliothèque pour répondre aux besoins de l’application. Il rend chaque action et événement visible pour l’utilisateur, ce qui vous permet de l’adapter à vos besoins. Il comprend également des solutions pour la majorité des cas d’utilisation des visites de produits.
Pour créer des visites interactives avec la bibliothèque React Joyride, il vous suffit d’importer son composant dans votre application et de transmettre les accessoires requis. Dans une section ultérieure, nous examinerons de près comment nous pouvons le faire. Cependant, dans la section suivante, créons une simple page d’accueil avec laquelle nous pouvons travailler.
Construire une application frontale simple
Avec React installé et notre application démarrée, construisons une version de démonstration de la page de destination d’une compagnie d’assurance. Après quoi, nous intégrerons la bibliothèque React Joyride.
Pour le style, ouvrez le
src/App.css
fichier et remplacez les styles prédéfinis par ceux-ci :Nous voulons un
Hero
composant de section pour la page qui inclut un composant d’en-tête. Nous aurons également unPackages
composant qui répertorie les offres et unFooter
composant.Dans le
src
dossier, créez un nouveau dossier nommécomponents
et ajouter unHeader.js
déposer dessus. Ouvrez lesrc/components/Header.js
fichier et ajoutez-y ce qui suit :Ici, nous avons défini la
Header
composant. Ensuite, créons unHero.js
dossier dans lesrc/components/
dossier et ajoutez-y le code ci-dessous :Ici, nous avons défini la
Hero
composant et rendu leHeader
composant avec du texte factice.Créons également un
Packages.js
dossier dans lesrc/components
dossier et ajoutez-y ce qui suit :Dans le code ci-dessus, nous avons défini un
Packages
composant qui renvoie des exemples de packages. Pour ajouter leFooter
composant, créez unFooter.js
dossier dans lesrc/components
dossier et ajoutez-y ce qui suit :Ici, nous avons défini la
Footer
composant qui affiche un formulaire de newsletter simple.Maintenant, pour rassembler tous ces composants, ouvrez le
src/App.js
fichier et remplacez le code prédéfini qu’il contient par ce qui suit :Ici, nous avons importé et rendu le
Hero
,Packages
etFooter
Composants. Nous avons également importé les styles que nous avons précédemment définis dans leApp.css
déposer.Enregistrez les modifications et prévisualisez l’application dans votre navigateur pour voir ce que nous avons.
Intégration de la bibliothèque React Joyride
La librairie React Joyride exporte un core
Joyride
composant que nous pouvons utiliser pour créer des visites dans les applications React. LeJoyride
le composant attend un requissteps
prop lors du rendu. Lesteps
prop est un tableau d’objets utilisé pour définir les différentes étapes ou phases de la visite. Letarget
etcontent
sont deux propriétés essentielles que chaque objet du tableau doit contenir.Le
target
La propriété accepte une valeur qui pointe vers l’élément approprié que nous voulons mettre en évidence pour une étape particulière de la visite. Il peut s’agir d’un sélecteur CSS ou d’un HTMLElement.Le
content
propriété, d’autre part, définit le corps de l’info-bulle. Il accepte les valeurs qui spécifient le contenu affiché pour l’étape.Il est important de noter que l’ordre dans lequel nous définissons les objets dans le
steps
array est l’ordre dans lequel la visite se déroulera.Pour voir cela en action, remplacez le contenu de votre
src/App.js
fichier comme ceci:Dans le code ci-dessus, nous avons importé et rendu le
Joyride
composant. Ensuite, nous avons défini unesteps
tableau et l’a passé comme accessoire auJoyride
composant. Notre visite devrait comporter six étapes puisque nous avons défini six objets dans lesteps
déployer. Vous pouvez toujours modifier ou modifier cela selon vos préférences.Enregistrez les modifications et testez l’application dans votre navigateur. Vous devriez voir une balise animée (un petit cercle de couleur rouge) sur le premier élément ciblé dans le
steps
déployer. Cliquez sur la balise pour démarrer la visite.Personnaliser la visite
Comme mentionné précédemment, l’un des avantages de l’utilisation de la bibliothèque React Joyride est qu’elle est moins rigide et permet une plus grande personnalisation. En plus de
steps
prop, d’autres accessoires facilitent ces personnalisations.Dans les sections suivantes, nous examinerons certains des autres accessoires. Cependant, avant de continuer, résolvons rapidement un problème de comportement avec notre visite. Vous devriez avoir remarqué que vous devez fermer chaque étape de la visite avant de passer à la suivante. Le
Joyride
composant accepte également uncontinuous
prop qui peut être utilisé pour résoudre ce problème. Il prend une valeur booléenne qui maintient la visite en mouvement lorsqu’il est défini surtrue
.Ouvrez votre
src/App.js
fichier et mettre à jour leJoyride
composant comme indiqué ci-dessous :Cela fait, vous devriez voir un bouton suivant qui peut être utilisé pour continuer la visite sans avoir à le fermer à intervalles réguliers.
Ajout de styles personnalisés
L’état actuel de notre tournée montre que le thème général par défaut du
Joyride
composant ne correspond pas au thème de notre application. Le composant accepte égalementstyles
props pour remplacer certains styles par défaut. Pour ajuster le thème général, cependant, nous devons imbriquer unoptions
objet au sein destyles
objet. Voici la valeur par défautoptions
objet, comme on le voit dans documents officiels.Le thème général prend ces valeurs, donc pour remplacer l’un des styles, nous devons le définir dans notre
options
objet imbriqué dansstyles
objet et passé comme accessoire auJoyride
composant.En plus de changer les styles du thème général, nous pouvons également remplacer les styles de certains des composants fournis avec le
Joyride
composant. Par exemple, nous pouvons remplacer les styles desspotlight
letooltip
composant, lebeacon
composant, etc. Il suffit de définir l’objet styles pour chaque composant et de les ajouter austyles
objet. Cliquez surici pour voir tous les composants remplaçables définis par la bibliothèque React Joyride.
Ouvrez le
src/App.js
fichier et mettre à jour leJoyride
composant comme ceci pour remplacer certains des styles par défaut :Ici, nous avons changé certains styles pour le thème général et le
spotlight
composant à aligner avec les styles de la page.Enregistrez les modifications et testez l’application pour voir les modifications.
Afficher la progression de la visite
Pour montrer le déroulement de la tournée, le
Joyride
composant accepte également unshowProgress
soutenir. Lorsqu’il est réglé surtrue
l’accessoire affiche la distance parcourue par l’utilisateur avec la visite.Ouvrez votre
src/App.js
fichier et mettre à jour leJoyride
composant comme indiqué ci-dessous :Nous avons ajouté un nouveau
showProgress
prop pour afficher la progression de la visite à chaque étape.Enregistrez le fichier pour voir les modifications dans votre navigateur.
Activer le saut à chaque étape
Un utilisateur particulier peut déjà être familiarisé avec l’application et souhaiter immédiatement quitter la visite. Le
Joyride
composant accepte également unshowSkipButton
prop qui, lorsqu’il est réglé surtrue
ajoute un bouton de saut qui peut être utilisé pour quitter la visite immédiatement.Notez que le bouton d’annulation en haut à droite de chaque info-bulle ne fait que quitter une étape particulière et passer à l’étape suivante. Le bouton de saut termine entièrement la visite.
Ouvrez votre
src/App.js
fichier et mettre à jour leJoyride
composant comme ceci:Ici, nous avons ajouté le
showSkipButton
prop pour ajouter un bouton de saut à chaque étape.Enregistrez le fichier pour voir les modifications dans votre navigateur.
Démarrer automatiquement la visite au chargement de la page
Jusqu’à présent, nous avons toujours dû cliquer sur la balise pour démarrer la visite. Nous pouvons également définir la visite pour qu’elle démarre automatiquement après le chargement de la page. Pour cela, il suffit d’ajouter un
disableBeacon
propriété à la première étape de la tournée définie dans le tableau steps. Lorsqu’il est défini sur vrai, ledisableBeacon
La propriété démarre automatiquement la visite au chargement de la page.Ouvrez votre
src/App.js
fichier et mettre à jour lesteps
tableau comme indiqué ci-dessous :Ici, nous avons ajouté le
disableBeacon
propriété au premierstep
objet et définissez sa valeur surtrue
.Enregistrez le fichier pour voir les modifications dans votre navigateur.
Conclusion
La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous avons examiné la bibliothèque React Joyride et comment l’intégrer dans une application React. Cependant, vous pouvez aller plus loin en plongeant dans le documents officiels pour en savoir plus sur d’autres choses intéressantes que vous pouvez faire avec la bibliothèque.
Source link
Partager :
Articles similaires