Dans cette leçon vidéo en français, l'instructeur guide les développeurs débutants à travers la création d'un projet React, en détaillant les prérequis (Node.js, npm/npx, Yarn) et les deux approches principales : la configuration manuelle et l'utilisation d'outils automatisés comme Create React App (CRA) et Vite. Il explique le rôle des outils essentiels du workflow (Webpack, Babel, ESLint), montre les commandes concrètes pour initier un projet avec CRA (npx create-react-app .) et Vite (npm create vite@latest --template react), ainsi que les alternatives avec Yarn. L’auteur décrit ensuite la structure typique d’un projet React généré – dossiers node_modules, public (index.html), src (index.js, App.js, CSS, éventuels fichiers de performance et de test), .gitignore, package.json et package-lock.json – en précisant la fonction de chaque élément, notamment le concept de Single Page Application (SPA) et le point d’ancrage du DOM. Il mentionne la possibilité d’utiliser TypeScript, l’importance du fichier lock pour la cohérence des dépendances, et conclut en montrant comment lancer le serveur de développement avec npm run start, soulignant le rafraîchissement à chaud fourni par CRA. Le ton reste pédagogique et encourageant, visant à rendre les concepts accessibles aux novices tout en insistant sur les bonnes pratiques de configuration et de gestion de projet.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon sur la bibliothèque React. Aujourd'hui, nous allons voir comment créer un projet React puis nous allons explorer ensemble l'environnement de travail afin d'identifier et découvrir l'utilité de chacun des fichiers et dossiers générés au moment de la création. Tout d'abord, il faut avoir l'environnement d'exécution Node.js installé sur votre ordinateur. Car c'est grâce à lui 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 paquets npm ainsi que l'outil d'exécution npx. Il est toutefois possible d'utiliser le gestionnaire Yarn qui est une version un peu plus améliorée que npm. Je vous invite à regarder ma vidéo sur Node.js où j'ai expliqué comment l'installer et le mettre en route. En tout cas, il s'agit d'une opération simple qui ne risque pas de poser de problème. La première opération consiste à créer un nouveau projet React. Pour ce faire, il y a 2 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, il 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 affaire. Je vais expliquer l'utilité de ces 2 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. 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-à-dire un outil qui permet de regrouper des codes sources dans un seul ou plusieurs fichiers optimisés pour l'exécution sur le navigateur. En effet, comme vous allez le voir plus loin dans ce cours, on crée souvent des modules personnalisés, comme des composants, que l'on importe dans le fichier principal de l'application. Au moment de l'exécution ou du déploiement du projet, tous ces modules-là seront regroupés de manière organisée et optimisée dans quelques fichiers JavaScript. En plus, Webpack ne se limite pas qu'aux fichiers et 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 transcompilateur dit aussi transpiler. Un transpiler est un outil qui permet de convertir un code source d'un langage de programmation en un code source dans un autre langage. À 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 transpiler. Babel quant à lui transforme le code JavaScript ES6 et plus en code JavaScript standard compris par tous les navigateurs. En effet, 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 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éveloppement du projet ainsi que les bonnes pratiques de codage afin d'assurer une meilleure sécurité et maintenabilité du code produit. Il y a d'autres outils qu'un projet React pourrait solliciter, mais ces 3-là restent les plus populaires. Pour initier un projet React, commencez par créer un dossier dans l'emplacement de votre choix. Il est recommandé que le nom du dossier soit écrit en minuscule et sans caractères spéciaux. 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 et puis tapez la commande suivante: node -v. 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: npx create-react-app./ 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 base sont installés, c'est-à-dire qu'on sera forcément amené à installer d'autres modules par nous-mêmes quand on en aura besoin. Cette opération peut prendre quelques dizaines de secondes, donc patientez jusqu'à la fin de l'installation. 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 la commande suivante: npm create vite@latest/template-react puis npm install. @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 Vue.js, 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 des dépendances nécessaires. Notez qu'on peut aussi créer un projet React avec le gestionnaire de paquets Yarn comme ceci: yarn create-react-app./ Si Yarn n'est pas disponible alors il faut d'abord l'installer avec la commande suivante: npm install -g yarn. -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. Quelle que soit la méthode utilisée pour la création du projet React, le contenu du répertoire principal est plus ou moins le même, avec parfois quelques différences. 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.js. 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èrement. 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 load dans son corps. Cette balise est censé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. Rappelez-vous qu'on peut utiliser TypeScript à la place du JavaScript. 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'autres 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 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ées au dépôt Git. Le fameux 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 des scripts qui constituent des 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 report-web-vitals.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 setupTest.js qui sert à configurer les tests unitaires avec le framework Jest, etc. Mais ceux qu'on a vus 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 et 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 npm run start. Cela permet de lancer le projet 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étail dans les leçons qui vont suivre. Merci pour votre attention et à la vidéo prochaine.
