PC & Mobile

Créez votre propre bibliothèque React en 2020: étape par étape

Créez votre propre bibliothèque React en 2020: étape par étape


Publication de vos composants React dans NPM

2020Tout au long de ma carrière React, mon objectif principal était de créer des applications. Bien que la construction de ma propre bibliothèque NPM m'intéresse, elle me semble quelque peu hors de portée. Ce n'est pas. La publication d'un composant React sur NPM que d'autres développeurs peuvent utiliser est un processus simple et peut être incroyablement gratifiant. Cette année à venir est un bon moment pour élargir nos horizons et voir comment nous pouvons utiliser nos compétences React pour redonner à la communauté.

Aujourd'hui, nous allons construire un exemple de composant à publier sur NPM, un simple widget Medium. Le composant prendra un nom d'utilisateur comme accessoire, puis récupérera la dernière activité de l'utilisateur. Les histoires et les commentaires de l'utilisateur seront affichés dans un modal.

Vous pouvez insérer ce widget dans votre site Web pour montrer vos histoires moyennes. Jouez avec la démo et recherchez votre nom d'utilisateur pour avoir une idée de son fonctionnement.

Installer créer-réagir-bibliothèque globalement:

npm install -g create-react-library

Lancer une bibliothèque:

créer-réagir-bibliothèque

Vous serez invité à saisir les informations suivantes:

Utilisez le modèle par défaut

Tout sera désormais emballé et prêt à partir pour vous.

Étape 1: CD dans le projet et exécutez npm start. Cela permettra de regarder la src / module et recompiler en dist / chaque fois que vous apportez des modifications.

Étape 2: ouvrez une deuxième ligne de commande, entrez /Exemple dossier et exécuter npm start.

Nous avons maintenant un serveur en direct qui surveille les changements dans src ou Exemple et rechargez en temps réel pour développer facilement votre composant.

Voici à quoi devraient ressembler ces étapes:

Nous travaillerons avec deux fichiers principaux.
1: src / index.js
2: exemple / src / App.js

Le premier fichier (src / index.js) est notre composant exporté qui sera utilisé par d'autres développeurs.

Ce fichier contiendra un composant qui recevra les accessoires de l'utilisateur et produira une sorte de résultat.

Remarquerez que nous vérifions les types d'accessoires reçus. Par exemple, nous autoriserons l'utilisateur à passer un accessoire de «taille» (un nombre) qui redimensionnera le bouton Moyen. Cela signifie que nous devons ajouter taille: Proptypes.number à nos proptypes.

src / index.js

Le deuxième fichier (exemple / src / App.js) est un exemple d'application qui importe notre composant.

Il donnera les accessoires du composant et produira le résultat. C'est ce qui fonctionnera sur notre navigateur.

exemple / src / App.js

Maintenant que nous avons les deux fichiers dont nous avons besoin, nous pouvons commencer à construire notre composant dans src / index.js.

Notre composant affichera simplement un bouton sur lequel l'utilisateur peut cliquer pour récupérer l'activité de l'utilisateur moyen.

Une fois cliqué, un modal s'ouvre et affiche les données utilisateur récupérées. Ajoutez des états de vérification et de chargement des erreurs, et nous avons un composant entièrement fonctionnel.

Afin d'utiliser des packages externes (comme react-simple-modal) nous devons les ajouter à notre package.json, à la fois comme peerDependencies et comme devDependencies. Ajoutez les dépendances suivantes au package.json principal:

"react-fade-in": "^ 0.1.6",
"simple-react-modal": "^ 0.5.1"

Maintenant simplement installation de fil à partir du répertoire principal et npm start à partir du répertoire principal et du répertoire d'exemple à nouveau.

Nous pouvons maintenant utiliser les packages react-fade-in et simple-react-modal dans notre composant, et lorsque d'autres développeurs installeront notre package, ils installeront également le peerDependencies associé avec.

Génial, maintenant nous pouvons réellement construire notre composant.

J'ai construit une API qui récupère le flux RSS d'un utilisateur moyen et l'ai hébergé sur Heroku. Pour la portée de cet article, je vous demanderai simplement de copier l'intégralité du composant dans src / index.js parce que nous aimerions nous concentrer sur publication du composant sur NPM.

Copiez le code suivant dans src / index.js, en remplaçant tout le contenu précédent:

Le bouton sera une image (medium.png), alors allez-y et téléchargez l'image d'ici et placez-la dans le / src dossier.

C'est ça! Maintenant, dirigez-vous vers exemple / src / App.js et remplacez le contenu par le code suivant:

Nous avons simplement importé le Profil moyen composant de «react-medium-profile», lui fournir un Nom d'utilisateur prop, et il peut désormais récupérer notre profil.

Assurez-vous que vous êtes connecté à NPM en premier en utilisant connexion npm, puis exécutez:

npm publier: Cela publie automatiquement votre package dans NPM

npm run deploy: Cela déploie automatiquement votre exemple sur les pages Github

Voir notre projet complet sur Github

L'écriture composants pour développeurs plutôt que d'écrire applications pour les utilisateurs vous expose à une façon différente de penser. C'est une excellente pratique et fait de vous un programmeur plus fort et est un excellent moyen de redonner à la communauté open source.

Assurez-vous d'écrire un joli LISEZMOI avec quelques gifs pour rendre votre package plus attrayant et intuitif, et ajoutez quelques instructions pour savoir quels accessoires sont disponibles pour passer.

C'est ça! Si vous recherchez plus de conseils React pour 2020, découvrez comment mettre à niveau votre React UX pour l'année à venir:

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer