Encadré par : EDDOUBAJI ZOUHAIR
Mr Hamza NADIR EL GHARABI SALAHE EDDINE
Présenté par : SELLOUM SAIF EDDINE
EL KOUAY MOHAMMED
AMINE AKBLY
PLAN
INTRODUCTION
CONSOMMATION DES API
EN REACT
GESTION DU ROUTAGE
CONCLUSION
PAGE 2
INTRODUCTION
Dans le développement d'applications web modernes, React se distingue
comme une bibliothèque puissante pour créer des interfaces utilisateur
dynamiques et interactives. Deux concepts essentiels à maîtriser pour
tirer pleinement parti de React sont la consommation des API et la
gestion du routage. La consommation des API permet de connecter
l'application à des sources de données externes, tandis que le routage
assure une navigation fluide entre les différentes sections de
l'application. Cette présentation explore ces deux aspects
fondamentaux, indispensables pour concevoir des applications robustes
et modernes.
PAGE 3
CONSOMMATION DES API EN REACT
La consommation des API permet à une application de
communiquer avec des services externes ou un backend
pour récupérer ou envoyer des données, rendant les
applications plus interactives et adaptées aux besoins des
utilisateurs.
• API
⚬ Une API (Application Programming Interface) est
un ensemble de règles et de spécifications qui
permettent à différentes applications de
communiquer entre elles. Par exemple,
communiquer avec un serveur pour récupérer ou
envoyer des données, généralement au format
JSON.
PAGE 4
How do APIs work?
PAGE 5
L’endpoint de l’API est sous la forme :
https://jsonplaceholder.typicode.com/todos
PAGE 6
CONSOMMATION DES API EN REACT
REACT est une librairie destinée pour faire l’affichage de
contenu HTML au client, interagir avec le client, récupérer
les requêtes client. il n’est pas responsable pour
consommer un API, c’est le rôle de développeur d’ajouter
la partie du code responsable de cette operation , alors il y
a deux possibilités pour consommer un api dans react :
• L'utilisation de l'API native du navigateur via la
méthode fetch().
• L'utilisation d'une bibliothèque tierce comme Axios,
qui simplifie la gestion des requêtes HTTP.
PAGE 7
L'UTILISATION
DE MÉTHODE
FETCH()
PAGE 8
CONSOMMATION D’UN API PAR FETCH
FONCTIONNEL COMPOSANT :
Lorsque vous consommez une API dans un fonctionnel composant, vous devez utiliser useEffect pour
garantir que les appels réseau s'exécutent au bon moment dans le cycle de vie du composant pour:
Exécuter du code après Éviter les appels infinis Synchroniser les données
le rendu initial avec l'état
Sans useEffect, les appels API
useEffect permet d'exécuter une
peuvent se répéter à chaque re- En combinant useEffect et
fonction après le premier rendu
rendu du composant, ce qui peut useState, vous pouvez récupérer
du composant. Cela garantit que
entraîner une surcharge inutile les données d'une API et les
l'appel à l'API ne se produit qu'une
du serveur et une dégradation des stocker dans l'état pour les
fois que le composant est visible à
performances. Avec useEffect, afficher dynamiquement dans
l'écran.
vous contrôlez précisément le votre interface.
moment où l'appel est effectué.
PAGE 9
Exemple de fetch en react:
le deuxième argument doit contenir
[ ],pour que l’exécution se lance
uniquement au premier rendu.
Si on ne met pas l’argument [ ],le
code sera exécuté à chaque
changement des propriété d’états
useState.
PAGE 10
RENDU CONSOLE
Etant donné que les données response ne sont pas du json, on applique la méthode json à response
qui retourne a une promesse d’où l’enchainement de la deuxième then.
La variable users contient cette fois ci un Array contenant des objet javascript user , en suite on met
à jour la variable d’état utilisateurs en utilisant le setter setUtilisateurs(users).
PAGE 11
L’utilisation async await
PAGE 12
CONSOMMATION D’UN API PAR FETCH
CLASSE COMPOSANT :
Pour les classes composant on met le code de consommation API dans componentDidMount()
PAGE 13
L'UTILISATION LA
BIBLIOTHÈQUE
AXIOS:
PAGE 14
CONSOMMATION D’UN API PAR AXIOS
FONCTIONNEL COMPOSANT:
Consommation d’un API par AXIOS fonctionnel composant:
Axios est un client HTTP simple basé sur les promesses compatibles avec le navigateur et node.js. Il
propose une librairie facile à utiliser et à étendre, le tout dans un tout petit package.
Installation de axios :
importer axios :
PAGE 15
fetch un api avec axios
PAGE 16
Affiche le rendu
console
Le rendu est un objet javascript qui contient les propriétés data, status,
statusText, headers…. On peut remarquer que la propriété data contient un Array
constitué par les objet javaScript user.
PAGE 17
Par ailleurs si on écrit :
On aura le rendu suivant sur le console:
PAGE 18
On peut utiliser async await
PAGE 19
CONSOMMATION D’UN API PAR AXIOS CLASSE COMPOSANT
Pour les classes composant on met le code de consommation API dans componentDidMount()
PAGE 20
GESTION DU
ROUTAGE
PAGE 21
INTRODUCTION
Le routage est une partie essentielle
de toute application React moderne,
car il permet de gérer la navigation
entre différentes pages ou vues
sans recharger la page entière.
PAGE 22
QU'EST-CE QUE LE ROUTAGE ?
Le routage est la capacité d'afficher différentes pages ou sections d'une application en fonction de l'URL
saisie par l'utilisateur ou des actions effectuées, comme cliquer sur un bouton ou un lien. Il permet de
naviguer entre différentes parties d'une application de manière fluide, sans nécessiter un rechargement
complet de la page.
Dans React, le routage est particulièrement utile car il s'agit d'une bibliothèque JavaScript conçue pour
créer des Single Page Applications (SPA). Une SPA fonctionne avec un seul fichier HTML principal,
généralement index.html, qui sert de point d'entrée unique pour toute l'application. Les différentes
sections de l'application sont gérées à l'intérieur de ce fichier grâce aux composants React.
Cependant, React ne fournit pas de solution de routage par défaut. Pour gérer le routage dans une
application React, il est nécessaire d'utiliser une bibliothèque dédiée comme react-router. Cette
bibliothèque permet de configurer et de gérer facilement les différentes routes de l'application, offrant
une expérience utilisateur fluide et intuitive.
PAGE 23
installation de react-router-dom :
Le React Router vous permet de définir des URL dynamiques et de sélectionner un Component approprié pour
render (afficher) sur le navigateur d'utilisateur en correspodance à chaque URL.
PAGE 24
PAGE 25
<BROWSERROUTER> VS <HASHROUTER>
<BrowserRouter>
est utilisé plus couramment, il stocke l'emplacement actuel dans la barre d'adresse du navigateur à l'aide d'URL propres et navigue à l'aide
de la pile d'historique intégrée du navigateur.
Ex: https://exemple.com/about
<HashRouter>
est une solution pratique pour gérer le routage dans des environnements où les URLs propres ne sont pas supportées ou où la configuration
serveur est limitée. Il est idéal pour des projets simples ou hébergés sur des serveurs statiques, mais <BrowserRouter> reste préférable pour
des applications modernes nécessitant une meilleure compatibilité avec les moteurs de recherche et des URLs propres.
Ex: https://exemple.com/#/about
PAGE 26
<ROUTES>
Le composant <Routes> est utilisé
dans React Router pour définir un
ensemble de routes (chemins) dans
une application React.
Il agit comme un conteneur qui
associe chaque URL à un composant
spécifique en utilisant les composants
<Route> qu’il contient.
PAGE 27
<ROUTE>
Le composant <Route> définit une
relation (mapping) entre une URL et
un Component. Cela signifie que
lorsque l'utilisateur visite une URL
sur le navigateur, un Component
correspondant doit être rendu sur
l'interface.
L'attribut exact est utilisé dans le afin de dire que ce ne fonctionnne que si la URL
sur le navigateur correspond absolument à la valeur de son attribut path.
PAGE 28
<LINK>
Le composant <Link> permet à l'utilisateur de naviguer vers une autre
page en cliquant ou en appuyant dessus. Dans react-router-dom, un
rend un élément <a>
PAGE 29
EXEMPLE :
PAGE 30
ROUTAGE
DYNAMIQUE:
QU'EST-CE QUE LE ROUTAGE
DYNAMIQUE ?
Le routage dynamique permet de créer des
routes dont certaines parties changent
dynamiquement en fonction des paramètres
passés dans l'URL. Par exemple, si vous
développez une application avec des pages
dédiées aux produits, chaque produit peut avoir
sa propre URL basée sur son identifiant, comme
/products/1 ou /products/42. Cela offre une
flexibilité pour afficher des contenus
personnalisés ou spécifiques en fonction des
page 31 données.
ROUTAGE DYNAMIQUE:
Dans React Router, le routage dynamique est possible grâce à l'utilisation de
paramètres d'URL dans les chemins de route. Ces paramètres sont définis avec
le symbole : dans le chemin de la route. Par exemple :
Dans cet exemple, :id est un paramètre dynamique qui peut être
remplacé par n'importe quelle valeur, comme un identifiant de produit.
PAGE 32
LE HOOK USEPARAMS()
Pour accéder aux paramètres dynamiques définis dans l'URL, React Router
fournit le hook useParams(). Ce hook retourne un objet contenant les
paramètres de l'URL sous forme de paires clé-valeur.
PAGE 33
CONCLUSION :
En React, la consommation des API et la gestion du routage sont deux éléments clés pour
développer des applications dynamiques et interactives. La consommation des API, grâce à des
outils comme fetch, axios et le hook useEffect, permet de récupérer et de gérer efficacement des
données externes, créant ainsi des expériences utilisateur riches et performantes. Par ailleurs, le
routage, via des bibliothèques comme react-router, offre la possibilité de naviguer entre
différentes pages ou sections sans rechargement complet, renforçant la fluidité et l'intuitivité des
Single Page Applications (SPA). Ensemble, ces pratiques permettent de construire des applications
modernes, connectées et optimisées.
PAGE 34
MERCI DE
VOTRE
ATTENTION.
