Tutoriel de Storybook pour React

Configurer Storybook dans votre environnement de développement

Storybook s'éxécute parallèlement à votre application en mode développement. Il vous aide à construire des composants UI(User Interface) qui sont isolées 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 et Svelte.

Storybook et votre application

Configurer React Storybook

Voici les étapes pour configurer le processus de compilation dans votre environnement. Pour commencer, nous allons utiliser Create React App (CRA) pour mettre en place notre système de compilation, et ensuite ajouter Storybook et l'outil de test Jest dans notre application. Exécutons les commandes suivantes:

# Create our application:
npx create-react-app taskbox

cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init
Tout au long de ce tutoriel, nous allons utiliser yarn pour exécuter la majorité de nos commandes. Si vous avez deja installé yarn, mais vous préfériez utiliser npm à la place, ne vous inquiétez pas, vous pouvez toujours suivre ce tutoriel sans aucun problème. Il suffit d'ajouter le drapeau --use-npm à la première commande ci-dessus, CRA et Storybook en tiendront compte lors de leur initialisation. De plus, pendant que vous progressez dans le tutoriel, n'oubliez pas d'ajuster les commandes utilisées à leurs équivalents npm.

Pour vérifier rapidement que les différents environnements de notre application fonctionnent correctement:

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 9009:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start
Vous avez peut-être remarqué que nous avons ajouté le drapeau --watchAll à notre commande de test, ne vous inquiétez pas, c'est intentionnel, ce petit changement permettra de s'assurer que tous les tests sont effectués et que tout va bien avec notre application. Pendant que vous progressez dans ce tutoriel, vous serez exposé à différents scénarios de test. Pour vous assurer que votre suite de tests fonctionneront dans leur intégralité vous pouvez aussi ajouter ce drapeau à votre script de test dans votre package.json .

Notre application front-end se compose de trois modules: test automatisé (Jest), développement de composants (Storybook) et l'application elle-même.

les 3 modules

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.

Réutiliser les CSS

Taskbox réutilise des éléments de design du tutoriel GraphQL et React l'application d'éxample, donc ce ne sera pas necessaire d'écrire de CSS dans ce tutoriel. Copier et coller ce CSS compilé dans le fichier src/index.css.

UI de Taskbox

Si vous souhaitez modifier le styling, les fichiers sources LESS sont fournis dans le répertoire GitHub.

Ajouter les assets

Pour correspondre au design prévue, vous devrez télécharger les répertoires des polices et des icônes et placer leur contenu dans votre dossier public.

npx degit chromaui/learnstorybook-code/public/font public/font
npx degit chromaui/learnstorybook-code/public/icon public/icon
Nous utilisons degit pour télécharger les dossiers de GitHub. Si vous voulez le faire manuellement, vous pouvez récupérer les dossiers ici.

Après avoir ajouté le styling et les ressources, l'application aura un rendu un peu étrange. Ce n'est pas grave, car nous ne travaillons pas sur l'application pour l'instant. Nous somme d'abord en train de construire notre premier composant!

Next Chapter
Simple composant
Créer un simple composant en isolation