Lexique React

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.

  • Action (Redux)

    Une action est un objet JavaScript qui transporte de l’information de votre application vers le store. Elle est le seul moyen de déclencher un changement d’état dans l’application. C’est un signal qui décrit ce qui s’est passé, par exemple : « l’utilisateur a cliqué sur le bouton de connexion ». Caractéristiques fondamentales : Exemple : javascript La structure d’une Action Le type…

  • Action Creator

    Souvent confondu avec l’action elle-même dans React, l’action creator (Créateur d’Action) est une simple fonction qui retourne un objet action. javascript Avantages : les action creators rendent le code plus portable, plus facile à tester, et ils encapsulent la logique de création d’une action Explorer les thématiques : React

  • 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. Explorer les thématiques : React

  • Auto-form

    L’Auto Form est un composant utilisé dans le développement web avec React pour créer un formulaire automatiquement. Repo GITHub Explorer les thématiques : React

  • 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 Explorer les thématiques : React

  • 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. Explorer les thématiques :…

  • 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…