Cet article est la deuxième partie d'une série sur la façon de créer une interface utilisateur complète bibliothèque de composants pour votre organisation. Si vous avez manqué la partie 1, vous voudrez peut-être la vérifier avant de continuer.
Dans la partie 1 de cette série, vous avez appris à planifier une bibliothèque de composants d'interface utilisateur, y compris comment choisir les composants avec lesquels commencer , ainsi que le framework JavaScript à utiliser. Une fois cette préparation terminée, il est temps de commencer à coder. 🙂
Dans cet article, je vais vous guider à travers un ensemble d’étapes pour obtenir une bibliothèque de composants rapidement opérationnelle. Mon objectif sera de vous aider à mettre en place un environnement de développement qui permet de développer vos composants, et de voir également ces composants s'exécuter dans une application en direct. Je couvrirai également les versions, afin que vous puissiez avoir un package npm prêt à être distribué à d'autres développeurs de votre entreprise.
Si vous suivez le didacticiel jusqu'à la fin, vous aurez un environnement de développement pour créer votre bibliothèque qui ressemble à ceci.
Pour les besoins de cet article, nous Nous allons supposer que nous travaillons pour une société fictive nommée ACME, et que nous créons une poignée de composants que ACME utilisera dans toute leur organisation.
Commençons par créer le package npm qui contiendra tous les composants d'ACME. Pour pour ce faire, exécutez les commandes suivantes à partir de votre terminal ou de l'invite de commande pour créer un répertoire pour votre projet.
mkdir acme- components
cd acme- components
Ensuite, créez deux nouveaux sous-répertoires nommés demo et src .
mkdir demo src
L'idée ici est que le répertoire src contiendra tous les composants de votre entreprise, c'est-à-dire le véritable code source du composant, et le répertoire demo contiendra une application de démonstration qui vous permettra de tester vos composants dans une application exécutée en direct.
À ce stade, vous devriez avoir une structure de dossiers qui ressemble à ceci.
acme- components
├── démo
└── src
Dans les deux sections suivantes, nous verrons comment commencer à écrire vos composants, puis comment créer une application de démonstration afin que vous puissiez tester vos composants au fur et à mesure que vous les codez.
Commençons par les composants eux-mêmes.
Création de vos composants
Revenons à votre projet, qui a actuellement la structure de répertoires suivante:
acme- components
├── démo
└── src
Dans cette section, vous allez commencer à construire dans le répertoire src qui contiendra le code source des composants.
Pour commencer, allez-y et cd dans le src sur votre terminal ou à l'invite de commande.
cd src
Ensuite, exécutez npm init pour générer un fichier package.json pour vos composants.
npm init
La commande init commencera par vous demander un nom de package. Lorsque c'est le cas, saisissez "acme-components" sinon npm définira le nom du package sur src (car src est le nom du dossier que vous 'are in).
Ensuite, ouvrez vos trois nouveaux fichiers et collez le code ci-dessous.
REMARQUE :
- Ces composants sont volontairement simples afin que nous puissions nous concentrer sur le flux de travail. Vous allez créer des composants plus complexes dans la troisième partie de cette série d'articles.
- Si vous utilisez Angular ou Vue, vous écrirez ces composants avec la syntaxe Angular ou Vue, et non la syntaxe React que vous voyez ci-dessous.
import React de "react" ;
const Button = ( accessoires ) => {
const {type} = accessoires;
retour (
< bouton
type = {type || " soumettre "}
className = "bouton Acme" >
{props.children}
</ bouton >
)
}
export par défaut Button;
import React de "react" ;
const Input = ( props ) => {
retour (
< input { ... props } className = "acme-input" />
)
}
Exporter l'entrée par défaut;
.acme-button {
couleur : # 444 ;
fond : bleu clair;
rembourrage : 0,5em ;
border-radius : 4px ;
text-shadow : 0 1px 1px rgba (0, 0, 0, 0,2);
taille de police : 1,1em ;
}
.acme-input {
rembourrage : 0,5em ;
couleur : # 444 ;
taille de police : 1,1em ;
border-radius : 4px ;
}
L'idée ici est que ces composants Button et Input sont des composants standard à utiliser dans ACME, et le fichier theme.css fournit un moyen de styliser ces composants (et tous les futurs) de manière cohérente. [19659004] Dans la prochaine étape, vous devrez être capable d'exécuter ces composants dans un navigateur, et pour ce faire, vous devrez les exécuter à travers une compilation.
Construire vos composants
À peu près tous les modèles modernes Le framework JavaScript nécessite que vous utilisiez une étape de construction pour traiter vos fichiers source. Pour React, vous avez besoin d'un processus de construction qui peut prendre une syntaxe comme JSX, et le transformer en code que le navigateur peut interpréter et exécuter.
Bien que vous ayez des options pour faire cette compilation, la manière la plus standard de gérer cela dans Réagissez avec Babel . Dans cette section, vous allez ajouter Babel à votre projet de composant et l'utiliser pour créer un package npm que vous distribuerez à d'autres applications.
Votre première étape consiste à installer Babel dans votre projet, ce que vous pouvez faire en exécutant la commande suivante commande dans votre terminal ou invite de commande. (Et assurez-vous que vous êtes dans le répertoire src de votre projet lorsque vous exécutez ceci.)
npm install --save-dev @ babel / cli @ babel / core @ babel / preset- env @ babel / preset-react
Avec Babel lui-même, cette commande installe également les préréglages Babel qui sont des ensembles d'options de configuration. Dans ce cas, vous utilisez @ babel / preset-env qui est un ensemble courant de valeurs JavaScript par défaut, et @ babel / preset-react qui est un ensemble commun de React
CONSEIL : Il existe également un préréglage Babel populaire pour Vue .
Pour dire à Babel d'utiliser ces préréglages, allez-y et créez un .babelrc dans votre répertoire src .
acme-components /
├── démo
└── src
├── .babelrc <- ICI
├── Bouton .js
├── Entrée .js
├── package .json
└── theme.css
Ensuite, ouvrez votre nouveau fichier .babelrc et collez-le dans la configuration suivante.
{
"préréglages" : [ "@ babel / react" "@ babel / env" ]
}
ASTUCE : Vous pouvez en savoir plus sur les méthodes plus avancées de configuration de Babel sur leur documentation.
Une fois les préréglages en place, vous avez maintenant tout ce dont vous avez besoin pour construire vos composants avec Babel. Pour ce faire, ouvrez votre fichier package.json et remplacez la paire valeur / clé "scripts" actuelle par le code ci-dessous.
"scripts" : {
"build" : "babel * .js * .css package.json --out-dir ../dist --copy-files"
},
Décrivons ce qui se passe ici. Tout d'abord, l'ajout d'un nouveau script à votre fichier package.json vous donne une nouvelle commande que vous pouvez utiliser avec npm run – ce qui signifie, après avoir enregistré votre package.json avec cette modification, vous pouvez exécuter votre nouveau script "build" en exécutant npm run build .
La commande build elle-même indique à Babel d'opérer sur tous les fichiers JavaScript ( *. Js ), tous les fichiers CSS ( *. Css ) et votre fichier package.json . La commande dit de placer vos fichiers construits dans un nouveau répertoire dist ( - out-dir ../dist), et de copier tous les fichiers sur lesquels il opère dans ce nouveau répertoire ( - copy-files ).
NOTE : Par défaut, Babel copie tous les fichiers JavaScript qu'il construit dans le
- out-dir. L'option- copy-filesest nécessaire pour copier vos fichiers CSS etpackage.json.
Pour voir cela par vous-même, lancez votre compilation en exécutant la commande suivante dans votre terminal ou votre invite de commande.
npm run build
Une fois la construction exécutée, vous devriez avoir un nouveau répertoire dist contenant les versions construites de votre JavaScript fichiers.
composants-acme
├── démo
├── dist
│ ├── Bouton .js
│ ├── Entrée .js
│ ├── package .json
│ └── thème .css
└── src
└── ...
À ce stade, vous disposez d'un package npm prêt à être distribué à d'autres applications de votre organisation. Cependant, ce que vous avez est encore loin d'être idéal. Il n'y a actuellement aucun moyen de tester ces composants dans une vraie application, ce qui rend difficile le développement de nouvelles fonctionnalités sans beaucoup d'étapes manuelles.
Voyons comment créer un environnement de développement pour ces composants réutilisables.
Construire votre Démo
Dans cette section, vous allez ajouter une application de démonstration à votre projet pour tester vos composants. Vous pouvez créer votre application de démonstration avec la technologie de votre choix, mais pour ce guide, nous utiliserons Create React App afin que nous ayons un environnement React standard.
CONSEIL : Si votre Les composants seront utilisés dans plusieurs types d'environnements, il peut être judicieux de créer plusieurs applications de démonstration afin de pouvoir tester vos composants dans chacun d'eux. Dans ce cas, je vous recommande de créer plusieurs répertoires de démonstration avec des noms descriptifs, par exemple
demo-reactetdemo-angular.
Pour commencer, retournez à votre terminal ou à la commande prompt et cd dans le répertoire racine de votre projet.
acme-components <- allez ici
├── démo
├── dist
│ └── ...
└── src
└── ...
Ensuite, exécutez la commande suivante, qui utilise Create React App pour créer une nouvelle application nommée «demo».
npx create-react-app demo
Afin de utilisez vos composants dans cette nouvelle application de démonstration, vous devrez les installer. Pour ce faire, commencez par basculer vers votre répertoire demo .
cd demo
Ensuite, exécutez la commande suivante (dont nous parlerons brièvement), pour effectuer l'installation proprement dite.
npm install ../dist
Lorsque vous utilisez npm install vous souhaitez presque toujours installer les packages npm à partir du registre global npm. Par exemple, npm install react dit à npm de rechercher un package nommé "react" dans son registre et de l'installer dans votre application.
Cependant, npm peut également installer des packages locaux (c'est-à-dire un répertoire sur votre machine locale qui contient un fichier package.json ), et vous pouvez le faire en transmettant à npm un chemin vers le répertoire à installer. Dans ce cas, npm install ../dist dit à npm d'installer le package dans ../ dist dans votre application de démonstration.
Et si vous ouvrez votre application de démonstration package.json vous verrez une nouvelle dépendance pour "acme-components" .
"acme-components" : "file : ../ dist ",
Ce lien vous permet d'utiliser vos composants et vos fichiers CSS dans votre application de démonstration. Pour ce faire, ouvrez le fichier demo / src / App.js de votre projet et remplacez son contenu par le code suivant.
import Button from ' acme-components / Button »;
import Input from 'acme-components / Input' ;
import 'acme-components / theme.css' ;
fonction Application () {
retour (
<>
< h1 > Composants ACME </ h1 >
< Input /> [19659102] < Bouton > Bouton composant </ Bouton >
>
);
}
export default App;
Pour voir ce code s'exécuter dans votre navigateur, retournez à votre terminal ou à l'invite de commande et exécutez npm run start qui est le moyen intégré de Create React App pour démarrer votre application .
npm run start
Une fois la commande terminée, ouvrez votre navigateur et accédez à http: // localhost: 3000 / où vous devriez voir vos composants dans un app qui ressemble à ceci.
Dans cette section, vous allez découvrez comment configurer un flux de travail de développement qui vous permet de voir les mises à jour des composants en direct dans votre application de démonstration.
Pour ce faire, vous allez configurer un observateur qui écoute les modifications apportées aux fichiers dans votre répertoire src , puis déclenche une compilation qui met à jour le répertoire dist de votre projet.
Pour l'implémenter, retournez d'abord cd dans le répertoire src de votre projet.
composants acme
├── démo
├── dist
│ └── ...
└── src <- allez ici
└── ...
Ensuite, utilisez la commande ci-dessous pour installer le package npm-watch .
npm install --save-dev npm -watch
npm-watch est un progiciel simple qui vous permet de regarder des fichiers et d'agir lorsque ces fichiers changent. Pour l'utiliser, vous devrez apporter deux modifications au fichier src / package.json de votre projet.
Tout d'abord, remplacez les "scripts" existants du package par le code ci-dessous, qui ajoute une nouvelle commande watch qui exécute npm-watch .
"scripts" : {
"build" : "babel * .js * .css package.json --out-dir ../dist --copy-files" ,
"montre" : "montre npm"
},
Ensuite, utilisez le code ci-dessous pour ajouter une nouvelle paire clé-valeur "watch" de niveau supérieur.
"watch" : {
"build" : {
"motifs" : [ "*" ],
"extensions" : "css, js"
}
},
Le premier bit de configuration "watch": "npm-watch" fait en sorte que npm run watch appelle votre commande npm-watch nouvellement installée.
Le deuxième bit de configuration indique à npm-watch quels fichiers regarder et quelle commande exécuter lorsque ces fichiers changent. Dans ce cas, la configuration ci-dessus indique à npm-watch d'exécuter votre commande build à tout moment .css ou .js les fichiers changent dans tout
Pour tester cela, retournez à votre terminal ou à l'invite de commande, assurez-vous que vous êtes toujours dans le répertoire src de votre projet, puis exécutez npm run watch .
npm run watch
Avec l'observateur en marche, ouvrez votre fichier src / theme.css et changez couleur: # 444 en couleur: noir . Lorsque vous enregistrez votre modification, votre observateur doit détecter la modification, déclencher une nouvelle compilation et copier le fichier mis à jour dans dist / theme.css .
Maintenant que vous avez un observateur en place pour vos composants , mettons tout ensemble. Votre objectif final est d'avoir un flux de travail qui vous permet de développer vos composants tout en les voyant s'exécuter dans une application en direct. Pour ce faire, vous allez avoir besoin de deux terminaux en cours d'exécution: un qui surveille vos composants et un autre qui exécute votre application de démonstration. Plus précisément, vous devez avoir npm run watch s'exécutant dans votre répertoire src tout en ayant npm run start s'exécutant dans votre répertoire demo .
Il existe de nombreuses façons d'accomplir cela en fonction de votre terminal ou de votre client d'invite de commande, mais personnellement, j'aime configurer ce flux de travail entièrement dans Visual Studio Code.
Visual Studio Code a un terminal intégré que vous pouvez ouvrir avec Ctrl + ` (backtick). Avec le terminal ouvert, vous pouvez utiliser le bouton ci-dessous pour diviser le terminal, ce qui crée deux instances de terminal qui apparaissent côte à côte.
![Le bouton pour scinder les éditeurs "title =" Le bouton pour scinder les éditeurs "/> </p>
<p> Une fois cette division en place, vous pouvez ensuite naviguer du terminal de gauche vers votre répertoire <code> src </code> et exécuter <code> npm run watch </code>puis vous pouvez diriger votre terminal droit vers votre <code> ] demo </code> et exécutez <code> npm run start </code>. </p>
<p> <img decoding=](https://i0.wp.com/d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/split.png?w=660&ssl=1)
src et ouvrir vos fichiers de démonstration dans une colonne d'édition qui s'aligne avec votre terminal de démonstration .
Dans cet article, vous avez appris une manière avisée de configurer un environnement de développement complet pour une bibliothèque de composants.
Mais les bibliothèques de composants du monde réel sont complexes et nécessitent plus qu'un projet avec un composant Button et Input. Par conséquent, dans le dernier article de cette série, nous aborderons la création de composants plus complexes, y compris une discussion sur la question de savoir si vous devez créer vos propres composants à partir de zéro, ajouter des dépendances aux bibliothèques existantes ou faire une combinaison des deux. Nous aborderons également les options dont vous disposez pour les tests unitaires et la documentation de vos composants.
Restez à l'écoute! 🙂
Source link