Tutoriel de Storybook pour React

Storybook s'exécute parallèlement à votre application en mode développement. Il vous aide à construire des composants d'interface utilisateur (User Interface ou UI) isolés de la logique applicative et du contexte de votre application. Cette édition de Learn Storybook est pour React; d'autres éditions existent pour React Native, Vue, Angular, Svelte.

Configurer React Storybook

Voici les étapes pour configurer le processus de compilation dans votre environnement. Pour commencer, nous allons utiliser degit pour mettre en place notre système de build. L'usage de cette librairie permet de télécharger des "templates" (des mini applications construites avec une configuration par défaut) et de vous aider à développer plus vite.

Exécutez les commandes suivantes:

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn

Maintenant, nous pouvons vérifier rapidement que les différents environnements de notre application fonctionnent correctement:

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 5173:
yarn dev

Les principales modalités de notre application frontend : développement de composants (Storybook) et l'application elle-même.

Selon la partie de l'application sur laquelle vous travaillez, vous voudriez peut-être exécuter un ou plusieurs de ces modules simultanément. Comme nous nous concentrerons actuellement sur la création d'un seul composant d'UI, nous continuerons à exécuter Storybook.

Commiter les changements

À cette étape, il est préférable d'ajouter les fichiers modifiés à notre environnement de développement en local. Exécutez les commandes suivantes pour initialiser notre dépôt, et commiter les changements que nous avons faits jusque là.

git init

Suivi de:

git add .

Puis:

git commit -m "first commit"

Et enfin:

git branch -M main

Il est temps maintenant de développer notre premier composant !