Chapitre 1 : Introduction à React et concepts

Objectifs de React, Approche déclarative, L’interface est une fonction de l’état, Flux de données unidirectionnel

Concepts clés abordés

• Objectifs de React
• Approche déclarative
• L’interface est une fonction de l’état
• Flux de données unidirectionnel

Objectifs de React

Son objectif principal est de faciliter la création d’applications, lisibles, maintenables et évolutives.

React est une librairie de composants. Ce n’est pas un framework, donc ne fournit pas de solution complète pour le routing, la gestion des données ou le backend.
Cela permet à React d’être léger et flexible. Il existe de nombreuses extensions pour s’adapter à différents contextes (petite application, application complexe, intégration progressive dans un site existant).

Avant l’apparition de bibliothèques comme React, les interfaces web étaient souvent construites en manipulant directement le DOM et synchronisant manuellement les données et l’affichage. Mais cela rendait le code difficile à maintenir, la logique métier et l’affichage étaient trop interdépendants, ce qui pouvait résulter en incohérence entre l’état réel de l'application et ce qu’on pouvait voir sur l’interface.

React apporte une solution à cela.

Approche déclarative

Un des concepts forts de React est l’approche déclarative : plutôt que de dire comment mettre à jour l’interface, on décrit à quoi l’interface doit ressembler en fonction des données.

Le développeur se concentre sur l’état de l’application et les règles d’affichage (“telle donnée doit être affichée de telle manière”). React est là pour comparer les changements et mettre à jour l’interface.

Cette approche rend également le code plus lisible et plus facile à comprendre.

L’interface est une fonction de l’état

Autre concept fort de React : l’interface est une fonction de l’état. L’UI affichée dépend uniquement des données courantes de l’application. Dès que ces données changent, React déclenche un nouveau rendu pour refléter cet état. Ce modèle rend le comportement de l’application prévisible et facilite le raisonnement sur le code.

Flux de données unidirectionnel

Les données circulent du composant parent vers le ou les composants enfants, ce qui rend le comportement de l’application prévisible et plus facile à comprendre.
Un composant enfant peut notifier son parent via une callback, mais ne doit jamais modifier directement les données reçues.

Ce flux à sens unique permet de mieux comprendre d’où viennent les données et comment elles évoluent. Cela limite les effets de bord et simplifie le débogage.

Questions clés (validation des acquis du chapitre)

• Pourquoi utiliser React ? Pour que le développeur puisse se concentrer sur l’état de l’application et les règles d’affichage. React s’occupe de mettre à jour l’interface. Ainsi, plus de problèmes d’incohérence, l’interface résulte toujours de l’état de l’application
• En quoi l’approche déclarative diffère-t-elle d’une approche impérative ? l’approche déclarative décrit à quoi l’interface doit ressembler, alors que l’approche impérative dit comment mettre à jour l’interface
• Expliquer le concept de “l’interface est une fonction de l’état” ? L’interface affichée dépend uniquement des données courantes de l’application. React déclenche un nouveau rendu de sorte à refléter cet état.
• Pourquoi est-ce important d’avoir un flux de données unidirectionnel ? Pour toujours connaître d’où vient la data et limiter les effets de bord.