Architecturez votre projet

C'est parti pour créer une application complète avec React ! 🚀 Dans ce cours, nous allons construire ensemble le site pour l'agence de freelances Shiny. Comme vous pouvez le voir dans la maquette Figma, ce site comporte plusieurs fonctionnalités que nous construirons au fur et à mesure des notions maîtrisées. Comme pour tout projet, il faut bien commencer par quelque part : lançons-nous donc dans l'initialisation de notre app et la découverte d’ESLint et Prettier !

Installez votre app avec Create React App

Pour initialiser notre application, nous allons utiliser Create React App (CRA).

Dans votre terminal, placez-vous dans le dossier où vous souhaitez créer votre projet. Comme pour le premier cours, je me place dans le dossier  workflow  au même niveau que Downloads, Documents, etc., dans lequel je mets tous mes projets de code.

Et je fais :

npx create-react-app shiny-agency

Architecturez votre projet par modules

Maintenant que nous avons la base de notre projet, nous allons pouvoir nous décider sur son architecture.

Pas de panique ! Ici, je ne vais pas vous parler de patterns complexes. L’idée est juste de suivre des règles logiques et suffisamment claires pour que vous sachiez où placer les fichiers que vous créez, et où retrouver ceux dont vous avez besoin dans votre codebase. D’ailleurs, dans la documentation React sur la structure de fichiers, React laisse la liberté aux développeurs quant à la structure de leur projet.

Dans le chapitre "Prenez en main Create React App” du cours précédent, nous avions organisé le code de sorte à regrouper les fichiers par type : chaque fichier correspondait à un composant situé dans le dossier  /components  . Les fichiers CSS, quant à eux, se trouvaient dans le dossier  /style  , etc.

Ici, nous allons organiser nos fichiers en suivant la même logique, sauf qu'il faudra ajouter un dossier pour les "pages", qui regroupera les composants vers lesquels chacune de nos routes renverra (pas de panique si vous ne savez pas ce qu'est une route, on verra ça au prochain chapitre 😉).

Commençons donc par créer un dossier  /components  et un dossier  pages  dans  src  . Dans  /pages  , on créé un dossier  Home  et l'on y insèreApp.js  , qu'on renomme enindex.jsx. On peut ensuite supprimer tous les fichiers que nous n'utiliserons pas. 

Ce qui nous donne…

├── README.md
├── node_modules
...
├── package.json
├── public
...
├── src
│   ├── index.js
│   ├── components
│   └── pages
│       └── Home
│            └── index.jsx 
└── yarn.lock

Eh bien, ici, pas d'obligation d'utiliser l'extension  .jsx  . Votre fichier React fonctionnera très bien aussi avec une extension  .js  , mais puisqu'on peut l'utiliser, autant être explicite, n'est-ce pas ? Ainsi, vous voyez en un coup d'œil quand votre fichier contient du React, et quand il n'en contient pas. 👀

Ce qui est important pour nous est de pouvoir retrouver rapidement nos fichiers. Pour les architectures, il n'existe pas de solution parfaite à utiliser dans tous les cas. Nous devons donc essayer de trouver une organisation qui convienne. Ici, nous aurons relativement peu de fichiers, donc une structure par type devrait bien fonctionner.

On n'oublie pas de mettre à jour les paths des imports, par exemple dans  index.js à la racine de src :

import Home from './pages/Home/';

Les approches sont multiples. Lorsque vous travaillez sur une application complexe, avec plusieurs grosses fonctionnalités, vous pouvez envisager un découpage selon les fonctionnalités, par exemple. Vous trouverez un petit exemple de ce type d'organisation dans la documentation React.

Un autre type d'organisation qui fonctionne bien ces dernières années est la création et l'organisation des composants selon les principes de l'atomic design, qui facilite la collaboration avec les designers (si vous êtes curieux, vous pouvez regarder le cours Initez-vous à la méthode atomic design !). Mais dans notre cas, l'application n'a pas vocation à être très grande, et l'utilisation d'une telle structure pourrait paraître superflue. C'est pourquoi nous avons choisi d'organiser le projet de ce cours par type de fichier, afin de s'approcher au maximum de ce qui aurait été fait en entreprise.

Et voilà pour notre architecture ! Penchons-nous maintenant sur quelques outils qui nous permettent d'écrire du code plus proprement et d'éviter des erreurs communes.

Exploitez les outils ESLint et Prettier

Pour ce qui est des erreurs de code, ou tout simplement de la mise en forme, vous le savez sûrement déjà, JavaScript est très souple : pas de compilation stricte qui vous signale vos erreurs. Heureusement, il existe des outils qui permettent d'écrire du code plus propre !

Eh bien, vous vous en sortez bien actuellement, sur une codebase plutôt petite et en travaillant seul. Mais imaginez que vous travailliez dans une équipe, dans laquelle chacun a son propre style de code (mettre des points-virgules ou non, les règles d'indentation, etc.). Croyez-moi, ce n'est vraiment pas efficace. 🙈

Dans notre cas, nous allons nous intéresser à ESLint, qui va vous signaler des erreurs dans le code (aussi bien des erreurs de style que des erreurs basiques de code qui peuvent conduire à des bugs), et Prettier, qui va le formater.

Sécurisez votre code avec ESLint et son extension

Commençons donc par ESLint.

Si vous regardez votre  package.json  , vous verrez qu'ESLint fait déjà partie des outils préconfigurés par Create React App. Cet outil permet de vous signaler des erreurs de code – si vous utilisez une variable qui n'a jamais été déclarée, par exemple.

Testons dès maintenant. Dans Home/index.jsx  , je rajoute une ligne de code en faisant un console.log d'une variable non déclarée juste avant le return  :

console.log(ceciEstUneErreur)

Rien de spécial ne s'affiche. Pourtant, la variable n'est pas déclarée, donc c'est bien une erreur. 🤔

... Mais si vous n'avez pas encore installé l'extension ESLint dans votre éditeur de code (IDE), rien ne se passe.

Installons donc l'extension. Pour ma part, j'utilise VS Code qui me permet d'installer une extension directement dans l'onglet "Extensions" (cela dépend de l'IDE que vous utilisez). Une fois l'extension installée, votre éditeur de code devrait souligner votre erreur, comme ici.

Et voilà, la configuration est prête. Dans le screencast ci-dessous, nous allons en apprendre davantage sur ESLint.

Formatez votre code avec Prettier

Alors qu'ESLint vous permet de relever des erreurs de syntaxe, Prettier est la référence pour formater votre code. Contrairement à ESLint, Prettier n'est pas installé de base avec Create-React-App.

Pour vous donner une idée de la puissance de cet outil, regardez un peu ce GIF 👇 :

Pas mal, n'est-ce pas ? Alors, lançons-nous dans la config ! Pour commencer, vous pouvez installer la library (bibliothèque) dans votre terminal avec  yarn add -D prettier  .

À partir de là, l'outil est installé, mais nous devons le lancer manuellement – alors que nous voulons que Prettier fasse tout à notre place sans même avoir à y penser ! La manière la plus simple est d'installer l'extension de Prettier directement dans les extensions de votre IDE.

Pour ma part, dans VSCode, j'installe l'extension.

Il vous suffit d'aller dans les paramètres de votre IDE (  Code  >  Preferences  >  Settings dans VSCode pour Windows ) pour activer la commande  formatOnSave  . Elle permettra de formater le fichier à chaque fois que vous sauvegardez. Yay ! 🎉

Vous pouvez également aller dans la barre de recherche de votre IDE, taper "format" et activer  formatOnSave  :

Mais attendez, on n'a pas encore fini ! Nous allons aussi activer l'option qui permet d'éviter de modifier tous les fichiers à tort et à travers.

Tapez  require config  et descendez sur le paramètre correspondant à Prettier. Activez le paramètre comme ci-dessous :

Cela permet de préciser à VSCode de formater le fichier uniquement quand une configuration est présente dans le projet pour Prettier.

Donc à nous d'en créer une !

À la racine de votre projet, créez un fichier  .prettierrc  dans lequel vous allez pouvoir préciser quelques règles. Vous trouverez l'ensemble de ces règles dans la documentation de Prettier. Typiquement, si vous voulez supprimer tous les points-virgules, vous faites :

{
"semi": false
}

Et voilà, si vous retournez dans votre fichier  Home/index.jsx  , vous aurez bien du code sans les points-virgules !

Félicitations ! Vous venez de configurer avec succès ESLint et Prettier avec leurs extensions, vous n'aurez plus à vous soucier du formatage de votre code ou bien de faire des erreurs d'inattention ! 🤗

C'est maintenant le moment de passer à la pratique par vos propres moyens !

Exercez-vous !

Dans le chapitre précédent, je vous avais parlé de notre exercice fil rouge : créer le site pour l'agence de freelances Shiny.

Eh bien au travail !

Vous avez déjà créé la base de code du projet. Maintenant, je vous demande de :

• Installer et configurer Prettier de sorte à avoir :

{
"semi":false,
"singleQuote": true,
"tabWidth": 2
}

• Modifier les fichiers JavaScript en fonction du style défini dans  .prettierrc  .

Vous trouverez la solution de l’exercice sur le repository GitHub de ce cours, sur la branche P1C1-Solution.

En résumé

• Lorsque vous initialisez un projet, il est important de réfléchir un minimum à son organisation. 

• ESLint est un outil permettant de signaler les erreurs de code. Combiné avec son extension dans votre éditeur de code, cela vous permet de repérer instantanément vos erreurs.

• Prettier est l'outil de formatage de code de référence pour faciliter la collaboration sur une codebase.

Alors, ça vous a plu d'initialiser votre projet, de l'organiser et d'utiliser des outils indispensables pour travailler en entreprise ? Ça tombe bien, parce que dans le prochain chapitre, vous allez apprendre à sécuriser vos props avec les propTypes !
On se retrouve tout de suite ! 🚀