Initier un projet React

L'outil de création create-react-app

Pour initier un projet React, commencez par créer un dossier dans l’emplacement de votre choix.
Passez sur la ligne de commande à l’aide de votre terminal préféré, ou directement à l’aide du terminal embarqué dans votre éditeur de code. Placez-vous dans le dossier que vous venez de créer, puis tapez la commande suivante:
Cela permet juste d’afficher la version de Node.js que vous avez. Autrement dit, c’est un moyen de s’assurer si Node.js est installé correctement.

Maintenant, on tape la commande suivante:
Là, on a utilisé l’outil d’exécution npx pour exécuter l’outil create-react-app qui automatise la création et la configuration minimale du projet React. Quand je dis minimale, cela sous-entend que seuls les modules de bases sont installés. C’est-à-dire qu’on sera forcément amené à installer d’autres modules par nous-même quand on en aura besoin.

Cette opération peut prendre quelques dizaines de secondes. Donc, patientez jusqu’à la fin de l’installation.

Utiliser l'outil Vite

On peut également créer une application React à l’aide de l’outil Vite, qui est un peu plus performant que create-react-app. Il suffit pour cela d’exécuter les commandes suivantes:
@latest signifie que l’on demande à installer les dernières versions de dépendances disponibles.

--template react signifie que l’on souhaite créer un projet React. En effet, Vite permet également de créer des projets VueJS, Svelte, Angular, SolidJS, Qwik, ou encore react-ts pour utiliser une version Typescript du projet React.

npm install ordonne le téléchargement et l’installation les dépendances nécessaires.

Notez qu’on peut aussi créer un projet React avec le gestionnaire de paquets yarn comme ceci:
Si yarn n’est pas disponible alors il faut d’abord l’installer avec la commande suivante:
-g signifie une installation globale du gestionnaire yarn. Donc il ne sera pas installé que pour le projet courant, mais sera accessible depuis d’autres projets.
On va supposer que l’on a créé notre projet avec l’outil create-react-app.

Si on explore le répertoire qui contient notre projet, on notera la présence de nombreux fichiers et dossiers.

Examinons rapidement ces éléments-là :

Le dossier node_modules contient les codes sources des modules téléchargés.

Le dossier public, contient les assets publics accessibles directement depuis le navigateur, dont le fichier index.html qui constitue la vue principale de notre application React.

En effet, toutes les interfaces utilisateurs que nous allons créer dans notre projet seront visibles à travers le fichier index.html. D’ailleurs, React permet de monter ce que l’on appelle Single Page Application (ou SPA) . C’est-à-dire que toute notre application est accessible depuis un seul fichier HTML et c’est le Javascript qui va assurer le rafraîchissement des vues selon l’action de l’utilisateur (sans pour autant recharger la page entière).

D’ailleurs, si on explore le contenu de ce fichier-là, on se rendra compte qu’il compte une seule balise div identifiée par root dans son corps. Cette balise est sensée accueillir les vues de notre application en créant le DOM dynamiquement avec du Javascript. Nous allons voir tout cela en détail dans les vidéos qui vont suivre.
Le dossier src est sans doute, le dossier le plus important de l’application React. En effet, il contient les composants et la logique de l’application ainsi que d’autre ressources que l’on peut importer comme les styles ou même les images.

Là encore, on peut identifier certains fichiers comme index.js et app.js ainsi que des fichiers CSS. Mais on ne va pas entrer dans les détails tout de suite. Néanmoins, sachez que le fichier app.js constitue le composant principal de l’application.

Le fichier.gitignore indique les ressources à ne pas suivre par le système de gestion de versions, et par conséquent ne seront pas ajoutés au dépôt Git.

Le fichier package.json contient les métadonnées d’un projet Node.js (et pas seulement React). Il renferme des informations comme le nom du projet, sa version, sa description, la liste des dépendances, ainsi que les scripts qui constituent les commandes à exécuter pour mener des tâches comme le démarrage ou le déploiement de l’application.

Enfin package-lock.json permet de maintenir (ou verrouiller) les versions utilisées dans le projet courant. Par conséquent, si on souhaite travailler dessus en utilisant une autre machine, les dépendances avec les versions exactes seront installées. C’est surtout utile quand plusieurs développeurs travaillent sur le même projet, ce qui garantit la cohérence de celui-ci.

Il est toutefois possible d’identifier des fichiers ou dossiers supplémentaires, comme reportWebVitals.js qui se trouve dans le dossier src et qui permet de mesurer les performances de l’application pour le SEO en suivant les métriques définies par Google, ou encore setupTests.js qui sert à configurer les tests unitaires avec le framework Jest etc… mais ceux qu’on a vu précédemment restent les plus communs et les plus importants.

Vu le caractère unopinionated de React qui lui procure une grande flexibilité, il est possible de créer d’autres fichiers et dossiers et les inclure dans le projet. D’ailleurs, c’est une pratique très courante en React qui permet d’avoir un projet organisé.

Maintenant que nous avons pu identifier l’environnement de travail, il est temps de lancer notre application sur le navigateur. Il suffit de taper la commande
Cela permet de lancer l’application en mode développement qui sert l’application en utilisant un serveur local via le port 3000 par défaut. C’est l’une des caractéristiques de l’outil create-react-app qui identifie également tout changement dans le composant principal de l’application pour rafraîchir automatiquement l’affichage. Nous allons voir tout cela en détails dans les leçons qui vont suivre.

Créer un projet React - Installation des dépendances nécessaire en vidéo