Dans le précédent article nous avons vu comment initialiser un projet ReactJS à l’aide de la boîte à outil Create React App.
Aujourd’hui voyons ensemble la suite logique, c’est à dire les configurations de base sur notre projet.
et pour cela commençons par…
1. Faire le tour de notre projet
⏮️ Reprenons le projet que nous avons crée dans le dernier article.
J’ouvre le dossier avec un éditeur de code : Sublime Text.
Passons en revue rapidement ce qu’on voit :
Public : Le contenu de ce dossier est envoyé au client sans traitement supplémentaire de WebPack. Ici on retrouve le index.html où l’on pourra changer nos métas, les assets du projet, robots.txt qui servira à donner des informations aux robots pour son SEO et enfin manifest.json que nous allons voir après.
src: Comme son nom suggère c’est ici que nous allons placer les sources du projet ; càd le code qui sera traité par webpack. Pour le moment il n’y a que qqs fichiers, mais dans le futur nous pourrons y ajouter un dossier pour ajouter des components etc…
Readme.md : N’hésitez pas à bien lire le contenu de ce fichier, il est fait par les développeurs pour vous aiguiller plus loin dans la compréhension du projet et des fonctionnalités, énormément de ressources y sont liées et expliquent tout ce dont vous pourriez avoir besoin !
.gitignore : Ce fichier va vous intéresser si vous travaillez avec GitHub ; vous allez pouvoir notamment inscrire quels dossiers/fichiers ne seront pas pris en compte dans un commit.
Maintenant que nous avons fait le tour nous allons pouvoir configurer deux choses…
2. Configurer la gestion du cache – affichage offline
Grâce à la configuration préparée par CreateReactApp nous allons pouvoir activer le ServiceWorker (SW). Le SW permettra une gestion du cache plus efficace pour des chargements plus rapides mais aussi un accès offline à votre page. Je vous invite à consulter la documentation Mozilla ou cet article de makinaCorpus pour comprendre cette technologie.
Pour l’activer il suffit de se rendre dans index.js
Notre projet étant une WebApp, nous allons aussi pouvoir configurer son comportement lorsqu’il est ajouté en tant qu’application (avec un raccourci) par un device Android ou sur Windows.
Ici dans l’ordre vous allez pouvoir donner un nom à votre application, un logo mais aussi les couleurs de la fenêtre.
Pour en apprendre plus je vous invite à consulter cette doc de Google.
Et enfin..
3. Modifier le package.json
Voici l’explication option par option :
name : Vous avez compris, c’est le nom de votre appli.
version : Vous pouvez gérer cette info pour votre versionning.
private : Cela signifie que votre appli est privée, ce garde-fou vous évitera de publier le projet en public dans l’environnement npm.
dependencies : Ici on retrouve une liste de tous les modules installés ainsi que leur version. (Nous allons voir la gestion des modules dans un prochain article).
scripts : Ensemble des raccourcis de commande pour votre projet. Je vous ai dis de taper « npm start » (dans le précédent article) pour lancer le projet, et bien sans ces raccourcis il faudrait taper « react-scripts start »
eslintConfig et browserslist : Deux ajouts récents à la configuration de projet Create React App, l’un permet de spécifier les options de Javascript que vous souhaitez activer ou non, l’autre de préciser la compatibilité navigateurs.
Et voilà nous avons configuré les informations principales de notre projet Create React App !
