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.
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:
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.
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.
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.
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.
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:
Pour exécuter Storybook, exécuter NPM Exécuter Storybook et ouvrir l'adresse affichée ( https://www.php.cn/link/93E4D71066625E1B0F2EB8AF065C83452 :
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)
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)
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.
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.
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".
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.
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.
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)
.storybook/addons.js et configurez-le en fonction de la documentation. 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!
CPU
paramètres des variables d'environnement Java
Pourquoi l'ordinateur redémarre-t-il automatiquement ?
Quels sont les attributs du javabean ?
La différence entre le masque de pâte et le masque de soudure
Dernières tendances des prix du Bitcoin
Apprenez le C# à partir de zéro
Comment fermer le port 445
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
