Vous êtes sur la page 1sur 13

Accueil

> Cours
> Créez une application React complète
> Architecturez votre projet

Créez une application React complète

12 heures Moyenne

Mis à jour le 24/11/2021

 

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

Comme vous l’avez probablement déjà fait, je passerai rapidement sur les commandes, et
sur pourquoi utiliser CRA. N'hésitez pas à jeter un œil au chapitre "Prenez en main Create
React App" si vous avez le moindre doute, ou si vous voulez en apprendre davantage sur
cet outil.

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

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.

Lorsque vous utilisez des frameworks tels que Next ou Gatsby, une structure de fichiers
toute faite vous sera déjà proposée. Je vous conseille d'y jeter un œil si vous avez
l'occasion !

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

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

Dans notre codebase, nous allons organiser nos fichiers de sorte à avoir  
/NomDuComposant/index.jsx   . Cette approche présente des avantages (notamment de
ne pas avoir à nous répéter lorsqu'on importe nos fichiers), mais peut aussi paraître un
peu désorganisée dans tous vos onglets d'IDE. Comme pour tout en code, il existe
plusieurs manières de faire ; à vous de voir ce qui vous convient, et de vous adapter
lorsque vous travaillez sur une codebase qui est un peu différente. Si ce sujet vous
intéresse, vous pourrez en apprendre davantage sur l'organisation et le nommage des
fichiers dans cet article (en anglais).

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.

02:52

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

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

La voilà notre erreur !

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

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

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

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

1 {

2 "semi": false

3 }

Et voilà, si vous retournez dans votre fichier   Home/index.jsx   , vous avez bien :
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 :
javascript

1 {

2 "semi":false,

3 "singleQuote": true,

4 "tabWidth": 2

5 }

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

INDIQUER QUE CE CHAPITRE N'EST PAS TERMINÉ

TRANSFORMEZ VOTRE APPLICATION


 TIREZ LE MAXIMUM DE CE COURS EN SINGLE PAGE APPLICATION AVEC 
REACT ROUTER

Le professeur
Alexia Toulmet
Développeuse Fullstack React/Node freelance passionnée par le frontend 👩‍💻

OPENCLASSROOMS

OPPORTUNITÉS

AIDE

POUR LES ENTREPRISES

EN PLUS

Français
 

Vous aimerez peut-être aussi