• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 20/05/2022

Architecturez votre projet

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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
La commande npx create-react-app shiny-agency se lance dans le terminal
C’est parti pour Shiny Agency !

Magnifique, n'est-ce pas ? 🤩

Architecturez votre projet par modules

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

... son architecture ? Une architecture même en front ?!

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 met  App.js  , qu'on renomme en  Home.jsx  .

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

import Home from './pages/Home;

Ce qui nous donne…

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

… quoi ?.jsx? Depuis quand on a besoin d'une extension de fichier particulière pour coder en React !? 

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.

Entre le cours précédent et celui-là, ça fait deux fois qu'on utilise la même structure. Qu'est-ce qu'on aurait pu faire d'autre ?

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 !

Écrire du code plus proprement ? Pourquoi perdre du temps à configurer des outils, alors que je m'en sors très bien comme ça ?

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.

Dans notre IDE, la variable non déclarée, ceciEstUneErreur, est soulignée en rouge dans le console.log.
La voilà notre erreur !

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 👇 :

Tout le code est formaté au moment de la sauvegarde
Bien pratique de tout formater en un clic, n'est-ce pas ?

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  .

OK super ! Et maintenant ? 🤔

À 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.

L’extension Prettier dans VSCode
L’extension Prettier dans VSCode

Il vous suffit d'aller dans les paramètres de votre IDE (  Code  >  Preferences  >  Settings  ) 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  :

Le paramétrage à activer dans VSCode  pour formater en sauvegardant
Le paramétrage à activer dans VSCode pour formater en sauvegardant

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 :

Option VSCode permettant de formater uniquement les fichiers qui ont une configuration Prettier
Activez cette option dans vos paramètres pour formater uniquement les fichiers qui ont une config Prettier

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 avez bien :

Au moment de la sauvegarde, les points-virgules du fichier du code disparaissent.
Au revoir 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 allez dès maintenant créer la base de code du projet. Voici les premières étapes :

  • Initialiser le projet avec Create React App.

  • Renommer le fichier  index.js  à la racine de  /src  en  index.jsx  .

  • Créer un dossier  /components  et un dossier  /pages  dans  /src  .

  • Déplacer le fichier  App.js  dans  /Pages  , y créer un dossier  /Home  et le renommer en  index.jsx  .

  • Supprimer les fichiers que vous n'estimez pas utiles pour le moment.

  • 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 ! 🚀

Exemple de certificat de réussite
Exemple de certificat de réussite