Développement Web Moderne

avec REACTJS

Présenté par : JADLI AISSAM

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

Listes et Les
L’API Fetch
Tableaux Formulaires

Mr. JADLI AISSAM 2

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
La fonction map()

La méthode map() en JavaScript permet de prendre en paramètre un tableau de valeurs et

de transformer ces valeurs.

Ce code affiche [2, 4, 6, 8, 10] dans la console.

Avec React, transformer un tableau en une liste d’éléments est presque identique.

Mr. JADLI AISSAM 3

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Afficher plusieurs composants

On peut construire des collections d’éléments et les inclure dans du JSX en utilisant les
accolades {}.

Exemple
On itère sur le tableau de nombres en utilisant
la méthode map(). On retourne un élément <li>
pour chaque entrée du tableau.
Enfin, on affecte le tableau résultant à listItems Ce code affiche une liste à puces de nombres entre 1 et 5

Mr. JADLI AISSAM 4

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Les clés (keys)
En exécutant le code précédant, vous obtiendrez un avertissement disant qu’une clé
devrait être fournie pour les éléments d’une liste. Une « clé » (key), est un attribut spécial
que vous devez inclure quand vous créez une liste d’éléments.

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.
Mr. JADLI AISSAM 5
 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Les clés (keys)
Le meilleur moyen de choisir une clé est d’utiliser
quelque chose qui identifie de façon unique un
élément d’une liste parmi ses voisins. Le plus
souvent on utilise l’ID de notre donnée comme clé

Quand vous n’avez pas d’ID stable pour les

éléments affichés, vous pouvez utiliser
l’index de l’élément en dernier recours.

Mr. JADLI AISSAM 6

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Extraire des composants avec des clés
Les clés n’ont une signification que dans le contexte
du tableau qui les entoure.

Exemple : si on extrait un composant ListItem, on

doit garder la clé sur l’élément <ListItem /> dans le
tableau, et non sur l’élément <li> dans le
composant ListItem lui-même.
Utilisation Incorrecte des clés

Mr. JADLI AISSAM 7

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Extraire des composants avec des clés
Les clés n’ont une signification que dans le contexte
du tableau qui les entoure.

Exemple : si on extrait un composant ListItem, on

doit garder la clé sur l’élément <ListItem /> dans le
tableau, et non sur l’élément <li> dans le
composant ListItem lui-même.
Utilisation Correcte des clés

Mr. JADLI AISSAM 8

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Unicité des clés
Les clés utilisées dans un tableau
doivent être uniques parmi leurs
voisins. Cependant, elles n’ont pas
besoin d’être globalement uniques. On
peut utiliser les mêmes clés dans des
tableaux différents.

Mr. JADLI AISSAM 9

 Listes et tableaux Les Formulaires L’API Fetch

Listes et Tableaux
Intégration avec JSX
JSX permet d’intégrer des expressions
quelconques entre accolades. Nous
pouvons donc utiliser map()
directement dans un code JSX.

N.B: Ça rend parfois le code plus lisible, mais il faut

éviter d’en abuser.

Mr. JADLI AISSAM 10

 Listes et tableaux Les Formulaires L’API Fetch

Les Formulaires
Les formulaires HTML fonctionnent un peu différemment des autres éléments du DOM
en React car ils possèdent naturellement un état interne.

Cependant, dans la plupart des cas, on

voudrais pouvoir gérer la soumission avec
une fonction JavaScript, qui accède aux
données saisies par l’utilisateur. La
manière classique de faire ça consiste à
utiliser les « composants contrôlés »

Mr. JADLI AISSAM 11

 Listes et tableaux Les Formulaires L’API Fetch

Composants Contrôlées
En HTML, les éléments de formulaire tels que <input>, <textarea>, et <select>
maintiennent généralement leur propre état et se mettent à jour par rapport aux saisies
de l’utilisateur. En React, l’état modifiable est généralement stocké dans la propriété state
des composants et mis à jour uniquement avec setState().

Le composant React qui affiche le formulaire

contrôle aussi son comportement par rapport
aux saisies de l’utilisateur. Un champ de
formulaire dont l’état est contrôlé de cette façon
par React est appelé un « composant contrôlé ».
Mr. JADLI AISSAM 12
 Listes et tableaux Les Formulaires L’API Fetch

Composants Contrôlées
Dans un composant contrôlé, chaque
changement de l’état aura une
fonction gestionnaire associée. Ça
permet de modifier ou valider
facilement, à la volée, les saisies de
l’utilisateur.

Exemple
nous voulions forcer les noms en
majuscules :

Mr. JADLI AISSAM 13

 Listes et tableaux Les Formulaires L’API Fetch

Composants Contrôlées
La balise textarea
En React, un <textarea> utilise à la place
l’attribut value. Du coup, un formulaire
utilisant un <textarea> peut être écrit
d’une manière très similaire à un
formulaire avec un élément <input>
mono-ligne

Mr. JADLI AISSAM 14

 Listes et tableaux Les Formulaires L’API Fetch

Composants Contrôlées
La balise select
React, au lieu d’utiliser l’attribut selected, utilise un
attribut value sur la balise racine select. C’est plus
pratique dans un composant contrôlé car vous
n’avez qu’un seul endroit à mettre à jour.
Vous pouvez passer un tableau pour l’attribut value,
permettant de sélectionner plusieurs valeurs dans
un élément select :

Mr. JADLI AISSAM 15

 Listes et tableaux Les Formulaires L’API Fetch

Composants Contrôlées
La balise input type="file"

En HTML, un <input type="file"> permet

à l’utilisateur de sélectionner un ou
plusieurs fichiers depuis son appareil et
de les téléverser vers un serveur ou de
les manipuler en JavaScript

Sa valeur étant en lecture seule, c’est un composant non-contrôlé en React.

Mr. JADLI AISSAM 16
 Listes et tableaux Les Formulaires L’API Fetch

Composants Contrôlées
Gérer plusieurs saisies
Quand vous souhaitez gérer plusieurs champs contrôlés,
vous pouvez ajouter un attribut name à chaque champ
et laisser la fonction gestionnaire choisir quoi faire en
fonction de la valeur de event.target.name

Mr. JADLI AISSAM 17

 Listes et tableaux Les Formulaires L’API Fetch

L’API Fetch
L’API Fetch est présentée comme étant la « nouvelle façon » d’effectuer des requêtes HTTP
de façon plus flexible et plus puissante que l’ancien objet XMLHttpRequest.

Elle va également utiliser la méthode globale

fetch() qui représente en quelques sortes le
cœur de celle-ci. Cette méthode permet
l’échange de données avec le serveur de
manière asynchrone.

la méthode fetch() a besoin d’un argument obligatoire, qui correspond à l’URL des
ressources à récupérer Mr. JADLI AISSAM 18
 Listes et tableaux Les Formulaires L’API Fetch

La méthode fetch()
Pour récupérer le corps de la réponse, nous allons pouvoir utiliser les méthodes de
l’interface Response en fonction du format qui nous intéresse :
v La méthode text() retourne la réponse sous forme de chaine de caractères ;
v La méthode json() retourne la réponse en tant qu’objet JSON ;

Finalement, on traite les erreurs avec le bloc catch et on traite l’erreur rencontrée.
Mr. JADLI AISSAM 19
 Listes et tableaux Les Formulaires L’API Fetch

Options
La méthode fetch() accepte un deuxième argument,
il s’agit des options de notre requête.
q method : méthode utilisée par la requête. Les
valeurs possibles sont GET (défaut), POST, etc.) ;
q headers : les en-têtes qu’on souhaite ajouter à
notre requête ;
q body : un corps qu’on souhaite ajouter à notre
requête ;

Mr. JADLI AISSAM 20

 Listes et tableaux Les Formulaires L’API Fetch

Promise vs Async/Await

Mr. JADLI AISSAM 21

TRAVAUX PRATIQUES
Mr. JADLI AISSAM 22
Tester vos Connaissances
Mr. JADLI AISSAM 23
React Quiz
La méthode map permet de ___

qConcaténer 2 tableaux d’objets;

qTransformer les valeurs d’un tableau d’objets;

1
q Incrémenter les valeurs d’un tableau d’objet;

qAfficher les éléments d’un tableau d’objets.

Mr. JADLI AISSAM 24

React Quiz
Sélectionner la syntaxe correcte à l’intérieur du JSX :

qtab.map(elt => <li>elt.text</li>

2 q{tab = tab.map(elt => <li>elt.text</li>}

q{tab.map(elt => <li>elt.text</li>}

Mr. JADLI AISSAM 25

React Quiz
Lors de l’absence de clés pour l’affichage d’une liste, React ___

qAffiche une Erreur de Compilation

3 qAffiche une Erreur d’exécution

qAffiche un avertissement dans la console

qAffiche un Avertissement dans le HTML

Mr. JADLI AISSAM 26
React Quiz
Les clés utilisées doivent être ___

q Uniques entre eux

qUnique entre les clés des composants adjoints

4
qPas obligatoirement uniques

qIndiquées seulement si le contenu de la liste change

Mr. JADLI AISSAM 27

React Quiz
Un champ contrôlé est un champs dont ___

qL’apparence est contrôlée

5 qLe fonctionnement est contrôlé

qL’apparence et le fonctionnement sont contrôlés

Mr. JADLI AISSAM 28

React Quiz
Dans les Formulaires HTML en React, ___

qLes données sont stockées dans les champs

qLes données sont stockées dans le state du Composant

6
qUne fonction (handler) peut gérer plusieurs champs

qL’attribut type est utilisé pour différencier les champs

Mr. JADLI AISSAM 29

React Quiz
L’API Fetch est un moyen pour ___

qRécupérer des données depuis un serveur distant

qAfficher une liste de composants

7
qEnvoyer des données vers un serveur distant

qValider des données saisies par l’utilisateur

Mr. JADLI AISSAM 30

React Quiz
L’API Fetch utilise ___

qLes Promesses (Promise)

8 qLes Callbacks

qAsync/await

Mr. JADLI AISSAM 31

React Quiz
Sélectionner la syntaxe correcte ___
qfetch(‘http://mon-api.com’, method=‘POST’)

qfetch({‘http://mon-api.com’, method=‘POST’})
8
qfetch(‘http://mon-api.com’, {method=‘POST’})

qfetch(‘http://mon-api.com’, [method=‘POST’])

Mr. JADLI AISSAM 32