Créer des applications React avec Storybook

À propos de l'auteur

Développeur de logiciels, rédacteur technique et passionné de résolution de problèmes basé à Lagos, au Nigeria. Lorsqu'il n'écrit pas ou ne résout pas de problèmes sur LeetCode, il est…
En savoir plus sur
Abdulazeez
…

Storybook est un explorateur d'interface utilisateur qui facilite la tâche de tester les composants pendant le développement. Dans cet article, vous apprendrez en quoi consiste le livre de contes et comment l'utiliser pour créer et tester des composants React en créant une application simple. Nous commencerons par un exemple de base qui montre comment travailler avec un livre d'histoires, puis nous allons créer un livre d'histoires pour un composant de table qui contiendra les données des élèves.

Le livre d'histoires est largement utilisé dans la construction de terrains de jeux en direct et la documentation bibliothèques de composants, comme vous avez le pouvoir de modifier les valeurs des accessoires, vérifiez les états de chargement parmi d'autres fonctionnalités définies.

Vous devez avoir une connaissance de base de React et de l'utilisation de NPM avant de poursuivre cet article, car nous allons créer une poignée des composants React.

Storybook Stories

Une histoire est une fonction exportée qui rend un état visuel donné d'un composant basé sur les cas de test définis. Ces histoires sont enregistrées sous l'extension .stories.js . Voici un exemple d'histoire:

 import React de 'react';
importer un échantillon de './x';

export par défaut {
    title: 'Exemple d'histoire',
    composant: échantillon
}

fonction d'exportation Story () {
    revenir (
        
    )
} 

L'avantage du storybook est que ce n'est pas différent de la façon dont vous écrivez généralement les composants React, comme vous pouvez le voir dans l'exemple ci-dessus. La différence ici est qu'à côté du composant Story nous exportons également un objet qui contient les valeurs du titre de notre histoire et le composant auquel l'histoire est destinée.

Starting Out

Commençons par construire l'exemple de base mentionné ci-dessus. Cet exemple nous familiarisera avec la création d'histoires et à quoi ressemble l'interface des histoires.
Vous allez commencer par créer l'application React et y installer Storybook.

Depuis votre terminal, exécutez la commande ci-dessous:

 # Scaffold a new application.
npx create-react-app table-component

# Naviguez dans le dossier nouvellement créé.
composant de table cd

# Initialisez le livre d'histoires.
npx -p @ storybook / cli sb init 

Après cela, vérifiez que l'installation a réussi en exécutant les commandes suivantes:

Dans un terminal:

 yarn start 

et dans l'autre:

 yarn storybook 

Vous serez accueilli par deux écrans différents: l'application React et l'explorateur de contes.

Une fois le livre d'histoires installé dans nos applications, vous allez supprimer les histoires par défaut situées dans src / stories Dossier

Construire une histoire Hello world

Dans cette section, vous allez écrire votre première histoire, pas encore celle du composant table. Cette histoire a pour but d'expliquer les concepts du fonctionnement d'une histoire. Fait intéressant, vous n'avez pas besoin de faire fonctionner React pour travailler avec une histoire.

Puisque les histoires React sont des fonctions React isolées, vous devez d'abord définir un composant pour l'histoire. Dans le dossier src créez un dossier components et un fichier Hello.js à l'intérieur, avec le contenu ci-dessous:

 import React from 'react' ;

Exporter la fonction par défaut Hello ({name}) {
  revenir (
    
 Bonjour {name} !, c'est un simple composant Hello world 
  )
} 

C'est un composant qui accepte un accessoire name il rend la valeur de name à côté de certains textes. Ensuite, vous écrivez l'histoire du composant dans le dossier src / stories dans un fichier nommé Hello.stories.js :

Tout d'abord, vous importez React et le composant Hello: [19659010] import React de 'react';
import Hello from '../components/Hello.js';[19659011Oftvouscréezuneexportationpardéfautquiestunobjetcontenantletitreetlecomposantdel'histoire:

 export default {
  title: 'Hello Story',
  composant: Bonjour
} 

Ensuite, vous créez votre première histoire:

 fonction d'exportation HelloJoe () {
  revenir (
    
  )
} 

Dans le bloc de code ci-dessus, la fonction HelloJoe () est le nom de l'histoire, le corps de la fonction abrite les données à rendre dans le livre de contes. Dans cette histoire, nous rendons le composant Hello avec le nom «Jo Doe».

Ceci est similaire à la façon dont vous rendriez généralement le composant Hello si vous vouliez créer utilisation de celui-ci dans un autre composant. Vous pouvez voir que nous transmettons une valeur pour l'accessoire name qui doit être rendu dans le composant Hello .

Votre explorateur de contes devrait ressembler à ceci:

L'histoire Hello Joe est répertoriée sous le titre de l'histoire et déjà rendue. Chaque histoire doit être exportée pour être répertoriée dans le livre de contes.

Si vous créez d'autres histoires avec le titre Hello Story elles seront répertoriées sous le titre et en cliquant sur chaque histoire, le rendu sera différent. Créons une autre histoire:

 fonction d'exportation TestUser () {
    revenir (
        
    )
} 

Votre explorateur de livres d'histoires doit contenir deux histoires:

Certains composants rendent les données conditionnelles en fonction de la valeur des accessoires qui leur est transmise. Vous allez créer un composant qui restitue les données de manière conditionnelle et tester le rendu conditionnel dans le livre de contes:

Dans le fichier de composant Hello créez un nouveau composant:

 function IsLoading ({condition}) {
    if (condition) {
        revenir (
            
 Chargement en cours 
        )
    revenir (
        
 Voici votre contenu 
    )
} 

Pour tester le comportement de votre nouveau composant, vous devrez créer une nouvelle histoire pour celui-ci. Dans le fichier d'histoire précédent, Hello.stories.jsx créez une nouvelle histoire:

 import Hello, {IsLoading} from '../components/Hello';

fonction d'exportation NotLoading () {
    revenir (
        
    )
}

fonction d'exportation Chargement () {
    revenir (
        
    )
} 

Le rendu de la première histoire diffère du rendu de la deuxième histoire comme prévu. Votre explorateur de livres doit ressembler à ceci:

Vous avez appris les bases de la création d'histoires et de leur utilisation. Dans la section suivante, vous allez créer, styliser et tester le composant principal de cet article.

Construction d'un composant de table

Dans cette section, vous allez créer un composant de table, après quoi vous écrirez une histoire pour le tester

L'exemple de composant de table servira de support pour afficher les données des étudiants. Le composant tableau aura deux en-têtes; noms et parcours.

Commencez par créer un nouveau fichier Table.js pour héberger le composant dans le dossier src / component . Définissez le composant de table dans le fichier nouvellement créé:

 import React from 'react';

Table de fonction ({data}) {
    revenir ()
} 

Le composant Table prend une valeur prop data . Cette valeur prop est un tableau d'objets contenant les données des élèves d'une classe particulière à rendre. Écrivons le corps du tableau:

Dans les parenthèses de retour, écrivez le morceau de code suivant:

     {data}
    

    

        

            
 Nom 
   
            
 Cours enregistré 
        
    
            
    

 

Le code ci-dessus crée un tableau avec deux en-têtes, Nom et Cours enregistré . Dans le corps du tableau, les données des élèves sont rendues. Étant donné que les objets ne sont pas des enfants valides dans react, vous devrez créer un composant d'assistance pour rendre les données individuelles.

Juste après le composant Table définissez le composant d'assistance. Appelons-le RenderTableData :

 function RenderTableData ({data}) {
    revenir (
        <>
            {data.map (étudiant => (
                
                     {nom.étudiant} 
                     {cours.étudiant} 
                
            ))}
        >
    )
} 

Dans le composant RenderTableData ci-dessus, le prop de données qui sera un tableau d'objets sera mappé et rendu individuellement sous forme de données de table. Une fois le composant d'aide écrit, mettez à jour le corps du composant Table de:

 {data} 

à

 {data
?
    
:
    
         Aucune donnée sur les élèves disponible 
         Aucune donnée sur les élèves disponible 
    
} 

Le nouveau bloc de code restitue les données sur les élèves à l'aide du composant d'aide s'il y a des données présentes, sinon, retournez " Aucune donnée d'élève disponible. »

Avant de passer à l'écriture d'une histoire pour tester le composant, stylisons le composant tableau. Créez un fichier de feuille de style dans le dossier des composants:

 body {
    poids de la police: gras;
}
table {
    border-collapse: effondrement;
    largeur: 100%;
}
table, th, td {
    bordure: 1px solide RVB (0, 0, 0);
    text-align: gauche;
}
tr: nth-child (pair) {
    couleur d'arrière-plan: rgb (151, 162, 211);
    la couleur noire;
}
th {
    couleur de fond: rgba (158, 191, 235, 0,925);
    Couleur blanche;
}
th, td {
    rembourrage: 15px;
} 

Une fois le style terminé, créons deux histoires pour tester le comportement du composant de table. La première histoire aura des données transmises pour être rendues et la seconde non.

Vous pouvez également styliser l'histoire différemment.

Dans votre dossier stories créez un nouveau fichier Table .stories.js . Commencez par importer react, le composant table et définissez l'histoire:

 import React de 'react';
importer une table depuis '../components/Table';

export par défaut {
    title: 'Composant de table',
    composant: Table
} 

Une fois l'histoire définie, créez des données factices pour la première histoire:

 const data = [
    {name: 'Abdulazeez Abdulazeez', course: 'Water Resources and Environmental Engineering'},
    {name: 'Albert Einstein', course: 'Physics'},
    {name: 'John Doe', course: 'Estate Managment'},
    {name: 'Sigismund Freud', course: 'Neurology'},
    {name: 'Leonhard Euler', course: 'Mathematics'},
    {name: 'Ben Carson', course: 'Neurosurgery'}
]

Ensuite, vous écrirez la première histoire nommée ShowStudentsData :

 fonction d'exportation ShowStudentsData () {
    revenir (
        
    )
} 

Ensuite, dirigez-vous vers l'onglet de l'explorateur de livres d'histoires pour vérifier l'histoire. Votre explorateur devrait ressembler à ceci:

Vous avez testé le composant avec des données et il rend parfaitement. La prochaine histoire sera de vérifier le comportement s'il n'y a pas de données transmises.

Juste après la première histoire, écrivez la deuxième histoire, EmptyData :

 fonction d'exportation ExportData () {
    revenir (
        
    )
} 

L'histoire ci-dessus devrait rendre «Aucune donnée disponible». Dirigez-vous vers l'explorateur de livres d'histoires pour confirmer qu'il rend le message exact. Votre explorateur de contes devrait ressembler à ceci:

Dans cette section, vous avez écrit un composant de table et une histoire pour tester le comportement. Dans la section suivante, vous allez voir comment éditer des données en temps réel dans l'explorateur de livres de contes à l'aide des boutons .

Addons

Addons in storybook are fonctionnalités supplémentaires qui sont implémentées en option par l'utilisateur. Ces fonctionnalités supplémentaires peuvent être nécessaires pour vos histoires. Storybook fournit quelques modules complémentaires de base, mais vous pouvez installer et même créer des modules complémentaires adaptés à votre cas d'utilisation, tels que modules complémentaires de décoration .

Un décorateur est un moyen d'envelopper une histoire dans des fonctionnalités de «rendu» supplémentaires. De nombreux addons définissent des décorateurs afin d'augmenter vos histoires avec un rendu supplémentaire ou de rassembler des détails sur la façon dont votre histoire est rendue.
– Storybook docs

Adding Knobs Addon To Our Table Story

addon décorateur et l'un des plus utilisés dans Storybook. Il vous permet de changer les valeurs (ou accessoires) des composants sans modifier la fonction d'histoire ou le composant lui-même.

Dans cette section, vous allez ajouter l'addon boutons à notre application. L'addon de boutons facilite le stress d'avoir à mettre à jour manuellement les données de vos histoires en configurant un nouveau panneau dans l'explorateur de livres d'histoires où vous pouvez facilement modifier les données transmises. Sans boutons, vous devrez revenir à la modification manuelle de vos données.

Cela serait inefficace et cela irait à l'encontre de l'objectif du livre d'histoires – en particulier dans les cas où ceux qui ont accès aux histoires n'ont pas accès pour modifier les données dans le code.

L'addon boutons n'est pas installé avec le livre d'histoires, vous devrez donc l'installer en tant que package indépendant:

 yarn add -D @ storybook / addon- boutons 

Une fois l'addon installé, enregistrez-le sous le tableau addons dans votre configuration d'histoires située dans .storybook / main.js .

 module.exports = {
    histoires: ['../src/**/*.stories.js'],
    modules complémentaires: [
        '@storybook/preset-create-react-app',
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs' // Add the knobs addon.
    ],
}; 

Avec l'addon enregistré, vous pouvez maintenant implémenter l'addon des boutons dans votre histoire de table. Les données de l'étudiant sont de type objet, par conséquent, vous utiliserez le type objet de l'addon boutons .

Importez le décorateur et les fonctions d'objet après les importations précédentes :

 import {withKnobs, object} from '@ storybook / addon-knobs'; 

Juste après le champ de composant dans l'exportation par défaut, ajoutez un autre champ:

 decorators: [withKnobs] 

C'est-à-dire , votre objet de définition d'histoire doit ressembler à ceci:

 export default {
    title: 'Composant de table',
    composant: Table,
    décorateurs: [withKnobs]
} 

L'étape suivante consiste à modifier notre composant Table dans l'histoire ShowStudentsData pour permettre l'utilisation du bouton objet :

avant:

  [19659011] après: 
 
 

Le premier paramètre de la fonction objet est le nom à afficher dans la barre des boutons . Cela peut être n'importe quoi, dans ce cas, vous l'appellerez data.

Dans votre explorateur de contes, la barre de boutons est maintenant visible:

Grand aperçu )

Vous pouvez désormais ajouter de nouvelles données, modifier les données existantes et supprimer les données sans modifier directement les valeurs du fichier d'histoire.

Conclusion

Dans cet article, vous avez appris ce qu'est le livre de contes et construit un composant de tableau pour compléter les explications. Désormais, vous devriez être capable d'écrire et de tester des composants lors de vos déplacements à l'aide de storybook.

De plus, le code utilisé dans cet article se trouve dans ce référentiel GitHub.

Liens externes

Le meilleur outil 2023 pour ta croissance Instagram !

Source link