Développement Web Moderne

avec REACTJS

Présenté par : JADLI AISSAM

SÉANCE 3 jadliaissam@gmail.com
/in/jadli-aissam-86a69843
SOMMAIRE

Les Méthodes Gestion des Affichage

de Cycle de Vie Evénements Conditionnel

Mr. JADLI AISSAM 2

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Méthodes de Cycle de Vie

Les composants basés sur des classes passent par toute une série d’étapes au cours de leur
vie. React nous permet de réagir à ces étapes en implémentant dans nos classes des
méthodes aux noms spécifiques, appelées méthodes de cycle de vie

v Constructor()
v render()
v componentWillMount()
v componentDidMount()
v componentWillUnmount()
v … etc.
Mr. JADLI AISSAM 3
 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Méthodes de Cycle de Vie

constructor()
Le constructeur est invoqué en premier. Il reçoit les
props initiales en argument. C’est le bon endroit pour
initialiser l’état local et, éventuellement, garantir le
« this » de certaines méthodes à l’aide d’un
« .bind() » manuel.

render()
Elle est appelé chaque fois qu'il y a un changement à
l'état du composant pour actualiser l’affichage vers le
DOM du navigateur.

Mr. JADLI AISSAM 4

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Méthodes de Cycle de Vie

componentWillMount()
Cette méthode est déclenchée juste
avant que le composant fasse son
premier render().

componentDidMount()
Elle survient dès que le composant a été retranscrit pour la première fois dans le DOM
réel, et constitue l’endroit adapté pour inscrire des minuteurs, ouvrir des connexion
réseau ou bases de données, et le bon endroit pour aller chercher des références
directes à certains éléments du DOM que l’on peut alors manipuler via des
bibliothèques tierce-partie.

Mr. JADLI AISSAM 5

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Méthodes de Cycle de Vie

componentWillUnmount()
Cette méthode est déclenchée juste avant que le composant ne quitte complètement le
DOM. C’est le moment idéal pour annuler/inverser les initialisations faites dans
componentWillMount() ou componentDidMount(). Par exemple: annuler des timers,
fermer des connexions, etc.

Mr. JADLI AISSAM 6

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Gestion des Evénements

La gestion des événements pour les éléments React est très similaire à celle des éléments
du DOM. Il y a tout de même quelques différences de syntaxe :
q Les événements de React sont nommés en camelCase plutôt qu’en minuscules.
q En JSX on passe une fonction comme gestionnaire d’événements plutôt qu’une chaîne
de caractères.

HTML REACT
Lorsqu'un événement se déroule, une des méthodes (handler) du Component sera
appelée.
Mr. JADLI AISSAM 7
 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Gestion des Evénements

Comment définir un gestionnaire d’événement ?

1) Le gestionnaire d’événement est une

fonction de la classe, pour ceci :
v Déclarer une fonction JS classique et lier
la à la classe;

OU BIEN

v Déclarer une fonction en utilisant

l’opérateur « => ».

Mr. JADLI AISSAM 8

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Gestion des Evénements

Comment définir un gestionnaire d’événement ?
Exemples

Mr. JADLI AISSAM 9

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Gestion des Evénements

Comment définir un gestionnaire d’événement ?

2) Le gestionnaire d’événement peut être

défini inline, c.-à-d. que le code à exécuter
peut être un bloc qui se trouve à l’intérieur
de l’attribut de l’événement à gérer.

Mr. JADLI AISSAM 10

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Affichage Conditionnel
En React, vous pouvez concevoir des composants distincts qui encapsulent le
comportement voulu. Vous pouvez alors n’afficher que certains d’entre eux, suivant l’état
de votre application.

Exemple : Nous pouvons créer un composant Greeting qui affiche un de ces deux composants,
selon qu’un utilisateur est connecté ou non

Mr. JADLI AISSAM 11

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Affichage Conditionnel
En utilisant un bloc « if »
Vous pouvez stocker les éléments dans des
variables. Ça vous aide à afficher de façon
conditionnelle une partie du composant tandis que
le reste ne change pas.

N.B: Dans le cas de l’utilisation d’une instruction if, le

test doit être fait à l’extérieur de la méthode render() Exemple : Le composant Header affiche
le contenu selon la condition spécifié

Mr. JADLI AISSAM 12

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Affichage Conditionnel
En utilisant l’opérateur logique &&
Vous pouvez utiliser n’importe quelle expression
dans du JSX en l’enveloppant dans des accolades.
Ça vaut aussi pour l’opérateur logique &&.
Il peut être pratique pour inclure à la volée
conditionnellement un élément.
Du coup, si la condition vaut true, l’élément juste
Exemple : Utilisation de l’opérateur &&
après && sera affiché. Si elle vaut false, React va
l’ignorer et le sauter
Mr. JADLI AISSAM 13
 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Affichage Conditionnel
En utilisant l’opérateur ternaire
Une autre méthode pour l’affichage conditionnel à la volée d’éléments consiste à utiliser
l’opérateur ternaire Javascript : condition ? trueValue : falseValue

Dans l’exemple ci-dessous, on l’utilise pour afficher conditionnellement un bloc de texte

Mr. JADLI AISSAM 14

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Affichage Conditionnel
En utilisant l’opérateur ternaire
L’opérateur ternaire peut même être
utilisé sur des composants.
Souvenez-vous aussi que chaque fois
que des conditions deviennent trop
complexes, c’est peut-être le signe
qu’il serait judicieux d’en extraire un
composant.

Mr. JADLI AISSAM 15

 Méthodes Cycle de Vie Gestion des Evénements Affichage Conditionnel

Affichage Conditionnel
Empêcher l’affichage d’un composant
Dans de rares cas, vous voudrez peut-être qu’un
composant se masque alors même qu’il figure dans
le rendu d’un autre composant. Pour ce faire, il suffit
de renvoyer null au lieu de son affichage habituel.

Mr. JADLI AISSAM 16

TRAVAUX PRATIQUES
Mr. JADLI AISSAM 17
Tester vos Connaissances
Mr. JADLI AISSAM 18
React Quiz
La méthode componentDidMount est ___

qExécutée avant le constructor()

qExécutée avant la méthode componentWillMount()

1
q Exécutée après la méthode render()

qExécutée avant la méthode render()

Mr. JADLI AISSAM 19

React Quiz
L’initialisation du State se fait dans ___

qLe constructeur

2 qLa méthode componentDidMount()

qL’initialisation est faites automatiquement par React

Mr. JADLI AISSAM 20

React Quiz
La méthode render() est ___

q Responsable de l’affichage du composant

3 qEst relancé chaque fois que le state change

qEst lancé après la méthode componentDidMount

Mr. JADLI AISSAM 21

React Quiz
Le meilleur endroit pour récupérer des données est ___

q Le constructeur

qLa méthode componentDidMount()

4
qLa méthode render()

qLa méthode componentWillUnmount()

Mr. JADLI AISSAM 22

React Quiz
Les événements React sont nommés en ___

qMiniscule

5 qCamelCase

qPascalCase

Mr. JADLI AISSAM 23

React Quiz
Choisir la (les) syntaxes correctes :

q<Button onclick={this.handle} />

q<Button onClick={this.handle()} />

6
q<Button onClick={this.handle} />

q<Button onClick={(ev) => this.handle()} />

Mr. JADLI AISSAM 24

React Quiz
Pour afficher conditionnellement un composant ___

qUtiliser la condition if…else à l’intérieur du JSX

qUtiliser la condition if…else à l’intérieur de render()

7
qUtiliser l’opérateur ternaire à l’intérieur du JSX

qUtiliser l’opérateur && à l’intérieur du JSX

Mr. JADLI AISSAM 25

React Quiz
Pour cacher un composant ____

qRemplacer sa valeur par 0

8
qRemplacer sa valeur par null

Mr. JADLI AISSAM 26