Quoi de neuf dans React 18 ?  – Informatique CloudSavvy
Agence web » Actualités du digital » Comment démarrer une bibliothèque de composants React avec Storybook et Create-React-App – CloudSavvy IT

Comment démarrer une bibliothèque de composants React avec Storybook et Create-React-App – CloudSavvy IT

React est l’un des principaux frameworks de développement frontend avec JavaScript. Il s’agit d’une approche naturellement basée sur les composants dans laquelle vous assemblez votre application à partir d’éléments réutilisables de fonctionnalités autonomes.

Une étape logique consiste à séparer vos composants d’interface utilisateur fondamentaux de votre code d’application spécifique au scénario. La création d’une bibliothèque de composants vous donne des blocs de construction prêts à l’emploi que vous pouvez intégrer dans votre prochain projet.

Dans cet article, nous allons assembler un ensemble simple de composants React avec Storybook, puis les conditionner à l’aide de Babel. Storybook offre un moyen pratique d’inspecter les composants pendant et après leur développement. C’est une interface pour parcourir votre bibliothèque, expérimenter avec les composants inclus et faire apparaître la documentation.

Nous n’allons pas approfondir une seule technologie dans cet article : il s’agit plutôt d’un guide de présentation sur la façon de développer, de conditionner et de visualiser des composants en utilisant la combinaison de React, Storybook et Create-React-App.

Qu’est-ce qu’un livre d’histoires ?

Storybook est simplement une boîte à outils pour développer et rendre des composants de manière isolée, en dehors du contexte dans lequel ils apparaissent dans votre application. Il fournit un mécanisme pour créer des composants, documenter leurs accessoires et fournir des exemples de rendus interactifs dans une interface utilisateur Web. Storybook est indépendant du framework : vous pouvez l’utiliser avec Angular, Vue, Ember, Svelte et d’autres en plus de React.

Les composants sont créés en écrivant votre code React habituel, puis en ajoutant un deuxième fichier compagnon décrivant les « histoires » de ce composant. Votre composant réel est inchangé ; Storybook obtient toutes les informations dont il a besoin de l’accompagnement .stories.jsfichier. Storybook découvre automatiquement ces fichiers et utilise leur contenu pour créer des entrées dans l’interface utilisateur Web de votre bibliothèque.

Nous verrons le modèle en action plus tard lorsque nous arriverons à écrire des composants. Vous devez d’abord créer un nouveau projet React et y ajouter Storybook.

Initialisation de votre projet React

Nous allons utiliser la boîte à outils populaire create-react-app (CRA) pour initialiser le projet. Cela vous donne tout ce dont vous avez besoin pour créer des composants React. Il est également entièrement pris en charge par Storybook.

Ouvrez votre terminal et tapez cette commande pour créer votre bibliothèque :

npx create-react-app my-components

presse y pour confirmer l’installation de create-react-app si vous n’avez jamais utilisé l’outil auparavant. Le processus d’installation peut prendre quelques minutes. Une fois que c’est fait, dirigez-vous vers votre nouveau my-components annuaire. L’ARC aura ajouté les dépendances de React à votre package.json et échafaudé une application React de base dans le public et src répertoires.

L’ARC suppose que vous développez une base de code qui sera livrée directement au navigateur. Comme nous construisons actuellement une bibliothèque qui ne sera pas exécutée en tant qu’application autonome, vous pouvez supprimer en toute sécurité la valeur par défaut public et src répertoires si vous le souhaitez.

Ajouter un livre de contes

Il est simple d’ajouter Storybook à un projet CRA existant. L’exécution de cette commande vous donnera tout ce dont vous avez besoin :

npx sb init

Préparez-vous à attendre encore quelques minutes pendant que les packages de Storybook sont ajoutés à votre projet. Le programme d’installation créera de nouveaux .storybook et stories répertoires. Ce dernier contient un ensemble de composants d’exemple. Supprimez ce répertoire maintenant car nous ne l’utiliserons pas.

Les fichiers à l’intérieur .storybook configurer votre serveur Storybook. main.js contient des paramètres globaux tels que les modèles de nom de fichier dans lesquels rechercher des histoires. preview.js contrôle la façon dont les histoires sont rendues dans l’interface utilisateur Web Storybook. Les références de ces deux fichiers sont disponibles dans la documentation Storybook ; pour l’instant, un seul changement est nécessaire.

Par défaut, Storybook recherche des histoires dans votre stories annuaire. Cela n’a pas beaucoup de sens pour un projet qui est exclusivement une bibliothèque de composants. Nous placerons nos composants avec leurs histoires directement dans le src répertoire, en utilisant le format src/ComponentName.js et src/ComponentName.stories.js. Changer la stories champ dans votre .storybook/main.js fichier pour référencer le src répertoire au lieu de stories:

module.exports = {
    "stories": [
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    // ...
}

Cet extrait signifie que Storybook découvrira des histoires dans des fichiers du src répertoire qui ont un .stories.js suffixe; .jsx (Réagir JSX), .tset .tsx Les variantes (TypeScript) sont également prises en charge. Si vous ne souhaitez pas utiliser cette structure de fichiers, prenez le temps maintenant d’ajuster les modèles de correspondance de Storybook à votre guise.

Ecrire vos composants

Vous êtes maintenant prêt à écrire votre premier composant. Créez vos composants de la manière habituelle, en utilisant l’approche que vous préférez. Voici un bouton simple que nous souhaitons utiliser dans tous nos projets frontaux :

import PropTypes from "prop-types";
 
const styles = {
    background: "#fff",
    border: "0.2rem solid #0099ff",
    color: "#0099ff",
    letterSpacing: "0.1em",
    fontWeight: "bold",
    padding: "1em",
    textTransform: "uppercase"
};
 
const Button = ({disabled, label, onClick}) => (
    <button disabled={(disabled ? "true" : "")} onClick={onClick} style={styles}>
        {label}
    </button>
);
 
Button.propTypes = {
    disabled: PropTypes.bool,
    label: PropTypes.label,
    onClick: PropTypes.func
};
 
Button.defaultProps = {
    disabled: false
};
 
export default Button;

Créez ensuite le fichier d’histoire du composant. C’est ainsi que Storybook trouvera le composant et comprendra sa configuration.

import Button from "./Button.js";
 
export default {
    title: "Button",
    component: Button,
    args: {
        label: "Demo Button"
    }
};
 
const Template = args => <Button {...args} />;
 
const Standard = Template.bind({});
 
const Disabled = Template.bind({});
Disabled.args = {disabled: true, label: "Disabled Button"};
 
export {Standard, Disabled};

Le module default export fournit des métadonnées à Storybook. Cela doit être un objet qui inclut title et component Propriétés. le title est utilisé pour étiqueter votre composant dans l’interface utilisateur Storybook ; component est la fonction ou la classe de composant que vous exposez.

Livres d’histoire args sont équivalents à ceux de React props. le args La propriété de l’exportation par défaut définit effectivement les valeurs de prop par défaut à appliquer aux instances de composant rendues par Storybook. Ici, les boutons reçoivent une étiquette de Demo Button si l’accessoire n’est pas changé plus tard.

Les exportations nommées de votre module définissent les instances de composant réelles qui seront présentées dans votre Storybook. Au moins un est requis. Deux sont créés ici, le Standard bouton dans son état par défaut, et un Disabled bouton qui définit le disabled soutenir à true.

Démarrez maintenant le serveur de développement Storybook :

npm run storybook

de démarrage du serveur de développement Storybook

Visiter localhost:6006 dans votre navigateur pour afficher votre bibliothèque de composants. Vous devriez voir votre Button composant dans la barre latérale avec ses deux variantes d’histoire nommées. Cliquer sur l’une des histoires vous montrera l’état rendu du composant.

L’onglet « Contrôles » sous le canevas de rendu vous permet de modifier dynamiquement les valeurs des accessoires dans l’interface utilisateur de Storybook. Cela permet d’expérimenter rapidement et facilement différentes combinaisons d’accessoires lorsque vous découvrez des composants créés par d’autres. Storybook peut trouver des contrôles de différentes manières ; dans ce cas, ils viennent du propTypes affecté à la Button composant.

Storybook gère automatiquement les « actions » des composants, telles que celles de nos boutons. onClick soutenir. Dans une application réelle, vous devez fournir une fonction à cet accessoire qui sera appelée lorsque le bouton sera cliqué. Dans Storybook, cliquer sur le bouton enregistre un événement dans l’onglet « Actions » sous le canevas. Cela inclut le nom de l’accessoire appelé et les paramètres qui auraient été transmis à son rappel.

Construire avec Babel

Nous avons maintenant écrit un composant React simple, créé une histoire pour celui-ci et utilisé Storybook pour vérifier les rendus du composant comme nous l’attendions. L’étape suivante consiste à créer votre bibliothèque de composants et à l’empaqueter avec npm, prêt à être inclus dans votre prochaine application.

Malheureusement, vous ne pouvez pas simplement npm publish vos fichiers JavaScript bruts. Create React App ne transpilera pas JSX dans les packages de votre application node_modules dossier, vous obtiendrez donc une erreur de construction lorsque vous essaierez d’exécuter un projet avec vos composants. Vous devez transpiler votre bibliothèque de composants avant publication en utilisant un outil comme Babel.

Commencez par ajouter un src/index.js fichier qui exportera l’API publique de votre module :

import Button from "./Button.js";
export {Button};

Cela permettra aux utilisateurs de votre package d’accéder au Button module en écrivant :

import {Button} from "@example/example-components";

Il vous donne la liberté de modifier les chemins d’accès aux fichiers à l’avenir sans affecter les utilisateurs de votre bibliothèque. L’API publique de votre package est maintenant définie par les exportations de index.js.

Ajoutez ensuite Babel à votre projet avec la commande suivante :

npm install --save-dev 
    @babel/cli 
    @babel/plugin-transform-react-jsx 
    @babel/preset-env 
    @babel/preset-react

Créer un .babelrc fichier à la racine de votre projet avec ce contenu :

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic"
            }
        ]
    ]
}

Cette configuration Babel active la prise en charge de React avec la nouvelle transformation JSX. Cela signifie que vous n’avez pas besoin de import React from "react"; en haut de chaque fichier qui utilise JSX.

Enfin, ajoutez les lignes suivantes au scripts rubrique de votre package.json fichier:

"scripts": {
    "prepare": "npm run dist",
    "dist": "rm -rf dist/* && babel src/ --out-dir dist --copy-files --no-copy-ignored --ignore src/**/*.stories.js"
}

le prepare Le script est automatiquement exécuté par npm avant que votre package ne soit publié dans un registre. Il est utilisé ici pour compiler vos composants chaque fois que vous poussez une nouvelle version.

Vous pouvez maintenant courir npm run dist pour créer une version prête à être distribuée de votre bibliothèque. Les fichiers de sortie seront déposés au dist annuaire. C’est une bonne idée de l’ajouter à votre .gitignore fichier.

Il reste deux modifications à apporter. Tout d’abord, npm doit recevoir l’instruction de publier uniquement les fichiers construits dans votre dist annuaire. Ceci est contrôlé via le files champ dans votre package.json. Le deuxième ajustement consiste à référencer la version compilée de votre index.js comme point d’entrée du package à l’aide de main champ:

{
    "files": [
        "dist"      
    ],
    "main": "dist/index.js"
}

Vous avez terminé! Maintenant vous pouvez npm publish votre colis et npm install dans l’une de vos applications. Le package téléchargé contiendra uniquement le code compilé, dépouillé de JSX et prêt à l’emploi dans votre projet. Essayez-le avec un exemple minimal dans une nouvelle application de l’ARC :

import {Button} from "@example/example-components";
 
export default () => <Button />;

Votre composant doit apparaître de la même manière que son rendu Storybook. Toute divergence sera due à la présence de styles globaux provenant du CSS de votre application.

Conclusion

Il faut un peu de travail initial pour constituer une bibliothèque de composants React. Vous devez écrire les composants eux-mêmes, trouver un moyen de les inspecter pendant le développement, puis proposer un mécanisme permettant aux utilisateurs de découvrir, d’essayer et d’en savoir plus sur les composants disponibles. Lorsqu’il est temps de publier votre package, vous devez configurer la transpilation et configurer npm pour servir vos fichiers compilés.

Storybook résout le premier de ces défis en fournissant une interface dédiée pour le rendu et l’expérimentation des composants. Il est facile à intégrer à Create React App, ne nécessite aucune modification de vos composants réels et chevauche bien les concepts de React.

Vous pouvez résoudre les problèmes de distribution en utilisant Babel pour produire des versions transpilées de vos composants avant de les publier. npm main et files les champs sont utiles pour contrôler ce qui est empaqueté et fournir une API publique pratique aux utilisateurs. Une fois que vous avez terminé de le configurer, vous pouvez publier votre package dans le registre npm ou sur votre propre serveur privé, puis importer vos composants prédéfinis là où vous en avez besoin.

★★★★★