Tutoriel de Storybook pour React
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.
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
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
--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.
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.
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
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!