React est l’une des bibliothèques JavaScript les plus utilisées pour développer des interfaces utilisateur dynamiques et interactives.
Dans ce lexique, nous vous proposons de découvrir les termes clés associés à React, aux frameworks NextJs NestJS (backend), à la programmation réactive et à la conception d’interfaces utilisateur.
-
Architecture basée composants – Component-Based Architecture
C’est le terme général pour désigner la pratique qui consiste à découper l’interface utilisateur en petits blocs réutilisables et indépendants (les composants). On parle aussi de décomposition de l’interface (UI Decomposition). Chaque bloc gère sa propre logique et son propre affichage.
-
Auto-form
L’Auto Form est un composant utilisé dans le développement web avec React pour créer un formulaire automatiquement. Repo GITHub
-
Bundler
Un bundler est un outil de build essentiel dans le développement JavaScript/TypeScript moderne. Il analyse, transforme, regroupe et optimise l’ensemble des ressources d’une application (modules, dépendances, assets, syntaxes avancées) en un ou plusieurs fichiers de sortie (bundles) compatibles avec les navigateurs ou environnements cibles. Pourquoi est-il indispensable ? Évolution des approches Exemples : Vite, WebPack…
-
CDN React
Moyen pour ajouter rapidement la bibliothèque React à un projet Web existant ou une partie de son projet par le biais d’un CDN ( sans bundler à des fins pédagogiques). Exemple avec Babel index.html Exemple sans Babel index.html script.js Babel Standalone
-
Commande rfc
Raccourci signifiant React fonctional component disponible depuis une extension VS Code pour créer rapidement la structure d’un composant. Lorsque vous tapez « rfc » suivi de la touche Tb abréviation de react fonctional component dans un éditeur tel que VSCode avec l’extension appropriée installée, il génère automatiquement le code de base d’un composant React fonctionnel.
-
Compilateur dans l’écosystème React
Un compilateur (ou plus précisément un transpileur comme Babel) est un traducteur automatique qui s’exécute avant que votre code n’atteigne le navigateur. Il a deux missions principales : Pour le développeur : C’est une boîte noire. Vous écrivez du code moderne et lisible, le compilateur le rend « exécutable » en silence. Exemples Précis de Transformation Voici…
-
Composant <Link>
Le composant <Link> (issu de react-router-dom) est un composant de navigation déclarative conçu pour les applications React. Il permet de créer des liens interactifs qui modifient l’URL du navigateur sans déclencher de rechargement de page, tout en préservant la sémantique HTML et l’accessibilité. Fonctionnement clé Le composant <Link> de React Router (ex: react-router-dom) intercepte le…
-
Composant <Outlet />
Le composant <Outlet /> (React Router v6) est un placeholder obligatoire placé dans un composant layout parent pour définir où injecter le contenu de la route enfant active dans une structure de routes imbriquées (nested routes). Sans <Outlet />, les composants enfants ne s’affichent pas. Imaginez un cadre photo (<DashboardLayout>) avec une zone vide centrale.<Outlet…
-
Composant React
Partie d’une application réutilisable. Son code source est généralement ajouté dans un dossier Src/Components/ Par convention un composant débute toujours par une lettre majuscule. Un composant est constitué d’un fichier .js ou .jsx. Il débute toujours par l’importation du module React. Cette Cette définition du module React sert au transpileur Babel de transformer le code…
-
Composants en classe (obsolète)
Les Composants en Classes (Approche Orientée Objet) Historiquement, c’était la seule façon de gérer l’état (state) dans React.