Développement Web Moderne

avec REACTJS

Présenté par : JADLI AISSAM

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

L’API Fetch Error

Les Refs
(suite) Boundaries

Mr. JADLI AISSAM 2

 L’API Fetch Les Refs Error Boundaries

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 3
 L’API Fetch Les Refs Error Boundaries

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 :
 La méthode text() retourne la réponse sous forme de chaine de caractères ;
 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 4
 L’API Fetch Les Refs Error Boundaries

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

Mr. JADLI AISSAM 5

 L’API Fetch Les Refs Error Boundaries

Promise vs Async/Await

Mr. JADLI AISSAM 6

 L’API Fetch Les Refs Error Boundaries

Où récupérer les données en React

A quel composant spécifique, devrait-on récupérer les données ?

Imaginez que vous avez déjà une arborescence de composants qui a plusieurs niveaux de
composants dans sa hiérarchie. Vous êtes maintenant sur le point de récupérer une liste
d'éléments à partir d'une API tierce. Quel composant spécifique, devrait récupérer les
données ? Fondamentalement, cela dépend de trois critères:
 Qui est intéressé par ces données ?
 Où afficher l’indicateur de Chargement ?
 Où afficher les message d’erreurs ?

Mr. JADLI AISSAM 7

 L’API Fetch Les Refs Error Boundaries

Où récupérer les données en React

Qui est intéressé par ces données ?
Le composant d'extraction doit être un
composant parent commun à tous ces
composants.
Les données récupérées par le composant
parent sont passées aux composants enfants
grâce aux props.

Mr. JADLI AISSAM 8

 L’API Fetch Les Refs Error Boundaries

Où récupérer les données en React

Où afficher un indicateur de chargement conditionnel ?
L'indicateur de chargement pourrait être affiché dans
le composant parent commun à partir des premiers
critères. Ensuite, le composant parent commun serait
toujours le composant pour récupérer les données.

Où afficher un message d’erreur ?

Ici, les mêmes règles du critère précédent pour
l'indicateur de chargement s'appliquent.

Mr. JADLI AISSAM 9

 L’API Fetch Les Refs Error Boundaries

Exemple d’usage

Mr. JADLI AISSAM 10

TRAVAUX PRATIQUES
Mr. JADLI AISSAM 11
 L’API Fetch Les Refs Error Boundaries

Les Refs
Les refs fournissent un moyen d’accéder aux nœuds du DOM ou éléments React créés
dans la méthode de rendu.

Quand utiliser les refs ?

Voici quelques cas d’usages tout trouvés pour les refs :
 Gérer le focus, la sélection du texte, ou la lecture de média.
 Lancer des animations impératives.
 S’interfacer avec des bibliothèques DOM tierces.

N.B: Evitez d’utiliser les refs pour tout ce qui peut être fait déclarativement.

Mr. JADLI AISSAM 12

 L’API Fetch Les Refs Error Boundaries

Créer des refs

Les refs sont créées en utilisant
React.createRef() et attachées aux
éléments React via l’attribut ref.
Les refs sont souvent affectées à une
propriété d’instance quand un
composant est construit et peuvent
donc être référencées à travers le
composant.

Mr. JADLI AISSAM 13

 L’API Fetch Les Refs Error Boundaries

Les Refs

Exemple

Mr. JADLI AISSAM 14

 L’API Fetch Les Refs Error Boundaries

Error Boundries
Auparavant, les erreurs JavaScript au sein des composants avaient
l’habitude de corrompre l’état interne de React, et de causer des
erreurs assez incompréhensibles lors des rendus suivants.

Ces erreurs étaient toujours causées par une erreur antérieure

dans le code applicatif et comme React ne proposait alors aucun
moyen de les gérer correctement dans les composants, il n’avait
pas la possibilité de se rétablir.

Mr. JADLI AISSAM 15

 L’API Fetch Les Refs Error Boundaries

Error Boundries
Les périmètres d’erreurs sont des composants React
qui interceptent les erreurs JavaScript n’importe où au
sein de leur arbre de composants enfants, enregistrent
ces erreurs, et affichent une UI de repli à la place de
l’arbre de composants qui a planté. Les périmètres
d’erreurs interceptent les erreurs survenant au rendu,
dans les méthodes de cycle de vie, ainsi que dans les
constructeurs de tous les éléments de leur
arborescence.
Mr. JADLI AISSAM 16
 L’API Fetch Les Refs Error Boundaries

Error Boundries
Les périmètres d’erreurs n’interceptent pas les erreurs qui surviennent dans :
 Les gestionnaires d’événements.
 Le code asynchrone (par exemple les fonctions de rappel de setTimeout ou
requestAnimationFrame).
 Le rendu côté serveur.
 Les erreurs levées dans le composant du périmètre d’erreur lui-même (plutôt
qu’au sein de ses enfants).

Mr. JADLI AISSAM 17

 L’API Fetch Les Refs Error Boundaries

Error Boundries
Une classe de composant devient un périmètre d’erreur si elle définit au moins une des
méthodes de cycle de vie static getDerivedStateFromError() ou componentDidCatch().
Utilisez static getDerivedStateFromError() pour afficher une UI de repli lorsqu’une erreur
est levée. Utilisez componentDidCatch() pour enregistrer les informations relatives à
l’erreur.

Mr. JADLI AISSAM 18

 L’API Fetch Les Refs Error Boundaries

Error Boundries
Exemple

Mr. JADLI AISSAM 19

TRAVAUX PRATIQUES
Mr. JADLI AISSAM 20
Tester vos Connaissances
Mr. JADLI AISSAM 21
React Quiz
L’API Fetch est un moyen pour ___

Récupérer des données depuis un serveur distant

Afficher une liste de composants

1
Envoyer des données vers un serveur distant

Valider des données saisies par l’utilisateur

Mr. JADLI AISSAM 22

React Quiz
L’API Fetch utilise ___

Les Promesses (Promise)

2 Les Callbacks

Async/await

Mr. JADLI AISSAM 23

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

fetch({‘http://mon-api.com’, method=‘POST’})
3
fetch(‘http://mon-api.com’, {method=‘POST’})

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

Mr. JADLI AISSAM 24

React Quiz
Les refs constituent un moyen pour ___
Créer des nœuds HTML

Accéder à des nœuds HTML

4
Créer des composants React

Accéder à des composants React

Mr. JADLI AISSAM 25

React Quiz
Pour créer une Ref dans React, Utiliser la méthode ___
React.getRef()

React.setRef()
5
React.createRef()

React.defineRef()

Mr. JADLI AISSAM 26

React Quiz
Une Error Boundary est un ____
Composant React interne automatique

Composant React écrit par le développeur

6
Bloc try … catch pour les composants

Composant obligatoire dans une application React

Mr. JADLI AISSAM 27

 React Quiz
Pour considérer un Composant comme E.B, il faut au moins avoir ___
La méthode componentDidMount()

La méthode getDerivedStateFromError()

7
La méthode componentDidCatch()

La méthode componentWillMount()

Mr. JADLI AISSAM 28

React Quiz
Un Error Boundary ne peut pas intercepter les erreurs qui ____
Existent dans la méthode render()

Existent dans le Error Boundary

8
Existent dans les gestionnaires d’événements

Existent dans le code asynchrone (setTimeout , …etc)

Mr. JADLI AISSAM 29