CH4 – Manipulation des

propriétés et gestion des états

Développement front-end
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Créer un projet React « chapitre4 »
• Créer un dossier « components »
• Créer un fichier « Presentation.js » dans le dossier « src/components »
• Ajouter le code suivant au fichier « Présentation.js »
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Ecrire le code suivant dans le fichier index.js:
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Le rendu:
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Remarques:
• props est un objet javascript
• L’objet props ne peut pas changer les propriétés du composant.
• Ainsi, l’écriture props.nom=‘Alami’ n’est pas autorisé.
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• L’écriture :

Fait appel à la fonction Presentation en passant en argument l’objet props

qui fait référence à l’objet {nom: ‘Kamali', prenom: ‘Ali'} , cet objet est créé
à partir des attributs nom, prenom de l’élément Presentation.
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• On peut passer dans l’objet props:
• Une valeur
• Un objet
• Une liste
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Passage d’un objet dans props:
Presentation.js:
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Passage d’un objet dans props:
index.js (fonction App):
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Passage d’un objet dans props:
On peut écrire l’objet aussi de la manière suivante:

Utilisation de la destruction d’objet:

 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Passage d’un tableau (Array) dans props:
Presentation.js:
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Passage d’un tableau (Array) dans props:
index.js:
 I- Manipulation des props dans un
composant créé à l’aide d’une fonction
• Passage d’un tableau (Array) dans props:
Le rendu:
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Créer un autre fichier Presentation2.js avec le code suivant:
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Ecrire le code suivant dans le fichier index.js:
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage d’un objet dans props: (Presentation2.js)
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage d’un objet dans props: (index.js)
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage d’un tableau (array) dans props: (Presentation2.js)
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage d’un tableau (array) dans props: (index.js)
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage dynamique d’un contenu à un composant (Presentation.js):
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage dynamique d’un contenu à un composant (index.js):
 II- Manipulation des props dans un
composant créé à l’aide d’une classe
• Passage dynamique d’un contenu à un composant (rendu):
 II- Manipulation des objets state pour
mettre à jour un composant
• State est un objet pouvant être mis à jour qui peut être utilisé pour
contenir les données et contrôler le comportement du composant.
Seuls les composants de classe peuvent avoir un état, pas les
composants fonctionnels. Lorsque l'état est modifié, React restitue
automatiquement le composant qui provoque une mise à jour
d’affichage.
 II- Manipulation des objets state pour
mettre à jour un composant
• Pour expliquer l’objet state, considérons que nous souhaitions écrire un
composant Message simple qui permet d’afficher le rendu suivant:

• Si l’utilisateur clique sur le bouton inscription Le rendu devient:

 II- Manipulation des objets state pour
mettre à jour un composant
• Créer le fichier « Message.js » dans le répertoire « src/component »:
 II- Manipulation des objets state pour
mettre à jour un composant
• Fichier index.js:
 II- Manipulation des objets state pour
mettre à jour un composant
• Explication du code:
Dans le constructeur on fait appel au constructeur de la classe mère React.Component par
super()
Création de l’objet state qui continent les deux propriétés message et btnMessage ,les deux
propriétés sont initialisées,
on remarque que state est un objet de la classe Message mise à jour de state
Comme vous remarquez, la modification des valeurs des propriétés se fait via la fonction
this.setState().
La fonction setState modifie les propriétés puis provoque un appel de la méthode render(),
c’est ainsi que l’interface utilisateur est mise à jour avec les nouvelles valeurs de
{this.state.message} et {this.state.btnMessage}
 II- Manipulation des objets state pour
mettre à jour un composant
• Remarque Très importante:
Il ne faut pas modifier l’etat state directement:

this.state.message= "message 1"

this.state.btnMessage="message 2"
en effet cette modification directe change l’état mais elle ne provoque pas l’appel de la
méthode render(), d’où l’interface utilisateur n’affiche pas les nouvelles valeurs des propriétés
de l’état .