Qu'est-ce que React ?

• React est une bibliothèque JavaScript construite en 2013 par l'équipe de de

Facebook pour rendre les interfaces utilisateurs plus modulaires (ou
réutilisables) et plus facilement maintenables.
• Utilisée uniquement pour le côté “vue” dans le paradigme MVC
• Selon le site web de React, il est utilisé pour « Construire des composants
encapsulés qui gèrent leurs propres états, puis les assembler pour réaliser
des interfaces utilisateurs complexes ».
• Il est donc différent des autres frameworks JavaScript comme AngularJS
(frameworks complets).

12/02/2024 2
 Qu'est-ce que React ?
• La compétition est rude dans les frameworks JavaScript, notamment entre
Angular (1 et 2), Ember et ReactJS. C’est peu de le dire ! Chaque framework
a ses spécificités et le choix d’un d’entre eux est très compliqué.
• L’intérêt de React réside tout d’abord dans son approche composant,
complètement différente des autres, et qui, au lieu de laisser notre
JavaScript modifier le DOM, écrit du HTML dans ses composants JavaScript
en interne. On obtient alors un code plus compréhensible. Bien sûr, tout
cela est très subjectif et il faut voir avec sa sensibilité personnelle et les
contraintes que l’on a !

12/02/2024 3
 Qu'est-ce que React ?

12/02/2024 4
 Qu'est-ce que React ?
• Un autre point positif est l’existence de React Native, permettant de créer
des applications mobiles à la manière de Cordova/Ionic pour Angular.
• De plus, React a été créé en se concentrant sur les performances, utilisant
un DOM virtuel pour rafraîchir uniquement les composants qui ont été
modifiés et non toute la page (il reste cependant plus lent que du JavaScript
pur).
• Rappelez-vous quand Facebook est passé d'un simple système de « like » à
des systèmes plus complexes avec réactions ? Au lieu de simplement
pouvoir « liker » les messages, vous pouvez maintenant réagir de différentes
façon avec un cœur, un smiley ou encore un « like » sur n'importe quel
article.

12/02/2024 5
 Qu'est-ce que React ?

12/02/2024 6
 Qu'est-ce que React ?

12/02/2024 7
 Les composants
• ReactJS fonctionne en créant des “components”, correspondant à un
composant dans la page web.
• Ici quelque chose peut vous surprendre : on écrit du XML (HTML) dans du
JavaScript ! Il s’agit du langage JSX pour “JavaScript Xml”.
• Cela nous permet de gérer le rendu de notre composant, dans la méthode
“render” en y injectant directement le HTML qu’on veut afficher.
• L’intérêt de ReactJS est que ses composants correspondent à un élément de
la page, avec son état propre et ses actions associées. Le tout géré
directement à l’intérieur du composant lui-même ! Ils ont leur propre état,
leurs propres données et sont indépendants les uns des autres. Autant dire
que créer une bibliothèque en React correspond simplement à créer un
composant auquel on peut donner une configuration !
12/02/2024 8
 JSX

• Syntaxe n’est ni une chaîne de caractères ni du HTML.

• JSX : c’est une extension syntaxique de JavaScript.
• JSX fait penser à un langage de balisage, mais il cache toute la puissance de
JavaScript.
• JSX produit des « éléments » React.
• Le fonctionnement d’une UI (User Interface) conditionnera toujours les
logiques de rendu, de la gestion des événements à la préparation des
données pour l’affichage, en passant par l’évolution de l’état au fil du temps.
• React a choisi d’assumer pleinement cet état de fait.
12/02/2024 9
 JSX

• Au lieu de séparer artificiellement les technologies en mettant le balisage et

la logique dans des fichiers séparés, React sépare les préoccupations via des
unités faiblement couplées appelées « composants ».
• React ne vous oblige pas à utiliser JSX, mais la plupart des gens y trouvent
une aide visuelle quand ils manipulent l’interface utilisateur dans le code
JavaScript

12/02/2024 10
 Hello World

12/02/2024 11
 Utilisation JSX

12/02/2024 12
 Utilisation JSX

12/02/2024 13
 Rendu des éléments
• Les éléments React sont immuables. Une fois votre élément créé, vous ne
pouvez plus modifier ses enfants ou ses attributs. Un élément est comme une
image d’un film à un instant T : il représente l’interface utilisateur à un point
précis dans le temps.
• Avec nos connaissances actuelles, la seule façon de mettre à jour l’interface
utilisateur est de créer un nouvel élément et de le passer
à ReactDOM.render().

12/02/2024 14
 Composants
• Les composants vous permettent de découper l’interface utilisateur en
éléments indépendants et réutilisables, vous permettant ainsi de considérer
chaque élément de manière isolée.
• Les composants sont comme des fonctions JavaScript. Ils acceptent des
entrées quelconques (appelées « props ») et renvoient des éléments React
décrivant ce qui doit apparaître à l’écran.

12/02/2024 15
 Composants
• Lorsque React rencontre un élément représentant un composant défini par
l’utilisateur, il transmet les attributs JSX à ce composant sous la forme d’un
objet unique. Nous appelons cet objet « props ».
• Par exemple, ce code affiche « Bonjour, Zouhair » sur la page :

12/02/2024 16
12/02/2024 17
 Composants

• Cette fonction est un

composant React valide
car elle accepte un seul
argument « props » (qui
signifie « propriétés »)
contenant des données,
et renvoie un élément
React. Nous appelons de
tels composants des
« fonctions
composants », car ce
sont littéralement des
fonctions JavaScript.
12/02/2024 18
 Composants: Convertir une fonction en
classe

• Vous pouvez convertir un composant fonctionnel comme Clock en une classe

en cinq étapes :
• Créez une classe ES6, avec le même nom, qui étend React.Component.
• Ajoutez-y une méthode vide appelée render().
• Déplacez le corps de la fonction dans la méthode render().
• Remplacez props par this.props dans le corps de la méthode render().

12/02/2024 19
12/02/2024 20
 Composants + État
• props (diminutif de « propriétés ») et state sont tous les deux des objets
JavaScript bruts. Même s’ils contiennent tous les deux des informations qui
influencent le résultat produit, ils présentent une différence
majeure : props est passé au composant (à la manière des arguments d’une
fonction) tandis que state est géré dans le composant (comme le sont les
variables déclarées à l’intérieur d’une fonction).
• A l'inverse des props, le state est “muable” et donc peut être modifié.
• En React, le state est interne à un composant, tandis que les props sont
transmis au composant. Il est utilisé dans les composants pour garder une
trace des informations entre les différents rendus.
• L'état du composant est stocké dans "this.state".
12/02/2024 21
12/02/2024 22
 Composants + État
• Quand <Clock /> est passé à ReactDOM.render(), React appelle le
constructeur du composant Clock. Puisque Clock a besoin d’afficher l’heure
actuelle, il initialise this.state avec un objet contenant l’heure actuelle. Nous
mettrons cet état à jour par la suite.
• React appelle ensuite la méthode render() du composant Clock. C’est comme
cela que React découvre ce qu’il faut afficher à l’écran. React met ensuite à
jour le DOM pour correspondre à la sortie de la méthode render() du
composant Clock.
• Quand la sortie de la Clock est insérée dans le DOM, React appelle la
méthode de cycle de vie componentDidMount(). À l’intérieur, le
composant Clock demande au navigateur de mettre en place un minuteur
pour appeler la méthode tick() du composant une fois par seconde.
12/02/2024 23
 Composants + État
• Chaque seconde, le navigateur appelle la méthode tick(). À l’intérieur, le
composant Clock planifie une mise à jour de l’interface utilisateur en
appelant setState() avec un objet contenant l’heure actuelle. Grâce à l’appel
à setState(), React sait que l’état a changé, et invoque à nouveau la
méthode render() pour savoir ce qui devrait être affiché à l’écran. Cette fois,
la valeur de this.state.date dans la méthode render() est différente, la sortie
devrait donc inclure l’heure mise à jour. React met à jour le DOM en accord
avec cela.
• Si le composant Clock finit par être retiré du DOM, React appellera la
méthode de cycle de vie componentWillUnmount() pour que le minuteur soit
arrêté.

12/02/2024 24
 Les événements
• les noms des évènements sont en notation “camelCase”: onclick  onClick

12/02/2024 25
 • En JSX, vous devez être prudent avec
l’utilisation de this dans les fonctions
de rappel. En JavaScript, les
méthodes de classes ne sont pas liées
par défaut. Si vous oubliez de
lier this.handleClick et l’utilisez
dans onClick, this sera undefined qu-
and la fonction sera appelée.
• Ce n’est pas un comportement
spécifique à React, ça fait partie du
fonctionnement normal des fonctions
en JavaScript
. En général, si vous faites référence à
une méthode sans l’appeler avec (),
comme
dans onClick={this.handleClick}, vous
devriez lier cette méthode
12/02/2024 26
 • Si vous ne souhaitez pas utiliser bind, • Si vous n’utilisez pas la syntaxe des
vous avez deux alternatives possibles. champs de classe, vous pouvez utiliser
Si vous avez l’habitude d’utiliser la les fonctions fléchées pour les
syntaxe des champs de classes, qui fonctions de rappel.
est encore expérimentale, vous
pourriez l’utiliser pour lier les
fonctions de rappel.

12/02/2024 27
 Render Conditionnel

12/02/2024 28
 Render Conditionnel
• Ça fonctionne parce
qu’en JavaScript, true
&& expression est
toujours évalué à
expression, et false &&
expression est toujours
évalué à false.
• Si la condition vaut true,
l’élément juste après
&& sera affiché. Si elle
vaut false, React va
l’ignorer et le sauter.
12/02/2024 29
 Render Conditionnel
• Une autre méthode pour l’affichage conditionnel à la volée d’éléments
consiste à utiliser l’opérateur ternaire Javascript:
condition ? trueValue : falseValue.

12/02/2024 30
 Listes + Clés
• Les clés aident React à identifier quels éléments d’une liste ont changé, ont
été ajoutés ou supprimés. Vous devez donner une clé à chaque élément
dans un tableau afin d’apporter aux éléments une identité stable :

L’index est non recommandé comme

clé si l’ordre des éléments est
susceptible de changer. Ça peut causer
des problèmes avec l’état du
composant
12/02/2024 31
 Les clés servent d’indicateur à
React mais ne sont pas passées à
vos composants. Si vous avez
besoin de la même valeur dans
votre composant, passez-la dans
une prop avec un nom différent.
12/02/2024 32
 React Forms
À présent que
l’attribut value est défini sur
notre élément de formulaire,
la valeur affichée sera
toujours this.state.value,
faisant ainsi de l’état local
React la source de vérité.
Puisque handleChange est
déclenché à chaque frappe
pour mettre à jour l’état local
React, la valeur affichée
restera mise à jour au fil de la
saisie.
12/02/2024 33
 Méthodes de cycle de vie

• Mounting: mettre des éléments dans le DOM.

• Updating: un composant est mis à jour chaque fois qu'il y a un changement
dans state ou props du composant.
• Unmounting: lorsqu'un composant est supprimé du DOM
12/02/2024 34
 Méthodes de cycle de vie:
Mounting
React a quatre méthodes intégrées qui sont appelées, dans cet ordre, lors du
montage d'un composant:
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

La méthode render() est obligatoire et sera toujours appelée, les autres sont
optionnelles et seront appelées si vous les définissez.

12/02/2024 35
 Méthodes de cycle de vie:
Mounting
• La méthode constructor() est appelée avant toute autre chose, lorsque le
composant est lancé, et c'est l'endroit naturel pour configurer l'état initial
et les autres valeurs initiales.
• La méthode getDerivedStateFromProps() est appelée juste avant le rendu
des éléments dans le DOM. C'est l'endroit naturel pour définir l'objet
d'état en fonction des props initiaux.
• La méthode render() est obligatoire, et c'est la méthode qui émet
réellement le HTML vers le DOM.
• La méthode componentDidMount() est appelée après le rendu du
composant. C'est là où vous devez exécuter les instructions qui nécessitent
que le composant soit déjà placé dans le DOM.
12/02/2024 36
 Méthodes de cycle de vie: Updating
React a cinq méthodes intégrées qui sont appelées, dans cet ordre, lors du
montage d'un composant:
1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

La méthode render() est obligatoire et sera toujours appelée, les autres sont
optionnelles et seront appelées si vous les définissez.

12/02/2024 37
• La méthode getDerivedStateFromProps() est la première méthode appelée
lorsqu'un composant est mis à jour. C'est l'endroit naturel pour définir l'objet
d'état en fonction des props initiaux.
• Dans la méthode shouldComponentUpdate(), vous pouvez renvoyer une valeur
booléenne qui spécifie si React doit continuer ou non le rendu.
• La méthode render() est bien sûr appelée lorsqu'un composant est mis à jour, il
doit restituer le HTML au DOM, avec les nouvelles modifications.
• Dans la méthode getSnapshotBeforeUpdate(), vous avez accès aux props et
state avant la mise à jour, ce qui signifie que même après la mise à jour, vous
pouvez vérifier quelles étaient les valeurs avant la mise à jour. Si la méthode
getSnapshotBeforeUpdate() est présente, vous devez également inclure la
méthode componentDidUpdate(), sinon vous obtiendrez une erreur.
• La méthode componentDidUpdate() est appelée après la mise à jour du
composant dans le DOM.
12/02/2024 38
 Méthodes de cycle de vie: Unmounting
La phase suivante du cycle de vie consiste à supprimer un composant du DOM
ou unmounting comme React aime l'appeler.

1. componentWillUnmount()

• La méthode componentWillUnmount() est appelée lorsque le composant

est sur le point d'être supprimé du DOM.

12/02/2024 39
 React HOOKS

12/02/2024 40
 React HOOKS
• Les Hooks sont des fonctions qui permettent de « se brancher » sur la
gestion d’état local et de cycle de vie de React depuis des fonctions
composants.
• Les Hooks ne fonctionnent pas dans des classes : ils vous permettent
d’utiliser React sans classes.

Nous ne recommandons pas de ré-écrire vos composants

existants du jour au lendemain, mais vous pouvez si vous
le souhaitez commencer à utiliser les Hooks dans vos
nouveaux composants.
12/02/2024 41
 React HOOKS: useState
• useState est un Hook qui retourne une paire : la valeur de l’état actuel et
une fonction qui vous permet de la mettre à jour.
• Elle est similaire à this.setState dans une classe.

• Le seul argument de useState est l’état initial.

• La fonction qui vous permet de la mettre à jour.

12/02/2024 42
 React HOOKS: useEffect
• Le Hook d’effet, useEffect, permet aux fonctions composants de gérer des
effets de bord.
• Il joue le même rôle que componentDidMount, componentDidUpdate,
et componentWillUnmount.

12/02/2024 43
 React HOOKS: useRef
• useRef offre la possibilité de créer un objet contenant une propriété
mutable nommée current.
• Grâce à useRef on peut ainsi référencer un élément du DOM mais
également déclarer une variable d’instance comme on le ferait
avec this.myVar dans une classe.

12/02/2024 44
 React HOOKS: useMemo
• useMemo permet de mémoïser une valeur afin d'éviter un recalcul
(potentiellement coûteux) à chaque rendu du composant.

12/02/2024 45