Installation de l'environnement React

Installation manuelle vs installation automatique via create-react-app et Vite

Pour installer React, il faut au préalable avoir l’environnement d’exécution Node.js installé sur votre ordinateur. En effet, c’est grâce à Node.js que l’on pourra créer un projet React et gérer les dépendances dont on aura besoin tout au long du développement, en utilisant le gestionnaire de paquet NPM, ainsi que l’outil d’exécution NPX. Il est toute fois possible d’utiliser le gestionnaire Yarn qui est une version un peu plus améliorée que NPM.

La première opération consiste à créer un nouveau projet React. Pour ce faire, il y a deux grandes méthodes :

• La première méthode est la création manuelle : cela consiste à créer et gérer les dépendances manuellement. Certes, cette technique permet un meilleur contrôle et une meilleure personnalisation de l’environnement de travail. Cependant, elle peut poser un problème pour les débutants, car il faudra configurer manuellement des outils comme Webpack et Babel, ce qui n’est pas une mince à faire. Je vais expliquer l’utilité de ces deux outils dans quelques instants.
• La deuxième méthode consiste à créer automatiquement votre projet: à travers des outils dédiés à cet effet. Les plus connus sont create-react-app et Vite. Ces outils permettent d’installer et configurer automatiquement toutes les dépendances de base dont le projet a besoin. Bien entendu, cette méthode est la plus recommandée.

Webpack, Babel et ESLinit

Parmi les outils dont un projet React a besoin lors du développement il y a Webpack, Babel et ESlint.

Webpack est un module bundler pour Javascript, c’est un dire, un outil qui permet de regrouper les codes sources dans un ou plusieurs fichiers optimisés pour l’exécution sur le navigateur. En effet, comme vous allez le voir tout au long de ce cours, on crée souvent des modules personnalisés (comme les composants) que l’on importe dans le fichier principal de l’application. Au moment de l’exécution ou de déploiement du projet, tous ces modules-là sont regroupés de manière organisée et optimisée dans quelques fichiers Javascript. En plus, Webpack ne se limite pas qu’au fichiers de codes Javascript, mais il peut aussi gérer le CSS, les images, les polices etc… grâce à des fonctions nommées Loaders.

Babel est un transcompliateur (dit aussi transpileur). Un transpileur est un outil qui permet de convertir un code source d’un langage de programmation en un code source dans un autre langage. A titre d’exemple, un navigateur ne comprend pas du code écrit en Typescript, il faut donc transformer celui-ci en Javascript avant de l’exécuter. Cette transformation est assurée à l’aide d’un transpileur. Babel quant-à-lui, transforme du code Javascript ES6 et plus en code Javascript standard compris par tous les navigateurs. En effet, et comme vous allez le voir plus loin dans ce cours, on utilise généralement une écriture Javascript moderne lors du codage de l’application React. Donc, Certains codes risquent de ne pas s’exécuter correctement, surtout sur les anciens navigateurs, c’est pour cette raison que Babel intervient pour le convertir en un code compréhensible. En plus, il n’y a pas que du Javascript qui sera transpilé, mais aussi le JSX qui est incontournable dans un projet React.

ESLint est un linter (ou outil de linting) Javascript. Il s’agit d’un outil qui assure la détection et la correction des erreurs dans le code. Il veille également sur le respect d’un style particulier lors du déploiement du projet ainsi que les bonnes pratiques de codage afin d’assurer une meilleure sécurité et maintenabilité du code produit.