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.

  • Composant React

    Un composant est une brique visuelle ou logique d’une application React. Cette partie d’application peut être 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…

  • Composant universel

    Un composant universel (Universal Component) est la brique élémentaire d’une interface React. Il est totalement agnostique, c’est-à-dire qu’il ne contient aucune logique métier, aucun état interne complexe, et ne dépend d’aucun contexte applicatif spécifique. Caractéristiques : Hautement personnalisable : Il expose un grand nombre de props (couleur, taille, variant, etc.) pour s’adapter à tous les…

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

  • Composants en fonctions

    L’approche fonctionnelle + Hooks est le standard actuel de React. Avantages : Développer de manière procédurale (écrire une suite d’instructions qui manipulent le DOM étape par étape, comme avec jQuery ou du JS vanilla ancien) est déconseillé dans React. React est Déclaratif : vous décrivez à quoi l’interface doit ressembler en fonction de l’état des…

  • Context API

    L’API Context dans React est une fonctionnalité intégrée qui permet de partager des données, de les propager à travers un arbre de composants sans passer par les props (props drilling). Elle simplifie la gestion de l’état global ou de la configuration de votre application Context API résout le problème du prop drilling (transmission manuelle de…

  • CRA

    CRA est le diminutif couramment utilisé pour Create React App. C’est le bundler historique de React qui utilise WebPack, Babel et ESLint. Pour un nouveau projet il vaut mieux utiliser Vite. Des millions de projets utilisent CRA. Il s’agit d’un outil de configuration initiale développé par Facebook pour simplifier la création d’une nouvelle application React.…

  • Create React App

    Create React App (CRA) est un ensemble d’outils et de scripts de ligne de commande qui permettent de mettre en place rapidement un environnement de développement pour des applications React. Create React App Explorer les thématiques : React

  • Décomposition en composants

    Dans React, la décomposition en composants permet de diviser l’interface en petits morceaux indépendants et modulaires. Chaque composant encapsule sa propre logique (JavaScript), son rendu (JSX/HTML) et souvent son style, ce qui facilite la maintenance, le test et la réutilisation du code à travers l’application. Explorer les thématiques : React

  • Diffing

    Mise à jour des changements effectué par le DOM virtuel dans le DOM réel quand le résultat du composant est différent, par un processus de regroupement de changements batch update. Explorer les thématiques : React

  • DOM virtuel (Virtual DOM)

    Le DOM virtuel est une représentation légère en mémoire de l’arbre DOM réel, utilisée par certaines bibliothèques JavaScript (comme React ou Vue) pour optimiser les mises à jour de l’interface utilisateur et réduire les accès coûteux au DOM natif. C’est une technique de performance pour minimiser les manipulations directes du DOM réel. Pourquoi existe-t-il ?…