L'un des avantages de l'utilisation de React est que vous pouvez créer des composants d'interface utilisateur, les réutiliser dans toute votre application et, en fin de compte, éviter l'attrition du code. Pourtant, il est difficile de créer des composants d'interface utilisateur complètement indépendants avec React seul. Vous devrez créer des vues qui affichent ces composants pour les voir.
C'est là qu'intervient Storybook. Il vous permet de créer et de tester des composants d'interface utilisateur dans un environnement d'exécution indépendant et dans ce didacticiel, vous apprendrez à l'utiliser dans React. À la fin de cet article, vous aurez créé un composant de bouton et documenté certains de ses états possibles dans React.
Qu'est-ce qu'un livre d'histoires ?
Livre d'histoires est un outil de développement qui vous permet d'exécuter et de tester vos composants d'interface utilisateur sans un environnement React complet. Cela fait développement piloté par les composants plus facile car vous pouvez développer les composants de manière isolée.
Avec Storybook, une fois que vous avez créé un composant, vous pouvez créer plusieurs histoires qui définissent les différents états du composant. Pour un composant de bouton, ces états peuvent inclure l'état principal, l'état secondaire, l'état désactivé, etc.
Étant donné que Storybook vous permet d'inclure du code lors de la création des histoires, il peut également servir d'outil de documentation.
Pour utiliser Storybook, vous devez avoir Node installé sur votre machine et avoir une compréhension de base de React.
Création d'une application réactive
Pour commencer à utiliser Storybook, vous allez d'abord créer un projet React puis créer des composants et leurs histoires.
Exécutez la commande suivante pour créer une application React :
npx créer-react-app btn-storybook
Cela générera un dossier appelé btn-storybook avec toutes les dépendances dont une application React a besoin.
Ensuite, en quelques étapes supplémentaires, vous pouvez installer et exécuter Storybook.
Installation du livre de contes
Accédez au dossier btn-storybook et installez storybook :
CD btn-livre d'histoires
initialisation du livre de contes npx
Puisque vous avez utilisé create-react-app, c'est la seule commande que vous devez exécuter pour configurer Storybook. Storybook installera toutes les dépendances nécessaires et effectuera toute la configuration nécessaire. Il créera également des histoires passe-partout pour vous aider à démarrer.
Une fois la commande ci-dessus terminée, démarrez le livre de contes en utilisant le code suivant.
livre de contes de course npm
Cela ouvrira le tableau de bord du livre de contes dans votre navigateur. Ça devrait ressembler a quelque chose comme ca:
Création du composant de bouton
Dans le dossier ./src, créez un dossier appelé Composants et créez-y un autre dossier appelé Bouton. Le dossier Button doit se trouver dans ce chemin: ./src/Components/Button.
Maintenant, dans ce dossier, créez Button et ajoutez le code suivant :
importer Types d'accessoires de "types d'accessoires"
bouton de fonction ({ étiquette, couleur de fond = "#6B4EFF", couleur = "blanche", borderRadius="48px", bordure="rien"}) {
constante style = {
Couleur de l'arrière plan,
rembourrage: "0.5rem 1rem",
Couleur,
rayon de bordure,
frontière
}
revenir (
<style de bouton={style}>
{étiquette}
</button>
)
}
Bouton.propTypes = {
étiquette: Types d'accessoires.chaîne de caractères,
Couleur de l'arrière plan: Types d'accessoires.chaîne de caractères,
Couleur: Types d'accessoires.chaîne de caractères,
frontière:PropTypes.string,
borderRadius: Types d'accessoires.chaîne de caractères,
}
exporterdéfaut Bouton;
Ce composant accepte certains Réagissez les accessoires qui incluent le libellé du bouton et ses styles. Vous utilisez également propTypes pour vérifier les types d'accessoires transmis et déclencher un avertissement si vous utilisez le mauvais type. Le composant renvoie un élément de bouton.
Création des histoires de boutons
Lorsque vous avez installé Storybook dans le projet React, il a généré un dossier contenant des exemples d'histoires, nommé histoires. Accédez à ce dossier et supprimez tout ce qu'il contient. Vous allez créer les histoires à partir de zéro.
Vous allez créer deux histoires représentant le bouton principal et le bouton secondaire. Chacun de ces boutons a un style différent qui le sépare du reste. Vous pourrez voir chacun d'eux dans le tableau de bord Storybook une fois que vous aurez créé les histoires.
Dans le dossier stories, créez un nouveau fichier appelé button.stories.js. Il est important d'inclure .histoires avant .js car c'est ce que dit Storybook qui est un fichier d'histoires.
Importez le composant Button.
importer Bouton de "../Composants/Bouton/Bouton"
Exportez ensuite le titre du composant et le composant lui-même. Notez que le titre est facultatif.
exporterdéfaut {
Titre: "Composants/Bouton",
composant: Bouton,
}
La première histoire que vous allez créer est destinée au bouton principal. Créez donc une nouvelle fonction appelée Primary et exportez-la.
export const Primaire = () =><Couleur de fond du bouton="#6B4EFF" étiquette="Primaire"/>
Maintenant, si vous accédez au tableau de bord Storybook, vous pourrez voir le bouton rendu.
Pour modifier le composant rendu en direct et changer son état sur le tableau de bord Storybook, vous utiliserez args. Args vous permet de passer des arguments à Storybook qui, lorsqu'ils sont modifiés, entraînent le rendu du composant.
Pour définir les arguments de l'histoire du bouton, créez un modèle de fonction.
Modèle const = args =><Bouton {...args}/>
Ce modèle accepte les arguments et les transmet en tant qu'accessoires au composant Button.
Vous pouvez maintenant réécrire l'histoire principale en utilisant le modèle comme indiqué ci-dessous.
exporterconstante Primaire = Template.bind({})
Primaire.args = {
Couleur de l'arrière plan: "#6B4EFF",
étiquette: "Primaire",
}
Si vous consultez le tableau de bord Storybook, vous devriez voir les contrôles en bas. Ces commandes vous permettent de modifier l'affichage du bouton. Vous pouvez modifier la couleur d'arrière-plan, la couleur du texte, l'étiquette, la bordure et le rayon de la bordure.
Il vous suffit de modifier les valeurs args pour créer les autres histoires. Par exemple, pour créer un bouton secondaire, utilisez le code suivant.
exporterconstante Secondaire = Template.bind({})
Secondaire.args = {
Couleur de l'arrière plan: "#E7E7FF",
Couleur: "#6B4EFF",
étiquette: "Secondaire",
}
Sur le tableau de bord Storybook, accédez à différentes histoires en cliquant dessus dans la barre latérale. Vous verrez comment chacun rend. Vous pouvez continuer à ajouter d'autres états aux histoires de boutons comme vous le souhaitez. Essayez d'ajouter un plan ou une histoire de plan.
Test des composants de l'interface utilisateur
Ce didacticiel vous a donné une brève introduction à l'utilisation de Storybook avec les composants de l'interface utilisateur React. Vous avez appris à ajouter Storybook à un projet React et à créer une histoire de base pour un composant Button avec des arguments.
Vous avez peut-être remarqué qu'au cours de ce processus, vous testiez le rendu du composant de bouton dans différents états. Vous écrivez peut-être plus de code, mais une fois que vous aurez écrit les histoires des composants, vous minimiserez les erreurs qui pourraient survenir lors de la réutilisation des composants dans votre application. De plus, il sera plus facile de retrouver l'erreur si elle se produit. C'est la beauté du développement piloté par les composants.
