New
Community Showcase #5Visual test with Chromatic
Star78,756
Back to Intro to Storybook
Chapters
  • Débuter
  • Simple composant
  • Composant complexe
  • Données
  • Écrans
  • Déploiement
  • Test
  • Addons
  • Conclusion
  • Contribuer

Tutoriel de Storybook pour React

Configurer Storybook dans votre environnement de développement
Cette traduction de la communauté n'a pas encore été mise à jour avec la dernière version de Storybook. Aidez-nous à la mettre à jour en appliquant les modifications du guide français pour cette traduction. Les pull requests sont les bienvenues.

Storybook s'éxécute parallèlement à votre application en mode développement. Il vous aide à construire des composants UI(User Interface) qui sont 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 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 storybook init
Tout au long de ce tutoriel, nous allons utiliser yarn pour exécuter la majorité de nos commandes. Si vous avez déjà installé yarn, mais que vous préférez 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 6006:
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és à différents scénarios de test. Pour vous assurer que votre suite de tests fonctionnera dans son 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'exemple, 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évu, vous devrez télécharger les répertoires des polices et des icônes et placer leur contenu dans votre dossier src/assets.

npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/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 sommes d'abord en train de construire notre premier composant!

Keep your code in sync with this chapter. View b3cfa66 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Simple composant
Créer un simple composant en isolation
✍️ Edit on GitHub – PRs welcome!
Join the community
6,171 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI