React JS

1. 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 !
Pour initialiser notre application, nous allons utiliser Create React App (CRA).
Installez votre app avec Create React App

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
Accueil
> Cours
> Créez une application React complète
> Architecturez votre projet

2. 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 :
Magnifique, n'est-ce pas ? 🤩
React App" si vous avez le moindre doute, ou si vous voulez en apprendre davantage sur
cet outil.
npx create-react-app shiny-agency
C’est parti pour Shiny Agency !

3. 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 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 :
Ce qui nous donne…
Architecturez votre projet par modules

... son architecture ? Une architecture même en front ?!
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 !
javascript
import Home from './pages/Home;
├── README.md
├── node_modules
...
├── package.json
├── public
...
├── src
1

4. 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.
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.
│ ├── 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 !?
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 ?
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

5. 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.
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
intéresse, vous pourrez en apprendre davantage sur l'organisation et le nommage des
fichiers dans cet article (en anglais).
Exploitez les outils ESLint et Prettier

Écrire du code plus proprement ? Pourquoi perdre du temps à configurer des outils, alors
que je m'en sors très bien comme ça ?
02:52

6. 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 :
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.
javascript
console.log(ceciEstUneErreur)
La voilà notre erreur !
1

7. 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 👇 :
03:43

8. 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
) 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 :
Bien pratique de tout formater en un clic, n'est-ce pas ?
OK super ! Et maintenant ? 🤔
L’extension Prettier dans VSCode
Le paramétrage à activer dans VSCode pour formater en sauvegardant

9. 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 :
Et voilà, si vous retournez dans votre fichier Home/index.jsx , vous avez bien :
Activez cette option dans vos paramètres pour formater uniquement les
fichiers qui ont une config Prettier
javascript
{
"semi": false
}
1
2
3

10. 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 !
Au revoir les points-virgules !
Exercez-vous !


11. 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 :
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.
Lorsque vous initialisez un projet, il est important de réfléchir un minimum à son
organisation.
javascript
{
"semi":false,
"singleQuote": true,
"tabWidth": 2
}
En résumé

1
2
3
4
5

12. 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É
TIREZ LE MAXIMUM DE CE COURS

TRANSFORMEZ VOTRE APPLICATION
EN SINGLE PAGE APPLICATION AVEC
REACT ROUTER

Le professeur
Développeuse Fullstack React/Node freelance passionnée par le frontend 👩‍💻
Alexia Toulmet
OPENCLASSROOMS
OPPORTUNITÉS
AIDE
POUR LES ENTREPRISES
EN PLUS
Français