Comment construire un terrain de développement pour React à l'aide de Storybook

Photo de Joshua Aragon sur Unsplash

Dernièrement, je voulais essayer de nouvelles choses et tester de nouvelles technologies ou modèles dans mes composants React. J'avais besoin d'un endroit où je pourrais tester ces choses sans lancer une nouvelle application à chaque fois.

J'ai récemment commencé à utiliser le livre de contes de React au travail afin d'établir un nouveau système de conception pour les projets futurs. Je l'ai également utilisé pour prototyper plusieurs versions d'un nouvel outil de création de contenu sur lequel notre équipe travaille. Mettre cet outil en commun avec mon désir de créer des composants et de jouer avec de nouvelles choses à faible enjeu semblait parfait. Quelques exemples de ces nouvelles «choses» sont React Context, SlateJs et React Hooks.

Cela pourrait également être utilisé comme un portfolio et un excellent moyen de présenter votre travail. Étant donné que Storybook peut être déployé sous sa propre application, vous pouvez héberger une page Web contenant une variété de projets et de composants que vous pouvez afficher pour des employeurs ou des clients potentiels. Une fois déployé, c’est aussi simple que de leur envoyer un lien vers votre livre de contes!

Cet article se concentrera sur la création de l’environnement Storybook for React et j’aurai pour objectif de publier à l’avenir ce que je crée à l’intérieur de celui-ci!

Sooo… Qu'est-ce que Storybook?

Tiré directement du site Storybook parce que je ne pourrais pas mieux le dire moi-même:

«Storybook est un environnement de développement d'interface utilisateur et un terrain de jeu pour les composants de l'interface utilisateur. Cet outil permet aux développeurs de créer des composants de manière indépendante et de les présenter de manière interactive dans un environnement de développement isolé.
Storybook s'exécute en dehors de l'application principale afin que les utilisateurs puissent développer des composants d'interface utilisateur de manière isolée sans se soucier des dépendances et des exigences propres à l'application. "

Cela signifie… que je peux créer et afficher / interagir avec des composants indépendamment de l'exécution de l'application React! Et comme ce projet ne sera pas axé sur les performances d’une seule application ou sur la sécheresse, je peux avoir plusieurs prototypes et versions de composants afin de pouvoir les perfectionner, permettre aux parties prenantes d’approuver, etc. avant de les intégrer à l’application pour laquelle elles étaient. destiné à. Je peux également l'utiliser pour m'entraîner à fabriquer des composants et à tester l'utilisation des nouvelles technologies mentionnées précédemment.

Construisons maintenant!

Créer une application de base React

npx créer-réagir-application ma-terrain de jeu

Vous pouvez vous assurer que votre application a été créée avec succès en exécutant yarn start. Une nouvelle fenêtre de votre navigateur devrait apparaître sur localhost: 3000 qui ressemble à l’image ci-dessus. Une fois confirmé, vous pouvez l'arrêter en appuyant sur + C.

Ajouter un livre de contes

Tout d'abord, à partir de la ligne de commande de votre projet, vous devrez ajouter un livre de contes à l'aide de la commande suivante:

npx -p @ storybook / cli sb init

Ensuite, vous pouvez exécuter le livre de contes en utilisant:

livre de contes

Maintenant, vous devriez être opérationnel et voir un écran dans votre navigateur comme celui ci-dessous:

vue de navigateur du livre de contes

Si vous regardez dans le dossier de votre projet, vous remarquerez que certains fichiers ont été ajoutés et que d'autres ont été mis à jour:

Le dossier ./storybook est l'emplacement où vous allez configurer de nombreux paramètres pour votre livre de contes. Il existe toutes sortes d’add-ons que vous pouvez appliquer à votre projet pour ajouter plus de fonctionnalités. Le fichier config.js est généralement l'endroit où vous allez appliquer des add-ons et également raconter un livre de contes où trouver vos histoires. La configuration par défaut est la suivante:

importer {configure} depuis '@ storybook / react';
fonction loadStories () {
  require ('../ src / stories');
}
configurer (loadStories, module);

C’est un livre de contes à regarder dans le dossier ../src/stories pour les histoires que vous avez écrites. À l’heure actuelle, le livre de contes a pris de l’avance et a ajouté quelques histoires par défaut pour vous. Vous pouvez y jeter un coup d'œil pour avoir une idée de la façon d'écrire les histoires. Vous ne faites finalement que rendre vos composants dans leurs propres fonctions et vous pouvez leur transmettre les accessoires de votre choix.

Comme vous pouvez le voir dans l'exemple ci-dessous, vous pouvez créer plusieurs versions du même composant en le rendant simplement avec des accessoires différents.

Vous pouvez imaginer que, une fois que vous aurez commencé à créer plus de composants, ce fichier pourrait devenir très volumineux et vous ne voudrez plus avoir à épeler dans votre configuration tous les fichiers contenant des récits que vous souhaitez voir rendus… Au lieu de cela, un moyen pratique de Pour ce faire, vous devez nommer n’importe quel fichier de votre dossier src avec stories.js et laisser le livre de contes trouver dynamiquement tous les fichiers nommés avec stories.js à la fin. Dans votre dossier src, vous placerez ce qui suit dans votre fichier de configuration:

importer {configure} de '@ storybook / react'
fonction loadStories () {
  const req = require.context ('../ src', true, /\.stories\.js$/)
  req.keys (). forEach (nomfichier => req (nomfichier))
}
configurer (loadStories, module)

Cela permet une structure de fichier beaucoup plus propre et vous pouvez organiser vos récits par projet ou même par composant dans votre dossier src.

Construisez vos mini projets

Construisons un petit composant à titre d'exemple pour montrer comment créer un exemple de projet rapide pour commencer à apprendre l'API de contexte de React. Dans mon dossier src, je vais créer un dossier ContextProject dans lequel je vais ajouter un fichier dans lequel je définirai mon composant, puis un autre dans lequel je définirai l'histoire:

Maintenant, lorsque je consulte mon livre de contes, je vois que j'ai une option de menu pour mon projet d'API de contexte et en dessous, je peux cliquer pour voir le composant Accueil que j'ai créé:

Et maintenant, je peux commencer à créer mon contexte et d’autres composants dans ce dossier dans src. Je serai en mesure de jouer et de restituer les composants que je construis, ce qui me permet de voir rapidement mes modifications et de ne pas avoir à me soucier de lancer une nouvelle application React chaque fois que je veux simplement tester une fonctionnalité spécifique ou une nouvelle idée.

Cela permet également beaucoup de flexibilité lorsque vous essayez de prototyper rapidement une nouvelle idée. Vous disposez déjà d'un environnement opérationnel et pouvez avoir vos bibliothèques préférées telles que des composants stylés déjà installées ou des thèmes prédéfinis qui peuvent simplement être importés dans de nouveaux projets. Vous pouvez également prédéfinir certains composants de base tels que les en-têtes stylisés, les div, les boutons, etc. que vous pouvez partager entre les projets pour accélérer encore plus le développement.

J'espère que cela vous aidera et restez à l'écoute pour les prochains articles sur mes add-ons préférés et des détails sur les projets de test que je construis dans mon livre de contes.

Bon codage!

Références:

Mon github repo: