Au début d'un projet frontal, une belle interface est généralement con?ue en premier. Vous planifiez et dessinez soigneusement tous les composants de l'interface utilisateur et leurs différents états et effets. Cependant, les choses ont tendance à changer pendant le développement. De nouvelles demandes et des cas d'utilisation imprévus en émergent les uns après les autres. La belle bibliothèque de composants initialement magnifique ne couvre pas tous ces besoins, vous devez continuer à ajouter de nouveaux designs.

Si vous avez des experts en conception autour de vous pour le moment, c'est génial, mais ils sont souvent passés à d'autres projets, laissant les développeurs seuls à gérer ces changements. En conséquence, la cohérence de la conception commence à diminuer. Il est difficile de suivre les composants existants dans la bibliothèque de composants, leur statut et leur apparence.

Pour éviter cette confusion de conception, il est généralement préférable de créer des documents distincts pour tous les composants. Bien qu'il existe une variété d'outils disponibles à cet effet, cet article se concentrera sur un livre de contes React, un outil con?u spécifiquement pour les applications React. Il vous permet de parcourir facilement une collection de composants et leurs fonctions. La bibliothèque de composants native React est un exemple d'une telle application.

Points clés

• Simplifiez le développement de l'interface utilisateur: réagir le livre de contes simplifie le processus de développement et de gestion des composants de l'interface utilisateur, permettant aux développeurs de construire des composants indépendamment et de visualiser leur comportement en temps réel.
• Collaboration améliorée: Il sert de plate-forme de collaboration qui comble l'écart entre les concepteurs, les développeurs et d'autres parties prenantes en fournissant un seul emplacement à visualiser et à interagir avec tous les composants de l'interface utilisateur.
• Personnalisable et évolutif: Fournit une large gamme d'options de personnalisation avec des modules complémentaires et des paramètres de configuration, permettant aux développeurs de personnaliser des outils à leurs besoins de projet spécifiques.
• prend en charge les tests automatisés: s'intègre à la plaisanterie et à d'autres cadres de test pour faciliter les tests automatisés directs dans l'environnement de développement des composants de l'interface utilisateur.
• largement polyvalent et évolutif: adapté aux petits et grands projets, et prend en charge d'autres cadres JavaScript autres que réagir, ce qui en fait un choix polyvalent pour une variété d'équipes de développement.

Pourquoi avez-vous besoin d'un livre de contes React?

Alors, comment cet écran peut-il aider? Pour répondre à cette question, essayons d'énumérer les personnes impliquées dans le développement des composants de l'interface utilisateur et d'évaluer leurs besoins. Selon votre flux de travail, cette liste peut varier, mais comprend généralement les éléments suivants:

Designer ou UX Expert

Responsable de l'apparence et de la sensation de l'interface utilisateur. Une fois la phase du prototype du projet terminé, le concepteur quitte généralement l'équipe. Lorsque de nouvelles exigences surviennent, ils doivent comprendre rapidement l'état actuel de l'interface utilisateur.

développeur

Les développeurs sont ceux qui créent ces composants et peuvent être les principaux bénéficiaires du guide de style. Les développeurs ont deux cas d'utilisation principaux: être capable de trouver les bons composants de la bibliothèque et de les tester pendant le développement.

testeur

Le testeur vérifiera soigneusement que les composants sont mis en ?uvre comme prévu. L'un des principaux emplois des testeurs est de s'assurer que les composants fonctionnent correctement dans tous les aspects. Bien que cela n'élimine pas le besoin de tests d'intégration, il est généralement plus pratique que de le faire seul dans le projet lui-même.

propriétaire de produit

re?oit le personnel de conception et de mise en ?uvre. Le propriétaire du produit doit s'assurer que chaque partie du projet est conforme aux attentes et que le style de marque est cohérent.

Vous avez peut-être remarqué que toutes les personnes concernées sont en commun, c'est avoir un seul emplacement avec tous les composants. Trouver tous les composants du projet lui-même peut être très fastidieux. Pensez-y, combien de temps faut-il pour trouver toutes les variantes de bouton possibles dans le projet (y compris leur statut (handicapé, primaire, secondaire, etc.)? Par conséquent, avoir une bibliothèque distincte serait beaucoup plus pratique.

Si je vous ai convaincu, voyons comment mettre en place un livre de contes dans votre projet.

Set React Storybook

Pour créer un livre de contes React, vous avez d'abord besoin d'un projet React. Si vous n'avez pas de projet approprié pour le moment, vous pouvez facilement en créer un avec Create-React-App.

pour générer un livre de contes, veuillez installer GetttoryBook mondialement:

<code>npm i -g getstorybook</code>

Ensuite, accédez à votre projet et exécutez:

<code>getstorybook</code>

Cette commande effectuera les trois opérations suivantes:

• installer @ kadira / livre de contes dans votre projet.
• Ajoutez des scripts de livre de contes et de constructeurs de constructeurs dans votre fichier package.json.
• Créez un dossier .storybook avec configuration de base et un dossier d'histoires avec des exemples de composants et d'histoires.

Pour exécuter Storybook, exécuter NPM Exécuter Storybook et ouvrir l'adresse affichée ( http://www.miracleart.cn/link/93E4D71066625E1B0F2EB8AF065C83452 :

Ajouter un nouveau contenu

Maintenant que nous avons le livre de contes React en cours d'exécution, voyons comment ajouter de nouveaux contenus. Chaque nouvelle page est ajoutée en créant une histoire. Ce sont des extraits de code qui rendent le composant. L'exemple d'histoire générée par GettStoryBook est illustrée ci-dessous:

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

histoires de la fonction crée une nouvelle partie dans le menu de navigation, et la méthode ADD crée un nouveau sous-parti. Vous pouvez organiser vos livres de contes à volonté, mais vous ne pouvez pas créer des hiérarchies qui dépassent deux niveaux. Un moyen simple d'organiser un livre de contes est de créer des sections de niveau supérieur communes pour des groupes d'éléments connexes, tels que "Form Entrée", "navigation" ou "widgets" et sous-parties de composants individuels.

Vous pouvez librement choisir où placer le fichier de l'histoire: dans un dossier d'histoires distinct ou à c?té des composants. Personnellement, je préfère ce dernier parce que la mise en place d'histoires avec des composants les aide à garder accessible et à jour.

Les histoires sont chargées dans le fichier .storybook / config.js, qui contient le code suivant:

<code>npm i -g getstorybook</code>

Par défaut, il charge le fichier SRC / Stories / index.js et s'attend à ce que vous y importez votre histoire. C'est un peu gênant car cela nous oblige à importer chaque nouvelle histoire que nous créons. Nous pouvons modifier ce script pour charger automatiquement toutes les histoires à l'aide de la méthode requise.Contex de WebPack. Pour distinguer les fichiers d'histoire du reste du code, nous pouvons conventionner pour y ajouter l'extension .stories.js. Le script modifié doit ressembler à ceci:

<code>getstorybook</code>

Si vous utilisez un dossier différent comme code source, assurez-vous de le pointer vers le bon emplacement. Rediger un livre de contes pour que les modifications prennent effet. Le livre de contes sera vide car il n'importe plus le fichier index.js, mais nous résoudrons ce problème bient?t.

(Le contenu suivant est essentiellement cohérent avec le texte d'origine, et effectuez un petit ajustement pour maintenir la sémantique inchangée, et les descriptions partielles sont simplifiées)

écrivant une nouvelle histoire

Maintenant que nous avons légèrement modifié le livre de contes pour répondre à nos besoins, écrivons notre première histoire. Mais nous devons d'abord créer un composant à afficher. Créons un composant de nom simple qui affiche le nom dans un bloc coloré. Ce composant aura le JavaScript et CSS suivant.

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

Vous avez peut-être remarqué que ce composant simple peut avoir trois états: par défaut, surligné et désactivé. Ne serait-il pas agréable de visualiser tous ces états? écrivons une histoire pour cela. Créez un nouveau fichier name.stories.js à c?té de votre composant et ajoutez ce qui suit:

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(() => {
    const req = require.context('../src', true, /.stories\.js$/);
    req.keys().forEach(filename => req(filename));
  },
  module
);

Ouvrez le livre de contes et consultez vos nouveaux composants. Les résultats doivent être les suivants:

N'hésitez pas à modifier la fa?on dont le composant est affiché et son code source. Notez qu'en raison de la fonction de rechargement chaud de React, les modifications apparaissent immédiatement dans votre livre de contes chaque fois que vous modifiez une histoire ou un composant, sans rafra?chir manuellement le navigateur. Cependant, lorsque vous ajoutez ou supprimez des fichiers, une actualisation peut être nécessaire. Les livres d'histoires ne remarquent pas toujours ces changements.

(Le contenu suivant est également rationalisé et ajusté pour maintenir la cohérence sémantique)

Afficher la personnalisation

Si vous voulez changer la fa?on dont l'histoire est affichée, vous pouvez l'envelopper dans un conteneur. Cela peut être fait en utilisant la fonction adddecorator. Par exemple, vous pouvez ajouter un titre "Exemple" à toutes les pages en ajoutant le code suivant à .storybook / config.js:

import React from 'react';
import './Name.css';

const Name = (props) => (
  <div className={`name ${props.type}`}> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;

Vous pouvez également personnaliser des pièces distinctes en appelant Adddecorator après les histoires.

a publié votre livre de contes

Une fois que vous avez fait le travail de votre livre de contes et que vous pensez qu'il est prêt à être publié, vous pouvez le construire en tant que site Web statique en fonctionnant:

.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

Par défaut, StoryBook est intégré dans le dossier du livre de contes. Vous pouvez modifier le répertoire de sortie à l'aide du paramètre -o. Il vous suffit maintenant de le télécharger sur votre plateforme d'hébergement préférée.

Si vous travaillez sur un projet sur GitHub, vous pouvez publier votre livre de contes en le construisant dans le dossier DOCS et en le poussant vers le référentiel. GitHub peut être configuré pour fournir votre site Web GitHub Pages à partir de là. Si vous ne souhaitez pas enregistrer le livre de contes construit dans le référentiel, vous pouvez également utiliser le livre de contes.

Build Configuration

Le livre de contes est configuré pour prendre en charge de nombreuses fonctionnalités de l'histoire. Vous pouvez l'écrire dans la même syntaxe ES2015 que Create-React-App, cependant, si votre projet utilise une configuration BABEL différente, il ramassera automatiquement votre fichier .babelrc. Vous pouvez également importer des fichiers et des images JSON.

Si vous pensez que cela ne suffit pas, vous pouvez ajouter une configuration Webpack supplémentaire en créant un fichier webpack.config.js dans le dossier .storybook. Les options de configuration exportées par ce fichier seront fusionnées avec la configuration par défaut. Par exemple, pour ajouter une prise en charge de SCSS à votre histoire, ajoutez simplement le code suivant:

<code>npm i -g getstorybook</code>

N'oubliez pas d'installer Sass-chargeur et Node-Sass.

Vous pouvez ajouter n'importe quelle configuration Webpack requise, cependant, vous ne pouvez pas remplacer l'entrée, la sortie et le premier chargeur Babel.

Si vous souhaitez ajouter différentes configurations pour les environnements de développement et de production, vous pouvez exporter une fonction. Il sera appelé en utilisant la configuration de base et la variable ConfigType définie sur "Development" ou "Production".

étendre les fonctionnalités avec des modules complémentaires

Le livre de contes lui-même est très utile, mais pour l'améliorer, il a des modules complémentaires. Dans cet article, nous ne couvrons que certains d'entre eux, mais assurez-vous de consulter la liste officielle plus tard.

(Les parties suivantes sont rationalisées et l'introduction de l'addon est ajustée)

Le livre de contes est livré avec deux modules complémentaires préconfigurés: actions et liens. Vous n'avez pas besoin de faire une configuration supplémentaire pour les utiliser.

• Actions: vous permet de journaliser les événements déclenchés par composant dans le panneau de journalisation d'action.
• Liens: vous permet d'ajouter la navigation entre les composants.

Boutons: vous permet de personnaliser les composants en modifiant les propriétés REACT directement à partir de l'interface utilisateur lors de l'exécution. Méthode d'installation: npm i --save-dev @storybook/addon-knobs, Méthode d'enregistrement: importation dans .storybook/addons.js. Utilisez le décorateur withKnobs pour envelopper l'histoire.

Info: vous permet d'ajouter plus d'informations sur l'histoire, telles que son code source, sa description et React ProPtypes. Méthode d'installation: npm i --save-dev @storybook/addon-info, méthode d'enregistrement: utilisez .storybook/preview.js dans addDecorator.

Test automatique

Un aspect important du livre de contes (non décrit dans cet article) est de l'utiliser comme plate-forme pour exécuter des tests automatisés. Vous pouvez effectuer une variété de tests, des tests unitaires aux tests fonctionnels et aux tests de régression visuelle. Comme prévu, il existe des modules complémentaires con?us pour améliorer la fonctionnalité du livre de contes en tant que plate-forme de test. Nous n'entrerons pas dans les détails car ils méritent des articles séparés, mais voulons toujours les mentionner.

• Spécifications: vous permet d'écrire des tests unitaires directement dans le fichier de l'histoire.
• StoryShots: vous permet d'effectuer des tests d'instantanés de plaisanterie basés sur l'histoire.

livre de contes en tant que service

Kadira propose également un livre de contes en tant que service appelé Storybook Hub. Il vous permet d'accueillir des livres d'histoires et de faire passer la collaboration au niveau supérieur. En plus des fonctionnalités standard, il s'intègre à GitHub et peut générer un nouveau livre de contes pour chacune de vos demandes de traction. Vous pouvez également laisser un commentaire directement dans le livre de contes pour discuter des changements avec vos collègues.

Conclusion

Si vous pensez que le maintien des composants de l'interface utilisateur dans votre projet commence à devenir douloureux, prenez du recul et voyez ce qui vous manque. Vous avez peut-être besoin d'une plate-forme de collaboration pratique entre toutes les parties impliquées. Dans ce cas, pour votre projet React, StoryBook est l'outil parfait pour vous.

utilisez-vous déjà un livre de contes? Envisagez-vous de l'essayer? Pourquoi? Ou pourquoi pas? J'adorerais vous entendre dans les commentaires.

(la pièce FAQ est rationalisée et la structure est ajustée)

FAQ (FAQ)

• En quoi React Storybook est-il différent des autres outils de développement de l'interface utilisateur? React Storybook permet aux développeurs de construire des composants indépendamment, ce qui rend le processus de développement plus rapide et plus efficace, et fournit un environnement de test visuel en temps réel.
• Puis-je utiliser React Storybook dans d'autres frameworks JavaScript? Oui, il prend en charge des frameworks comme Vue.js et Angular.
• Comment ajouter des modules complémentaires à mon livre de contes? Installez via NPM ou YARN, ajoutez au fichier .storybook/addons.js et configurez-le en fonction de la documentation.
• Quelle est la courbe d'apprentissage du livre de contes React? Si vous connaissez JavaScript et réagissez, vous devriez pouvoir commencer bient?t.
• Puis-je utiliser React Storybook pour de grands projets? Oui, il est utilisé par de grandes organisations telles que Airbnb, IBM et Lyft.
• Comment partager mon livre de contes avec les autres? Il peut être déployé sur des services gérés statiques tels que les pages GitHub ou Netlify à l'aide de Storybook Deployeur.
• Puis-je tester mes composants dans React Storybook? Oui, il fournit un environnement de test visuel et peut être intégré à des bibliothèques de tests telles que la plaisanterie.
• Comment personnaliser l'apparence d'un livre de contes? StoryBook offre des options telles que la personnalisation du thème, la configuration de webpack personnalisée et la création de modules complémentaires personnalisés.
• Puis-je utiliser React Storybook pour le développement d'applications mobiles? Oui, il prend en charge React Native.
• est-ce que React Storybook est open source? Oui, il est hébergé sur GitHub et accueille les contributions des développeurs du monde entier.

En bref, le texte d'origine a été considérablement réécrit pour le rendre plus concis et lisse, et a maintenu la signification d'origine. Le format d'image reste le même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!