Dans le précédent article nous avons vu comment configurer notre projet CRA. Je vous invite évidemment à lire les deux étapes précédentes si ce n’est pas déjà le cas.

Voyons ensemble maintenant la gestion des dépendances de notre projet !

1. Trouver et installer un package

En effet un des points formidables de ReactJS est de pouvoir compter sur son énorme communauté, et notamment profiter des (très) nombreux modules disponibles en accès libre et quasi instantané.

Si vous cherchez un module une recherche Ecosia devrait suffire cependant si jamais vous pouvez directement passer par https://www.npmjs.com/ qui référence déjà l’ensemble des modules disponibles à travers npm.

Ici par exemple je recherche un module permettant de créer des Toasts : hmm si jamais cette ligne vous fait penser à un petit-déjeuner attendez voir un peu vous verrez c’est au moins tout aussi bien, je vous assure

Pour l’exemple (et pour l’avoir déjà utilisé) je vais m’arrêter sur toasted-notes. Gardons ce nom de côté.

Maintenant occupons nous d’ajouter ce package à notre projet !

Ajouter un package à notre projet ReactJS :

Se placer à la racine de notre projet
Je reprends Cmder et je me dirige à la racine de notre dossier projet.
Lancer la commande d’ajout
Ici je vais demander à yarn d’ajouter notre module :
yarn add NomDuModule (+ ici je précise une version grâce au @ pour le bien du tutoriel)
Attendre son installation
Vous devriez voir de nombreuses lignes apparaître dans votre terminal, lorsque l’installation est terminé ceci devrait s’afficher :
Notre module a été ajouté au projet !

Maintenant vérifions ce qui a changé et utilisons notre trouvaille !

2. Changements et utilisation du paquet

Plusieurs choses se sont en effet passées durant l’installation du paquet par Yarn.

Tout d’abord dans package.json :

toasted-notes a été rajouté à package.json en version 2.1.6

En effet notre package a été ajouté dans la liste des dépendances du projet dans la version que j’ai spécifié. Cela permet notamment, si le projet venait à être repris sur un autre poste de travail à spécifier lors de l’installation que le module doit être installé pour le bon fonctionnement du projet.

De plus les fichiers du module ont été rajoutés dans le dossier node_modules :

les fichiers du module ont été ajoutés au projet

Lançons maintenant notre projet (pour rappel yarn start). Notre projet étant vierge il va afficher le classique : « Edit src/App.js and save to reload. »

Et c’est ce que nous allons faire,

Ouvrez votre fichier App.js dans votre éditeur de code. Il devrait ressembler à ça :

(Vous pouvez souvent vous référer à la page du package pour une installation simplifiée, comme ici.)

Deux étapes pour notre faire fonctionner notre module :

On importe le toaster, et le css fourni avec le packager; puis on déclenche l’affichage d’un toast !

Si vous avez essayé de regarder le résultat sur votre page de développement (localhost:3000), vous voyez que React nous sort une erreur : » TypeError: Cannot read property ‘ref’ of null « .

Mais ne vous inquiétez pas tout est sous contrôle et me permet d’introduire la dernière partie :

3. Mettre à jour et supprimer

En effet en début de tutoriel j’ai fais exprès d’installer la version 2.1.6 de toasted-notes, qui n’est pas compatible avec la version de notre projet.

2 choses donc :

faites attention aux versions que vous utilisez, préférez toujours la dernière version disponible ( sauf si votre projet est lui même dans une ancienne version…)
Pour mettre à jour notre toasted-notes nous allons utiliser yarn

Tapez yarn upgrade nomDuFichier(@version)

(N’oubliez pas de quitter le programme de commandes avec un Ctrl+C)

En relançant notre projet on remarque qu’une autre erreur apparaît :

./node_modules/toasted-notes/lib/Message.jsModule not found: Can't resolve 'react-spring' in 'C:\Users\Vlad\Desktop\DIX\reacteur\node_modules\toasted-notes\lib'

Un autre point sur lequel je voulais vous alerter, faites attention aux dépendances des packages, car oui ils en ont aussi !

Ici on va simplement ajouter « react-spring » à notre projet.

(On procéde alors comme avec toasted-notes avec un yarn add…)

Et voilà notre notification sous forme de Toast s’affiche !

???? Enfin on va remettre notre projet dans l’état initial :

Pour cela je vous laisse retirer les 3 lignes de codes ajoutés précédemment dans App.js

Puis on va retirer les deux packages de notre projet toujours grâce à yarn.

Et oui pour faire d’une ligne deux coup, nous pouvons mettre les noms de modules à la suite (ça marche aussi pour yarn add #proTip)

Voilà, nous avons vu avec un exemple concret l’utilisation basique de yarn, pour rappel:

Trouver un package : https://www.npmjs.com/
➕ Ajouter : yarn add nomDuModule(@version si vous souhaitez précisiez sinon ça sera la dernière disponible)
Mettre à jour : yarn update nomDuModule(@version)
Supprimer : yarn remove nomDuModule
Pour chaque commande vous pouvez mettre plusieurs nom de packages à la suite !