SlideShare une entreprise Scribd logo
REACT
Formateur Jaouad Assabbour
Qu'est-ce que React ?
React, parfois appelé framework JavaScript frontal, est une
bibliothèque JavaScript créée par Facebook.
React est un outil pour créer des composants d'interface
utilisateur
React est utilisé pour créer des applications d'une seule page.
Formateur Jaouad Assabbour
Comment fonctionne React ?
React crée un DOM VIRTUEL en mémoire.
Au lieu de manipuler directement le DOM du navigateur, React crée un DOM
virtuel en mémoire, où il effectue toutes les manipulations nécessaires, avant
d'apporter les modifications au DOM du navigateur.
Réagir ne change que ce qui doit être changé !
React découvre quelles modifications ont été apportées et ne modifie que ce qui
doit être modifié.
Vous apprendrez les différents aspects de la façon dont React procède dans le
reste de ce cours.
Formateur Jaouad Assabbour
Historique de React.JS
La version actuelle de React.JS est la V18.0.0 (avril 2022).
La version initiale au public (V0.3.0) était en juillet 2013.
React.JS a été utilisé pour la première fois en 2011 pour la fonction
Newsfeed de Facebook.
L'ingénieur logiciel de Facebook, Jordan Walke, l'a créé.
La version actuelle de create-react-app est v5.0.1 (avril 2022).
create-react-app inclut des outils intégrés tels que webpack, Babel
et ESLint.
Formateur Jaouad Assabbour
Mise en place d'un environnement React
Pour utiliser React en production, vous avez besoin de npm qui est inclus
avec NODE.JS
Si vous avez installé npx et Node.js , vous pouvez créer une application
React en utilisant create-react-app.
Le create-react-app configurera tout ce dont vous avez besoin
pour exécuter une application React.
Exécutez l'application React
Vous êtes maintenant prêt à exécuter votre première véritable application
React !
Exécutez cette commande pour accéder au my-react-apprépertoire :
Formateur Jaouad Assabbour
Exécutez cette commande pour exécuter l'application React my-react-
app :
Une nouvelle fenêtre de navigateur apparaîtra avec votre application React
nouvellement créée!
Sinon, ouvrez votre navigateur et tapez localhost:3000 dans la barre
d'adresse.
Le résultat :
Formateur Jaouad Assabbour
Modifier l'application React
Jusqu'ici tout va bien, mais comment modifier le contenu ?
Regardez dans le my-react-apprépertoire et vous trouverez un dossier
src. Dans le dossier src, il y a un fichier appelé App.js, ouvrez-le et il
ressemblera à ceci :
Formateur Jaouad Assabbour
Essayez de modifier le contenu HTML et enregistrez le fichier.
Remplacez tout le contenu à l'intérieur du
<div className="App">par un <h1> élément.
Voir les modifications dans le navigateur lorsque vous cliquez sur
Enregistrer.
Le résultat
Formateur Jaouad Assabbour
La fonction de rendu
React affiche le HTML sur la page Web en utilisant une fonction appelée
ReactDOM.render().
La fonction ReactDOM.render() prend deux arguments, le code
HTML et un élément HTML.
Le but de la fonction est d'afficher le code HTML spécifié à
l'intérieur de l'élément HTML spécifié.
Mais rendre où ?
Il existe un autre dossier dans le répertoire racine de votre projet
React, nommé "public". Dans ce dossier, il y a un fichier
index.html.
Vous en remarquerez un <div> dans le corps de ce fichier. C'est
là que notre application React sera rendue.
Exemple
Afficher un paragraphe à l'intérieur d'un élément avec l'id de "root":
Le résultat est affiché dans l' <div id="root">élément :
Formateur Jaouad Assabbour
Réagir JSX
Qu'est-ce que JSX ?
JSX signifie JavaScript XML.
JSX nous permet d'écrire du HTML dans React.
JSX facilite l'écriture et l'ajout de HTML dans React.
JSX nous permet d'écrire des éléments HTML en JavaScript et de les
placer dans le DOM sans aucune createElement() et/ou méthode.
appendChild()
JSX convertit les balises HTML en éléments de réaction.
Exemple
Formateur Jaouad Assabbour
React Components
Les composants sont des morceaux de code indépendants et
réutilisables. Elles ont le même objectif que les fonctions
JavaScript, mais fonctionnent de manière isolée et renvoient du
HTML.
Les composants sont de deux types, les composants de classe et
les composants de fonction. Dans ce cours, nous nous
concentrerons sur les composants de fonction.
Créez votre premier composant
composant de classe appelé Car
Lors de la création d'un composant React, le nom du composant doit
commencer par une lettre majuscule.
Un composant de classe doit inclure l' extends React.Component
instruction.
Cette instruction crée un héritage pour React.Component et donne à votre
composant l'accès aux fonctions de React.Component.
Formateur Jaouad Assabbour
Le composant nécessite également une méthode render(), cette
méthode renvoie HTML.
Composant de fonction
Voici le même exemple que ci-dessus, mais créé à l'aide d'un composant
Function à la place.
Un composant Function renvoie également HTML et se comporte à peu
près de la même manière qu'un composant Class, mais les composants
Function peuvent être écrits en utilisant beaucoup moins de code, sont plus
faciles à comprendre et seront préférés dans ce cours.
Rendu d'un composant
Maintenant, votre application React a un composant appelé Car, qui
renvoie un élément <h2>.
Pour utiliser ce composant dans votre application, utilisez une syntaxe
similaire à celle du HTML normal : <Car />
Affichez le Carcomposant dans l'élément "racine":
Formateur Jaouad Assabbour
Composants dans Composants
Nous pouvons faire référence à des composants à l'intérieur
d'autres composants :
Exemple
Utilisez le composant Car dans le composant Garage :
Voici le nouveau fichier, nous l'avons nommé "Car.js":
Formateur Jaouad Assabbour
Pour pouvoir utiliser le composant Car, vous devez importer le fichier dans
votre application.
React Class Components
Avant React 16.8, les composants de classe étaient le seul moyen de suivre
l'état et le cycle de vie d'un composant React. Les composants fonctionnels
étaient considérés comme "sans état".
Avec l'ajout de Hooks, les composants Function sont désormais presque
équivalents aux composants Class. Les différences sont si mineures que
vous n'aurez probablement jamais besoin d'utiliser un composant Class
dans React.
Même si les composants Function sont préférés, il n'existe actuellement
aucun plan pour supprimer les composants Class de React.
Cette section vous donnera un aperçu de la façon d'utiliser les composants
de classe dans React.
Formateur Jaouad Assabbour
Créer un composant de classe
Lors de la création d'un composant React, le nom du composant doit commencer par
une lettre majuscule.
Le composant doit inclure l' extends React.Component instruction, cette
instruction crée un héritage à React.Component et donne à votre composant l'accès
aux fonctions de React.Component.
Le composant nécessite également une méthode render(), cette méthode renvoie
HTML.
Exemple : Créez un composant de classe appelé Car
Maintenant, votre application React a un composant appelé Car, qui renvoie un <h2>
élément.
Pour utiliser ce composant dans votre application, utilisez une syntaxe similaire à
celle du HTML normal : <Car />
Formateur Jaouad Assabbour
Component Constructor
S'il y a une fonction constructor() dans votre composant, cette fonction sera
appelée lorsque le composant sera lancé.
La fonction constructeur est l'endroit où vous initiez les propriétés du composant.
Dans React, les propriétés des composants doivent être conservées dans un objet
appelé state.
Vous en apprendrez plus state tard dans ce cours.
La fonction constructeur est également l'endroit où vous honorez l'héritage du
composant parent en incluant l' super() instruction, qui exécute la fonction
constructeur du composant parent, et votre composant a accès à toutes les fonctions
du composant parent ( React.Component).
Exemple: Créez une fonction constructeur dans le composant Car et ajoutez
une propriété de couleur :
Utilisez la propriété color dans la fonction render() :
Formateur Jaouad Assabbour
Props
Une autre façon de gérer les propriétés des composants consiste à utiliser props.
Les accessoires sont comme des arguments de fonction, et vous les envoyez dans le
composant en tant qu'attributs.
Vous en apprendrez plus props dans le chapitre suivant.
Utilisez un attribut pour passer une couleur au composant Car et utilisez-le dans la
fonction render() :
Props in the Constructor
Si votre composant a une fonction de constructeur, les accessoires doivent toujours être passés au
constructeur et également au React.Component via la méthode super().
Formateur Jaouad Assabbour
Composants dans Composants
Nous pouvons faire référence à des composants à l'intérieur d'autres composants :
Utilisez le composant Car dans le composant Garage :
State
État du composant de la classe React
Les composants de la classe React ont un objet state intégré.
Vous avez peut-être remarqué que nous avons utilisé state plus tôt dans la section
constructeur de composants.
L' objet state est l'endroit où vous stockez les valeurs de propriété qui
appartiennent au composant.
Lorsque l' objet state change, le composant s'affiche à nouveau.
Formateur Jaouad Assabbour
Création de l'objet d'état
L'objet d'état est initialisé dans le constructeur :
L'objet d'état peut contenir autant de propriétés que vous le
souhaitez :
Exemple : Spécifiez toutes les propriétés dont votre composant a besoin :
Formateur Jaouad Assabbour
Utilisation de l' stateobjet
Faites référence à l' objet state n'importe où dans le composant en utilisant la
syntaxe : this.state.propertyname
Reportez-vous à l'objet state dans la méthode render():
Formateur Jaouad Assabbour
Modification de l'objet state
Pour modifier une valeur dans l'objet satate, utilisez la méthode
this.setState().
Lorsqu'une valeur dans l' objet state change, le composant sera restitué, ce qui
signifie que la sortie changera en fonction de la ou des nouvelles valeurs.
Exemple : Ajoutez un bouton avec onClick événement qui modifiera la propriété
color
Formateur Jaouad Assabbour
Utilisez toujours la méthode setState() pour modifier l'objet d'état, cela garantira que le
composant sait qu'il a été mis à jour et appelle la méthode render() (et toutes les autres méthodes du
cycle de vie).
Lifecycle of Components
Chaque composant de React a un cycle de vie que vous pouvez surveiller et
manipuler au cours de ses trois phases principales.
Les trois phases sont : Montage , Mise à jour et Démontage
Montage
Le montage signifie mettre des éléments dans le DOM.
React a quatre méthodes intégrées qui sont appelées, dans cet ordre, lors du montage d'un
composant :
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
La méthode render() est obligatoire et sera toujours appelée, les autres sont facultatives et
seront appelées si vous les définissez.
constructor
La méthode constructor() est appelée avant toute autre chose, lorsque le composant
est lancé, et c'est l'endroit naturel pour configurer les state valeurs initiales et autres
initiales.
La méthode constructor() est appelée avec le props, comme arguments, et vous devez toujours
commencer par appeler le super(props) avant toute autre chose, cela lancera la méthode
constructeur du parent et permettra au composant d'hériter des méthodes de son parent (
React.Component).
Formateur Jaouad Assabbour
Example :
La méthode constructor est appelée, par React, à chaque fois que vous créez un composant :
getDerivedStateFromProps
La méthode getDerivedStateFromProps() est appelée juste avant de rendre le ou les
éléments dans le DOM.
C'est l'endroit naturel pour définir l'objet state en fonction de l'initiale props.
Il prend state comme argument et renvoie un objet avec les modifications apportées au fichier
state.
L'exemple ci-dessous commence avec la couleur préférée étant "rouge", mais la méthode
getDerivedStateFromProps() met à jour la couleur préférée en fonction de l'attribut
favcol :
Exemple:
La méthode getDerivedStateFromProps est appelée juste avant la méthode render :
Formateur Jaouad Assabbour
rendre
La méthode render() est obligatoire et est la méthode qui génère réellement le code HTML
dans le DOM.
Exemple:
Un composant simple avec une méthode render() simple :
Formateur Jaouad Assabbour
composantDidMount
La méthode componentDidMount() est appelée après le rendu du composant.
C'est là que vous exécutez des instructions qui nécessitent que le composant soit déjà placé
dans le DOM.
Exemple:
Au début, ma couleur préférée est le rouge, mais donnez-moi une seconde, et c'est le jaune à la
place:
Formateur Jaouad Assabbour
Mise à jour
Un composant est mis à jour chaque fois qu'il y a un changement dans le composant
state ou props.
React a cinq méthodes intégrées qui sont appelées, dans cet ordre, lorsqu'un
composant est mis à jour :
1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()
La méthode render() est obligatoire et sera toujours appelée, les autres sont
facultatives et seront appelées si vous les définissez.
GetDerivedStateFromProps()
Lors des mises à jour , la méthode getDerivedStateFromProps est également
appelée. Il s'agit de la première méthode appelée lorsqu'un composant est mis à jour.
C'est toujours l'endroit naturel pour définir l'objet state en fonction des accessoires
initiaux.
L'exemple ci-dessous a un bouton qui change la couleur préférée en bleu, mais
puisque la méthode getDerivedStateFromProps()est appelée, qui met à jour
l'état avec la couleur de l'attribut favcol, la couleur préférée est toujours rendue en
jaune :
Exemple:
Si le composant est mis à jour, la méthode getDerivedStateFromProps() est appelée :
Formateur Jaouad Assabbour
shouldComponentUpdate()
Dans la méthode shouldComponentUpdate(), vous pouvez renvoyer
une valeur booléenne qui spécifie si React doit continuer le rendu
ou non.
La valeur par défaut est true.
L'exemple ci-dessous montre ce qui se passe lorsque la méthode
shouldComponentUpdate() retourne false:
Formateur Jaouad Assabbour
Example:
Arrêtez le rendu du composant à chaque mise à jour :
Formateur Jaouad Assabbour
Exemple:
Même exemple que ci-dessus, mais cette fois la méthode shouldComponentUpdate()
renvoie à la place true :
rendre
La méthode render() est bien sûr appelée lorsqu'un composant est mis à jour , il doit restituer le
HTML au DOM, avec les nouvelles modifications.
L'exemple ci-dessous a un bouton qui change la couleur préférée en bleu :
Exemple :
Cliquez sur le bouton pour modifier l'état du composant :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
getSnapshotBeforeUpdate()
Dans la méthode getSnapshotBeforeUpdate(), vous avez accès à props et state avant
la mise à jour, ce qui signifie que même après la mise à jour, vous pouvez vérifier quelles étaient les
valeurs avant la mise à jour.
Si la méthode getSnapshotBeforeUpdate() est présente, vous devez également inclure la
méthode componentDidUpdate(), sinon vous obtiendrez une erreur.
L'exemple ci-dessous peut sembler compliqué, mais il ne fait que ceci :
Lorsque le composant est monté , il est rendu avec la couleur préférée "rouge".
Lorsque le composant est monté, une minuterie change l'état, et au bout d'une seconde, la couleur
préférée devient "jaune".
Cette action déclenche la phase de mise à jour , et puisque ce composant a une méthode
getSnapshotBeforeUpdate(), cette méthode est exécutée, et écrit un message dans
l'élément vide DIV1.
Ensuite, la componentDidUpdate()méthode est exécutée et écrit un message dans l'élément
vide DIV2 :
Exemple:
Utilisez la méthode getSnapshotBeforeUpdate()pour savoir à quoi stateressemblait
l'objet avant la mise à jour :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
componentDidUpdate
La méthode componentDidUpdate est appelée après la mise à jour du composant dans le
DOM.
L'exemple ci-dessous peut sembler compliqué, mais il ne fait que ceci :
Lorsque le composant est monté , il est rendu avec la couleur préférée "rouge".
Lorsque le composant a été monté, une minuterie change l'état, et la couleur devient "jaune".
Cette action déclenche la phase de mise à jour , et comme ce composant possède une méthode
componentDidUpdate, cette méthode est exécutée et écrit un message dans l'élément DIV
vide :
Exemple :
La méthode componentDidUpdate est appelée après le rendu de la mise à jour dans le DOM :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Unmounting
La phase suivante du cycle de vie est lorsqu'un composant est supprimé du DOM, ou
démonté comme React aime l'appeler.
React n'a qu'une seule méthode intégrée qui est appelée lorsqu'un composant est
démonté :
componentWillUnmount
La méthode componentWillUnmount est appelée lorsque le composant est sur le point d'être
supprimé du DOM.
Formateur Jaouad Assabbour
React Props
Les Props sont des arguments passés dans les composants React.
Les Props sont transmis aux composants via des attributs HTML.
Les Props représente les propriétés
React Props
Les props React sont comme des arguments de fonction en JavaScript et des attributs
en HTML.
Pour envoyer des props dans un composant, utilisez la même syntaxe que les attributs
HTML :
Exemple
Ajoutez un attribut "brand" à l'élément Car :
Le composant reçoit l'argument en tant qu'objet props :
Exemple
Utilisez l'attribut brand dans le composant :
Formateur Jaouad Assabbour
Passer les données
Les accessoires sont également la façon dont vous transmettez des données
d'un composant à un autre, en tant que paramètres.
Exemple
Envoyez la propriété "brand" du composant Garage au composant Car :
Si vous avez une variable à envoyer, et non une chaîne comme dans l'exemple ci-
dessus, il vous suffit de mettre le nom de la variable entre accolades :
Example
Créez une variable nommée carName et envoyez-la au Carcomposant :
Formateur Jaouad Assabbour
Ou si c'était un objet :
Exemple
Créez un objet nommé carInfo et envoyez-le au Car composant :
Formateur Jaouad Assabbour
React Events
Tout comme les événements HTML DOM, React peut effectuer des actions basées
sur des événements utilisateur.
React a les mêmes événements que HTML : click, change, mouseover etc.
Ajout d'événements
Les événements React sont écrits en syntaxe camelCase :
onClick au lieu de onclick.
Les gestionnaires d'événements React sont écrits entre accolades :
onClick={shoot} au lieu de onClick="shoot()".
Exemple:
Mettez la fonction shoot à l'intérieur du composant Football :
Passer des arguments
Pour passer un argument à un gestionnaire d'événements, utilisez une fonction
fléchée.
Formateur Jaouad Assabbour
Exemple:
Envoyer "Objectif !" en tant que paramètre de la shoot fonction, en utilisant la fonction fléchée :
Objet d'événement de réaction
Les gestionnaires d'événements ont accès à l'événement React qui a déclenché la
fonction.
Dans notre exemple, l'événement est l'événement "clic".
Exemple:
Fonction Flèche : Envoi manuel de l'objet événement :
Formateur Jaouad Assabbour
Réagir le rendu conditionnel
Dans React, vous pouvez effectuer un rendu conditionnel des composants.
Il y a plusieurs moyens de le faire.
If Statement
Nous pouvons utiliser l' ifopérateur JavaScript pour décider quel composant rendre.
Exemple:
Nous utiliserons ces deux composants :
Exemple:
Maintenant, nous allons créer un autre composant qui choisit le composant à afficher en
fonction d'une condition :
Formateur Jaouad Assabbour
Essayez de changer l' attribut isGoal en true :
&& Opérateur logique
Une autre façon de rendre conditionnellement un composant React consiste à utiliser
l' opérateur &&.
Exemple:
Nous pouvons intégrer des expressions JavaScript dans JSX en utilisant
des accolades :
Si cars.length est égal à vrai, l'expression après && sera rendue.
Formateur Jaouad Assabbour
Opérateur ternaire
Une autre façon de restituer des éléments de manière conditionnelle consiste à utiliser
un opérateur ternaire.
Nous allons reprendre l'exemple du but.
Example:
Renvoie le composant MadeGoal si isGoal est true, sinon renvoie le
composant MissedGoal:
Formateur Jaouad Assabbour
Listes de réaction
Dans React, vous rendrez des listes avec un certain type de boucle.
La méthode de tableau JavaScript map()est généralement la méthode préférée.
Exemple:
Rendons toutes les voitures de notre garage :
Lorsque vous exécutez ce code dans votre create-react-app, cela fonctionnera
mais vous recevrez un avertissement indiquant qu'aucune "clé" n'est fournie pour les
éléments de la liste.
Clés
Les clés permettent à React de garder une trace des éléments. De cette façon, si un
élément est mis à jour ou supprimé, seul cet élément sera restitué au lieu de la liste
entière.
Les clés doivent être uniques pour chaque frère. Mais ils peuvent être dupliqués à
l'échelle mondiale.
Formateur Jaouad Assabbour
Exemple :
Refactorisons notre exemple précédent pour inclure les clés :
Formateur Jaouad Assabbour
Formulaires de réaction
Tout comme en HTML, React utilise des formulaires pour permettre aux utilisateurs
d'interagir avec la page Web.
Ajouter des formulaires dans React
Vous ajoutez un formulaire avec React comme n'importe quel autre élément :
Cela fonctionnera normalement, le formulaire sera soumis et la page sera actualisée.
Mais ce n'est généralement pas ce que nous voulons qu'il se passe dans React.
Nous voulons empêcher ce comportement par défaut et laisser React contrôler le
formulaire.
Formateur Jaouad Assabbour
Gestion des formulaires
La gestion des formulaires concerne la façon dont vous gérez les données lorsqu'elles
changent de valeur ou sont soumises.
En HTML, les données de formulaire sont généralement gérées par le DOM.
Dans React, les données de formulaire sont généralement gérées par les composants.
Lorsque les données sont gérées par les composants, toutes les données sont stockées
dans l'état du composant.
Vous pouvez contrôler les modifications en ajoutant des gestionnaires d'événements
dans l'attribut onChange.
Nous pouvons utiliser le crochet useState pour garder une trace de chaque valeur
d'entrée et fournir une "source unique de vérité" pour l'ensemble de l'application.
Exemple:
Utilisez le Hook useState pour gérer l'entrée :
Formateur Jaouad Assabbour
Envoi de formulaires
Vous pouvez contrôler l'action submit en ajoutant un gestionnaire d'événement dans
l'attribut onSubmit pour <form> :
Formateur Jaouad Assabbour
Champs de saisie multiples
Vous pouvez contrôler les valeurs de plusieurs champs de saisie en ajoutant un
attribut name à chaque élément.
Nous allons initialiser notre état avec un objet vide.
Pour accéder aux champs du gestionnaire d'événements, utilisez la syntaxe
event.target.name et .event.target.value
Pour mettre à jour l'état, utilisez des Hooks [notation entre Hooks] autour du nom de
la propriété.
Exemple
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Zone de texte
L'élément textarea dans React est légèrement différent du HTML ordinaire.
En HTML, la valeur d'un textarea était le texte entre la balise de début <textarea>
et la balise de fin </textarea>.
Dans React, la valeur d'une zone de texte est placée dans un attribut de valeur. Nous
utiliserons le useStateHook pour gérer la valeur de textarea :
Formateur Jaouad Assabbour
Select
Une liste déroulante, ou une zone de sélection, dans React est également un peu
différente du HTML.
en HTML, la valeur sélectionnée dans la liste déroulante a été définie avec l' attribut
selected :
Exemple:
Une simple boîte de sélection, où la valeur sélectionnée "Volvo" est initialisée dans le
constructeur :
En apportant ces légères modifications à <textarea>et <select>, React est
capable de gérer tous les éléments d'entrée de la même manière.
Formateur Jaouad Assabbour
React Router
Create React App n'inclut pas le routage de page.
React Router est la solution la plus populaire.
Ajouter un routeur React
Pour ajouter React Router dans votre application, exécutez-le dans le terminal à partir
du répertoire racine de l'application :
Structure des dossiers
Pour créer une application avec plusieurs itinéraires de page, commençons d'abord
par la structure du fichier.
Dans le dossier src, nous allons créer un dossier pages nommé avec plusieurs
fichiers :
srcpages:
• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js
Chaque fichier contiendra un composant React très basique.
Utilisation de base
Nous allons maintenant utiliser notre routeur dans notre fichier. index.js
Formateur Jaouad Assabbour
Exemple
Utilisez React Router pour router vers des pages basées sur l'URL :
index.js:
Formateur Jaouad Assabbour
Exemple expliqué
Nous enveloppons d'abord notre contenu avec <BrowserRouter>.
Ensuite, nous définissons notre <Routes>. Une application peut avoir plusieurs
<Routes>. Notre exemple de base n'en utilise qu'un.
<Route>s peuvent être imbriqués. Le premier <Route>a un chemin d'accès / et
rend le composant Layout.
Les s imbriqués <Route> héritent et s'ajoutent à la route parent. Ainsi, le blog
schemin est combiné avec le parent et devient /blogs.
La route Home de composant n'a pas de chemin mais a un attribut index. Cela
spécifie cette route comme route par défaut pour la route parente, qui est /.
Définir le path à * agira comme un fourre-tout pour toutes les URL non définies.
C'est parfait pour une page d'erreur 404.
Pages / Composants
Le composant Layout a des éléments <Outlet>et <Link>.
Le <Outlet>rend l'itinéraire actuel sélectionné.
<Link>est utilisé pour définir l'URL et garder une trace de l'historique de
navigation.
Chaque fois que nous établirons un lien vers un chemin interne, nous utiliserons à la
<Link> place de <a href="">.
La "route de mise en page" est un composant partagé qui insère un contenu commun
sur toutes les pages, comme un menu de navigation.
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Styliser React à l'aide de CSS
Il existe de nombreuses façons de styliser React avec CSS, ce cours examinera de
plus près trois méthodes courantes :
• Style en ligne
• Feuilles de style CSS
• Modules CSS
Style en ligne
Pour styliser un élément avec l'attribut inline style, la valeur doit être un objet
JavaScript :
Exemple:
Insérez un objet avec les informations de style :
Noms de propriété camelCased
Étant donné que le CSS en ligne est écrit dans un objet JavaScript, les propriétés avec
des séparateurs de tirets, comme background-color, doivent être écrites avec
une syntaxe camel :
Formateur Jaouad Assabbour
Objet JavaScript
Vous pouvez également créer un objet avec des informations de style et y faire
référence dans l'attribut style :
Feuille de style CSS
Vous pouvez écrire votre style CSS dans un fichier séparé, enregistrez simplement le fichier avec
l' extension de fichier.css et importez-le dans votre application.
App.css :
Créez un nouveau fichier appelé "App.css" et insérez-y du code CSS :
Formateur Jaouad Assabbour
Importez la feuille de style dans votre application :
Modules CSS
Une autre façon d'ajouter des styles à votre application consiste à utiliser des modules
CSS.
Les modules CSS sont pratiques pour les composants placés dans des fichiers
séparés.
Formateur Jaouad Assabbour
Créez le module CSS avec l' extension.module.css, exemple : my-
style.module.css.
Créez un nouveau fichier appelé "my-style.module.css" et insérez-y du code CSS :
mon-style.module.css :
Importez la feuille de style dans votre composant :
Formateur Jaouad Assabbour
React Hooks
Des Hooks ont été ajoutés à React dans la version 16.8.
Les Hooks permettent aux composants fonctionnels d'avoir accès à l'état et à d'autres
fonctionnalités de React. De ce fait, les composants de classe ne sont généralement
plus nécessaires.
Qu'est-ce qu'un crochet ?
Les hooks nous permettent de "s'accrocher" aux fonctionnalités de React telles que
les méthodes d'état et de cycle de vie.
Exemple:
Voici un exemple de Hooks. Ne vous inquiétez pas si cela n'a pas de sens. Nous
entrerons plus en détail dans la section suivante .
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Vous devez import Hooks de react.
Ici, nous utilisons le Hooks useState pour suivre l'état de l'application.
L'état fait généralement référence aux données d'application ou aux propriétés qui
doivent être suivies.
Règles de Hooks
Il y a 3 règles pour les hooks :
• Les hooks ne peuvent être appelés qu'à l'intérieur des composants de la
fonction React.
• Les Hooks ne peuvent être appelés qu'au niveau supérieur d'un composant.
• Les Hooks ne peuvent pas être conditionnels
Formateur Jaouad Assabbour
React useState Hook
Le React Hook useState nous permet de suivre l'état d'un composant de fonction.
L'état fait généralement référence aux données ou aux propriétés qui doivent être
suivies dans une application.
Importer useState
Pour utiliser le Hooks useState, nous devons d'abord l'insérer import dans
notre composant.
Notez que nous détruisons useState car react il s'agit d'une exportation
nommée.
Initialiser useState
Nous initialisons notre état en appelant notre composant useState de fonction.
UseState accepte un état initial et renvoie deux valeurs :
• L'état actuel.
• Une fonction qui met à jour l'état.
Exemple:
Initialiser l'état en haut du composant de fonction.
Formateur Jaouad Assabbour
Notez qu'encore une fois, nous détruisons les valeurs renvoyées par useState.
La première valeur, color, est notre état actuel.
La deuxième valeur, setColor, est la fonction utilisée pour mettre à jour notre état.
Enfin, nous définissons l'état initial sur une chaîne vide : useState("")
Lire l'état
Nous pouvons maintenant inclure notre état n'importe où dans notre composant.
Exemple:
Utilisez la variable d'état dans le composant rendu.
Mettre à jour l'état
Pour mettre à jour notre état, nous utilisons notre fonction de mise à jour d'état.
Formateur Jaouad Assabbour
Que peut contenir l'État
Le Hooks useState peut être utilisé pour garder une trace des chaînes, des
nombres, des booléens, des tableaux, des objets et de toute combinaison de ceux-ci !
Nous pourrions créer plusieurs Hooks d'état pour suivre les valeurs individuelles.
Formateur Jaouad Assabbour
Ou, nous pouvons simplement utiliser un état et inclure un objet à la place !
Formateur Jaouad Assabbour
Mise à jour des objets et des tableaux dans l'état
Lorsque l'état est mis à jour, l'état entier est écrasé.
Et si nous voulions seulement mettre à jour la couleur de notre voiture ?
Si nous n'appelions que setCar({color: "blue"}), cela supprimerait la
marque, le modèle et l'année de notre état.
Nous pouvons utiliser l'opérateur de propagation JavaScript pour nous aider.
Exemple:
Utilisez l'opérateur de propagation JavaScript pour mettre à jour uniquement la
couleur de la voiture :
Formateur Jaouad Assabbour
Parce que nous avons besoin de la valeur actuelle de l'état, nous passons une fonction
dans notre setCar fonction. Cette fonction reçoit la valeur précédente.
Nous renvoyons ensuite un objet, en étalant le previous State et en écrasant
uniquement la couleur.
Formateur Jaouad Assabbour
React useEffect Hooks
Le Hooks useEffect vous permet d'effectuer des effets secondaires dans vos
composants.
Quelques exemples d'effets secondaires sont : la récupération de données, la
mise à jour directe du DOM et les minuteries.
UseEffect accepte deux arguments. Le deuxième argument est facultatif.
useEffect(<function>, <dependency>)
Exemple:
Utilisez setTimeout() pour compter 1 seconde après le rendu initial :
Formateur Jaouad Assabbour
Mais attendez!! Il continue de compter même s'il ne devrait compter qu'une seule fois
!
UseEffect s'exécute sur chaque rendu. Cela signifie que lorsque le nombre
change, un rendu se produit, ce qui déclenche alors un autre effet.
Ce n'est pas ce que nous voulons. Il existe plusieurs façons de contrôler le moment où
les effets secondaires se manifestent.
Nous devons toujours inclure le deuxième paramètre qui accepte un tableau. Nous
pouvons éventuellement transmettre des dépendances à useEffect dans ce
tableau.
Donc, pour résoudre ce problème, exécutons cet effet uniquement sur le rendu initial.
Formateur Jaouad Assabbour
Exemple:
Voici un exemple de useEffectHook dépendant d'une variable. Si la variable
count est mise à jour, l'effet s'exécutera à nouveau :
S'il existe plusieurs dépendances, elles doivent être incluses dans le tableau
useEffect de dépendances.
Formateur Jaouad Assabbour
Nettoyage d'effet
Certains effets nécessitent un nettoyage pour réduire les fuites de mémoire.
Les délais d'expiration, les abonnements, les écouteurs d'événements et les autres
effets qui ne sont plus nécessaires doivent être supprimés.
Nous faisons cela en incluant une fonction de retour à la fin du Hook useEffect.
Exemple
Nettoyez la minuterie à la fin du Hook useEffect :
Formateur Jaouad Assabbour
React useContext Hook
Contexte de réaction
React Context est un moyen de gérer l'état globalement.
Il peut être utilisé avec le Hooks useState pour partager l'état entre des
composants profondément imbriqués plus facilement qu'avec seul useState
Le problème
L'état doit être détenu par le composant parent le plus élevé de la pile qui nécessite
l'accès à l'état.
Pour illustrer, nous avons de nombreux composants imbriqués. Le composant en haut
et en bas de la pile doit accéder à l'état.
Pour ce faire sans contexte, nous devrons passer l'état en tant que "accessoires" à
travers chaque composant imbriqué. C'est ce qu'on appelle le "forage d'appui".
Exemple:
Passer des "accessoires" à travers des composants imbriqués :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Même si les composants 2 à 4 n'avaient pas besoin de l'état, ils devaient transmettre
l'état pour qu'il puisse atteindre le composant 5.
La solution
La solution est de créer un contexte.
Pour créer un contexte, vous devez l'importer createContext et l'initialiser :
Ensuite, nous utiliserons le fournisseur de contexte pour envelopper l'arborescence
des composants qui ont besoin du contexte d'état.
Fournisseur de contexte
Enveloppez les composants enfants dans le fournisseur de contexte et fournissez la valeur d'état.
Désormais, tous les composants de cette arborescence auront accès au contexte utilisateur.
Utilisez le useContext Hook
Pour utiliser le contexte dans un composant enfant, nous devons y accéder à l'aide du
useContext hook.
Tout d'abord, incluez le useContext dans l'instruction d'importation :
Formateur Jaouad Assabbour
Ensuite, vous pouvez accéder au contexte utilisateur dans tous les composants :
Exemple:
Voici l'exemple complet utilisant React Context :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
React useRef Hook
Le Hook useRef vous permet de conserver des valeurs entre les rendus.
Il peut être utilisé pour stocker une valeur modifiable qui ne provoque pas de
nouveau rendu lors de la mise à jour.
Il peut être utilisé pour accéder directement à un élément DOM.
Ne provoque pas de re-rendus
Si nous essayions de compter le nombre de rendus de notre application à l'aide du
useState Hook, nous serions pris dans une boucle infinie puisque ce Hook lui-
même provoque un nouveau rendu.
Pour éviter cela, nous pouvons utiliser le useRef Hook.
Formateur Jaouad Assabbour
UseRef() ne renvoie qu'un seul élément. Il renvoie un objet appelé current.
Lorsque nous initialisons useRef, nous définissons la valeur initiale : useRef(0).
Accéder aux éléments DOM
En général, nous voulons laisser React gérer toutes les manipulations du DOM.
Mais il existe des cas où useRef il peut être utilisé sans causer de problèmes.
Dans React, on peut ajouter un attribut ref à un élément pour y accéder directement
dans le DOM.
Formateur Jaouad Assabbour
Suivi des changements d'état
Le useRef Hook peut également être utilisé pour garder une trace des valeurs
d'état précédentes.
En effet, nous sommes capables de conserver des useRef valeurs entre les rendus.
Exemple:
Utilisez useRefpour garder une trace des valeurs d'état précédentes :
Cette fois, nous utilisons une combinaison de useState, useEffect et useRef
pour garder une trace de l'état précédent.
Dans le useEffect, nous mettons à jour la useRefvaleur actuelle chaque fois que
le inputValue est mis à jour en saisissant du texte dans le champ de saisie.
Formateur Jaouad Assabbour
React useReducer Hook
Le useReducer Hook est similaire au useState Hook
Il permet une logique d'état personnalisée.
Si vous vous retrouvez à suivre plusieurs éléments d'état qui reposent sur une logique
complexe, useReducer cela peut être utile.
La fonction reducer contient votre logique d'état personnalisée et
initialState peut être une valeur simple mais contiendra généralement un
objet.
Le useReducer Hook renvoie le courant state et une méthode dispatch.
Voici un exemple useReducer dans une application de compteur :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
React useCallback Hook
Le React useCallbackHook renvoie une fonction de rappel mémorisée.
Cela nous permet d'isoler les fonctions gourmandes en ressources afin qu'elles ne
s'exécutent pas automatiquement à chaque rendu.
Le useCallback Hook ne s'exécute que lorsque l'une de ses dépendances est
mise à jour.
Cela peut améliorer les performances.
Problème
L'une des raisons de l'utiliser useCallback est d'empêcher un composant de se
restituer à moins que ses accessoires n'aient changé.
Dans cet exemple, vous pourriez penser que le Todos composant ne sera pas
restitué à moins que le todos changement :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
Fin …
Merci pour votre attention .
JAOUAD ASSABBOUR
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour

Contenu connexe

Tendances

Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
ENSET, Université Hassan II Casablanca
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
Sonam TCHEUTSEUN
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
Florian Beaufumé
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
Lilia Sfaxi
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Eric Bourdet
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
Abdoulaye Dieng
 
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Ayoub Rouzi
 
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
ENSET, Université Hassan II Casablanca
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
Youness Boukouchi
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
ENSET, Université Hassan II Casablanca
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
 
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 

Similaire à React-cours.pdf

React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
Sem Koto
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
Sem Koto
 
cours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJScours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJS
aissamjadli
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
zineblahib2
 
2016_js_react.pdf
2016_js_react.pdf2016_js_react.pdf
2016_js_react.pdf
mohamedelhachicha
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser65180a
 
Chapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfChapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdf
HassanHachicha2
 
ESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptx
aissamjadli
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser192642
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
aliagadir
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
zineblahib2
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentaux
Alphorm
 
cours-gratuit.com--id-4422.pdf
cours-gratuit.com--id-4422.pdfcours-gratuit.com--id-4422.pdf
cours-gratuit.com--id-4422.pdf
lhoussainebouganfou
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
cours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdfcours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdf
ssuser192642
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 

Similaire à React-cours.pdf (20)

React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
cours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJScours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJS
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
2016_js_react.pdf
2016_js_react.pdf2016_js_react.pdf
2016_js_react.pdf
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Chapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfChapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdf
 
ESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptx
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentaux
 
cours-gratuit.com--id-4422.pdf
cours-gratuit.com--id-4422.pdfcours-gratuit.com--id-4422.pdf
cours-gratuit.com--id-4422.pdf
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
cours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdfcours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdf
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 

Plus de Jaouad Assabbour

Kubernetes (k8s).pdf
Kubernetes (k8s).pdfKubernetes (k8s).pdf
Kubernetes (k8s).pdf
Jaouad Assabbour
 
docker.pdf
docker.pdfdocker.pdf
docker.pdf
Jaouad Assabbour
 
Ansible-cours .pdf
Ansible-cours .pdfAnsible-cours .pdf
Ansible-cours .pdf
Jaouad Assabbour
 
test-formulaire-angular.pdf
test-formulaire-angular.pdftest-formulaire-angular.pdf
test-formulaire-angular.pdf
Jaouad Assabbour
 
spring-api-rest.pdf
spring-api-rest.pdfspring-api-rest.pdf
spring-api-rest.pdf
Jaouad Assabbour
 
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdfJWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
Jaouad Assabbour
 
js.pdf
js.pdfjs.pdf
ajax.pdf
ajax.pdfajax.pdf
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
nodejs.pdf
nodejs.pdfnodejs.pdf
nodejs.pdf
Jaouad Assabbour
 
cours java complet-2.pdf
cours java complet-2.pdfcours java complet-2.pdf
cours java complet-2.pdf
Jaouad Assabbour
 
git.pdf
git.pdfgit.pdf
SQL.pdf
SQL.pdfSQL.pdf

Plus de Jaouad Assabbour (13)

Kubernetes (k8s).pdf
Kubernetes (k8s).pdfKubernetes (k8s).pdf
Kubernetes (k8s).pdf
 
docker.pdf
docker.pdfdocker.pdf
docker.pdf
 
Ansible-cours .pdf
Ansible-cours .pdfAnsible-cours .pdf
Ansible-cours .pdf
 
test-formulaire-angular.pdf
test-formulaire-angular.pdftest-formulaire-angular.pdf
test-formulaire-angular.pdf
 
spring-api-rest.pdf
spring-api-rest.pdfspring-api-rest.pdf
spring-api-rest.pdf
 
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdfJWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
 
js.pdf
js.pdfjs.pdf
js.pdf
 
ajax.pdf
ajax.pdfajax.pdf
ajax.pdf
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
nodejs.pdf
nodejs.pdfnodejs.pdf
nodejs.pdf
 
cours java complet-2.pdf
cours java complet-2.pdfcours java complet-2.pdf
cours java complet-2.pdf
 
git.pdf
git.pdfgit.pdf
git.pdf
 
SQL.pdf
SQL.pdfSQL.pdf
SQL.pdf
 

React-cours.pdf

  • 2. Qu'est-ce que React ? React, parfois appelé framework JavaScript frontal, est une bibliothèque JavaScript créée par Facebook. React est un outil pour créer des composants d'interface utilisateur React est utilisé pour créer des applications d'une seule page. Formateur Jaouad Assabbour
  • 3. Comment fonctionne React ? React crée un DOM VIRTUEL en mémoire. Au lieu de manipuler directement le DOM du navigateur, React crée un DOM virtuel en mémoire, où il effectue toutes les manipulations nécessaires, avant d'apporter les modifications au DOM du navigateur. Réagir ne change que ce qui doit être changé ! React découvre quelles modifications ont été apportées et ne modifie que ce qui doit être modifié. Vous apprendrez les différents aspects de la façon dont React procède dans le reste de ce cours. Formateur Jaouad Assabbour
  • 4. Historique de React.JS La version actuelle de React.JS est la V18.0.0 (avril 2022). La version initiale au public (V0.3.0) était en juillet 2013. React.JS a été utilisé pour la première fois en 2011 pour la fonction Newsfeed de Facebook. L'ingénieur logiciel de Facebook, Jordan Walke, l'a créé. La version actuelle de create-react-app est v5.0.1 (avril 2022). create-react-app inclut des outils intégrés tels que webpack, Babel et ESLint. Formateur Jaouad Assabbour
  • 5. Mise en place d'un environnement React Pour utiliser React en production, vous avez besoin de npm qui est inclus avec NODE.JS Si vous avez installé npx et Node.js , vous pouvez créer une application React en utilisant create-react-app. Le create-react-app configurera tout ce dont vous avez besoin pour exécuter une application React. Exécutez l'application React Vous êtes maintenant prêt à exécuter votre première véritable application React ! Exécutez cette commande pour accéder au my-react-apprépertoire : Formateur Jaouad Assabbour
  • 6. Exécutez cette commande pour exécuter l'application React my-react- app : Une nouvelle fenêtre de navigateur apparaîtra avec votre application React nouvellement créée! Sinon, ouvrez votre navigateur et tapez localhost:3000 dans la barre d'adresse. Le résultat : Formateur Jaouad Assabbour
  • 7. Modifier l'application React Jusqu'ici tout va bien, mais comment modifier le contenu ? Regardez dans le my-react-apprépertoire et vous trouverez un dossier src. Dans le dossier src, il y a un fichier appelé App.js, ouvrez-le et il ressemblera à ceci : Formateur Jaouad Assabbour
  • 8. Essayez de modifier le contenu HTML et enregistrez le fichier. Remplacez tout le contenu à l'intérieur du <div className="App">par un <h1> élément. Voir les modifications dans le navigateur lorsque vous cliquez sur Enregistrer. Le résultat Formateur Jaouad Assabbour
  • 9. La fonction de rendu React affiche le HTML sur la page Web en utilisant une fonction appelée ReactDOM.render(). La fonction ReactDOM.render() prend deux arguments, le code HTML et un élément HTML. Le but de la fonction est d'afficher le code HTML spécifié à l'intérieur de l'élément HTML spécifié. Mais rendre où ? Il existe un autre dossier dans le répertoire racine de votre projet React, nommé "public". Dans ce dossier, il y a un fichier index.html. Vous en remarquerez un <div> dans le corps de ce fichier. C'est là que notre application React sera rendue. Exemple Afficher un paragraphe à l'intérieur d'un élément avec l'id de "root": Le résultat est affiché dans l' <div id="root">élément : Formateur Jaouad Assabbour
  • 10. Réagir JSX Qu'est-ce que JSX ? JSX signifie JavaScript XML. JSX nous permet d'écrire du HTML dans React. JSX facilite l'écriture et l'ajout de HTML dans React. JSX nous permet d'écrire des éléments HTML en JavaScript et de les placer dans le DOM sans aucune createElement() et/ou méthode. appendChild() JSX convertit les balises HTML en éléments de réaction. Exemple Formateur Jaouad Assabbour
  • 11. React Components Les composants sont des morceaux de code indépendants et réutilisables. Elles ont le même objectif que les fonctions JavaScript, mais fonctionnent de manière isolée et renvoient du HTML. Les composants sont de deux types, les composants de classe et les composants de fonction. Dans ce cours, nous nous concentrerons sur les composants de fonction. Créez votre premier composant composant de classe appelé Car Lors de la création d'un composant React, le nom du composant doit commencer par une lettre majuscule. Un composant de classe doit inclure l' extends React.Component instruction. Cette instruction crée un héritage pour React.Component et donne à votre composant l'accès aux fonctions de React.Component. Formateur Jaouad Assabbour
  • 12. Le composant nécessite également une méthode render(), cette méthode renvoie HTML. Composant de fonction Voici le même exemple que ci-dessus, mais créé à l'aide d'un composant Function à la place. Un composant Function renvoie également HTML et se comporte à peu près de la même manière qu'un composant Class, mais les composants Function peuvent être écrits en utilisant beaucoup moins de code, sont plus faciles à comprendre et seront préférés dans ce cours. Rendu d'un composant Maintenant, votre application React a un composant appelé Car, qui renvoie un élément <h2>. Pour utiliser ce composant dans votre application, utilisez une syntaxe similaire à celle du HTML normal : <Car /> Affichez le Carcomposant dans l'élément "racine": Formateur Jaouad Assabbour
  • 13. Composants dans Composants Nous pouvons faire référence à des composants à l'intérieur d'autres composants : Exemple Utilisez le composant Car dans le composant Garage : Voici le nouveau fichier, nous l'avons nommé "Car.js": Formateur Jaouad Assabbour
  • 14. Pour pouvoir utiliser le composant Car, vous devez importer le fichier dans votre application. React Class Components Avant React 16.8, les composants de classe étaient le seul moyen de suivre l'état et le cycle de vie d'un composant React. Les composants fonctionnels étaient considérés comme "sans état". Avec l'ajout de Hooks, les composants Function sont désormais presque équivalents aux composants Class. Les différences sont si mineures que vous n'aurez probablement jamais besoin d'utiliser un composant Class dans React. Même si les composants Function sont préférés, il n'existe actuellement aucun plan pour supprimer les composants Class de React. Cette section vous donnera un aperçu de la façon d'utiliser les composants de classe dans React. Formateur Jaouad Assabbour
  • 15. Créer un composant de classe Lors de la création d'un composant React, le nom du composant doit commencer par une lettre majuscule. Le composant doit inclure l' extends React.Component instruction, cette instruction crée un héritage à React.Component et donne à votre composant l'accès aux fonctions de React.Component. Le composant nécessite également une méthode render(), cette méthode renvoie HTML. Exemple : Créez un composant de classe appelé Car Maintenant, votre application React a un composant appelé Car, qui renvoie un <h2> élément. Pour utiliser ce composant dans votre application, utilisez une syntaxe similaire à celle du HTML normal : <Car /> Formateur Jaouad Assabbour
  • 16. Component Constructor S'il y a une fonction constructor() dans votre composant, cette fonction sera appelée lorsque le composant sera lancé. La fonction constructeur est l'endroit où vous initiez les propriétés du composant. Dans React, les propriétés des composants doivent être conservées dans un objet appelé state. Vous en apprendrez plus state tard dans ce cours. La fonction constructeur est également l'endroit où vous honorez l'héritage du composant parent en incluant l' super() instruction, qui exécute la fonction constructeur du composant parent, et votre composant a accès à toutes les fonctions du composant parent ( React.Component). Exemple: Créez une fonction constructeur dans le composant Car et ajoutez une propriété de couleur : Utilisez la propriété color dans la fonction render() : Formateur Jaouad Assabbour
  • 17. Props Une autre façon de gérer les propriétés des composants consiste à utiliser props. Les accessoires sont comme des arguments de fonction, et vous les envoyez dans le composant en tant qu'attributs. Vous en apprendrez plus props dans le chapitre suivant. Utilisez un attribut pour passer une couleur au composant Car et utilisez-le dans la fonction render() : Props in the Constructor Si votre composant a une fonction de constructeur, les accessoires doivent toujours être passés au constructeur et également au React.Component via la méthode super(). Formateur Jaouad Assabbour
  • 18. Composants dans Composants Nous pouvons faire référence à des composants à l'intérieur d'autres composants : Utilisez le composant Car dans le composant Garage : State État du composant de la classe React Les composants de la classe React ont un objet state intégré. Vous avez peut-être remarqué que nous avons utilisé state plus tôt dans la section constructeur de composants. L' objet state est l'endroit où vous stockez les valeurs de propriété qui appartiennent au composant. Lorsque l' objet state change, le composant s'affiche à nouveau. Formateur Jaouad Assabbour
  • 19. Création de l'objet d'état L'objet d'état est initialisé dans le constructeur : L'objet d'état peut contenir autant de propriétés que vous le souhaitez : Exemple : Spécifiez toutes les propriétés dont votre composant a besoin : Formateur Jaouad Assabbour
  • 20. Utilisation de l' stateobjet Faites référence à l' objet state n'importe où dans le composant en utilisant la syntaxe : this.state.propertyname Reportez-vous à l'objet state dans la méthode render(): Formateur Jaouad Assabbour
  • 21. Modification de l'objet state Pour modifier une valeur dans l'objet satate, utilisez la méthode this.setState(). Lorsqu'une valeur dans l' objet state change, le composant sera restitué, ce qui signifie que la sortie changera en fonction de la ou des nouvelles valeurs. Exemple : Ajoutez un bouton avec onClick événement qui modifiera la propriété color Formateur Jaouad Assabbour
  • 22. Utilisez toujours la méthode setState() pour modifier l'objet d'état, cela garantira que le composant sait qu'il a été mis à jour et appelle la méthode render() (et toutes les autres méthodes du cycle de vie). Lifecycle of Components Chaque composant de React a un cycle de vie que vous pouvez surveiller et manipuler au cours de ses trois phases principales. Les trois phases sont : Montage , Mise à jour et Démontage Montage Le montage signifie mettre des éléments dans le DOM. React a quatre méthodes intégrées qui sont appelées, dans cet ordre, lors du montage d'un composant : 1. constructor() 2. getDerivedStateFromProps() 3. render() 4. componentDidMount() La méthode render() est obligatoire et sera toujours appelée, les autres sont facultatives et seront appelées si vous les définissez. constructor La méthode constructor() est appelée avant toute autre chose, lorsque le composant est lancé, et c'est l'endroit naturel pour configurer les state valeurs initiales et autres initiales. La méthode constructor() est appelée avec le props, comme arguments, et vous devez toujours commencer par appeler le super(props) avant toute autre chose, cela lancera la méthode constructeur du parent et permettra au composant d'hériter des méthodes de son parent ( React.Component). Formateur Jaouad Assabbour
  • 23. Example : La méthode constructor est appelée, par React, à chaque fois que vous créez un composant : getDerivedStateFromProps La méthode getDerivedStateFromProps() est appelée juste avant de rendre le ou les éléments dans le DOM. C'est l'endroit naturel pour définir l'objet state en fonction de l'initiale props. Il prend state comme argument et renvoie un objet avec les modifications apportées au fichier state. L'exemple ci-dessous commence avec la couleur préférée étant "rouge", mais la méthode getDerivedStateFromProps() met à jour la couleur préférée en fonction de l'attribut favcol : Exemple: La méthode getDerivedStateFromProps est appelée juste avant la méthode render : Formateur Jaouad Assabbour
  • 24. rendre La méthode render() est obligatoire et est la méthode qui génère réellement le code HTML dans le DOM. Exemple: Un composant simple avec une méthode render() simple : Formateur Jaouad Assabbour
  • 25. composantDidMount La méthode componentDidMount() est appelée après le rendu du composant. C'est là que vous exécutez des instructions qui nécessitent que le composant soit déjà placé dans le DOM. Exemple: Au début, ma couleur préférée est le rouge, mais donnez-moi une seconde, et c'est le jaune à la place: Formateur Jaouad Assabbour
  • 26. Mise à jour Un composant est mis à jour chaque fois qu'il y a un changement dans le composant state ou props. React a cinq méthodes intégrées qui sont appelées, dans cet ordre, lorsqu'un composant est mis à jour : 1. getDerivedStateFromProps() 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate() 5. componentDidUpdate() La méthode render() est obligatoire et sera toujours appelée, les autres sont facultatives et seront appelées si vous les définissez. GetDerivedStateFromProps() Lors des mises à jour , la méthode getDerivedStateFromProps est également appelée. Il s'agit de la première méthode appelée lorsqu'un composant est mis à jour. C'est toujours l'endroit naturel pour définir l'objet state en fonction des accessoires initiaux. L'exemple ci-dessous a un bouton qui change la couleur préférée en bleu, mais puisque la méthode getDerivedStateFromProps()est appelée, qui met à jour l'état avec la couleur de l'attribut favcol, la couleur préférée est toujours rendue en jaune : Exemple: Si le composant est mis à jour, la méthode getDerivedStateFromProps() est appelée : Formateur Jaouad Assabbour
  • 27. shouldComponentUpdate() Dans la méthode shouldComponentUpdate(), vous pouvez renvoyer une valeur booléenne qui spécifie si React doit continuer le rendu ou non. La valeur par défaut est true. L'exemple ci-dessous montre ce qui se passe lorsque la méthode shouldComponentUpdate() retourne false: Formateur Jaouad Assabbour
  • 28. Example: Arrêtez le rendu du composant à chaque mise à jour : Formateur Jaouad Assabbour
  • 29. Exemple: Même exemple que ci-dessus, mais cette fois la méthode shouldComponentUpdate() renvoie à la place true : rendre La méthode render() est bien sûr appelée lorsqu'un composant est mis à jour , il doit restituer le HTML au DOM, avec les nouvelles modifications. L'exemple ci-dessous a un bouton qui change la couleur préférée en bleu : Exemple : Cliquez sur le bouton pour modifier l'état du composant : Formateur Jaouad Assabbour
  • 31. getSnapshotBeforeUpdate() Dans la méthode getSnapshotBeforeUpdate(), vous avez accès à props et state avant la mise à jour, ce qui signifie que même après la mise à jour, vous pouvez vérifier quelles étaient les valeurs avant la mise à jour. Si la méthode getSnapshotBeforeUpdate() est présente, vous devez également inclure la méthode componentDidUpdate(), sinon vous obtiendrez une erreur. L'exemple ci-dessous peut sembler compliqué, mais il ne fait que ceci : Lorsque le composant est monté , il est rendu avec la couleur préférée "rouge". Lorsque le composant est monté, une minuterie change l'état, et au bout d'une seconde, la couleur préférée devient "jaune". Cette action déclenche la phase de mise à jour , et puisque ce composant a une méthode getSnapshotBeforeUpdate(), cette méthode est exécutée, et écrit un message dans l'élément vide DIV1. Ensuite, la componentDidUpdate()méthode est exécutée et écrit un message dans l'élément vide DIV2 : Exemple: Utilisez la méthode getSnapshotBeforeUpdate()pour savoir à quoi stateressemblait l'objet avant la mise à jour : Formateur Jaouad Assabbour
  • 33. componentDidUpdate La méthode componentDidUpdate est appelée après la mise à jour du composant dans le DOM. L'exemple ci-dessous peut sembler compliqué, mais il ne fait que ceci : Lorsque le composant est monté , il est rendu avec la couleur préférée "rouge". Lorsque le composant a été monté, une minuterie change l'état, et la couleur devient "jaune". Cette action déclenche la phase de mise à jour , et comme ce composant possède une méthode componentDidUpdate, cette méthode est exécutée et écrit un message dans l'élément DIV vide : Exemple : La méthode componentDidUpdate est appelée après le rendu de la mise à jour dans le DOM : Formateur Jaouad Assabbour
  • 35. Unmounting La phase suivante du cycle de vie est lorsqu'un composant est supprimé du DOM, ou démonté comme React aime l'appeler. React n'a qu'une seule méthode intégrée qui est appelée lorsqu'un composant est démonté : componentWillUnmount La méthode componentWillUnmount est appelée lorsque le composant est sur le point d'être supprimé du DOM. Formateur Jaouad Assabbour
  • 36. React Props Les Props sont des arguments passés dans les composants React. Les Props sont transmis aux composants via des attributs HTML. Les Props représente les propriétés React Props Les props React sont comme des arguments de fonction en JavaScript et des attributs en HTML. Pour envoyer des props dans un composant, utilisez la même syntaxe que les attributs HTML : Exemple Ajoutez un attribut "brand" à l'élément Car : Le composant reçoit l'argument en tant qu'objet props : Exemple Utilisez l'attribut brand dans le composant : Formateur Jaouad Assabbour
  • 37. Passer les données Les accessoires sont également la façon dont vous transmettez des données d'un composant à un autre, en tant que paramètres. Exemple Envoyez la propriété "brand" du composant Garage au composant Car : Si vous avez une variable à envoyer, et non une chaîne comme dans l'exemple ci- dessus, il vous suffit de mettre le nom de la variable entre accolades : Example Créez une variable nommée carName et envoyez-la au Carcomposant : Formateur Jaouad Assabbour
  • 38. Ou si c'était un objet : Exemple Créez un objet nommé carInfo et envoyez-le au Car composant : Formateur Jaouad Assabbour
  • 39. React Events Tout comme les événements HTML DOM, React peut effectuer des actions basées sur des événements utilisateur. React a les mêmes événements que HTML : click, change, mouseover etc. Ajout d'événements Les événements React sont écrits en syntaxe camelCase : onClick au lieu de onclick. Les gestionnaires d'événements React sont écrits entre accolades : onClick={shoot} au lieu de onClick="shoot()". Exemple: Mettez la fonction shoot à l'intérieur du composant Football : Passer des arguments Pour passer un argument à un gestionnaire d'événements, utilisez une fonction fléchée. Formateur Jaouad Assabbour
  • 40. Exemple: Envoyer "Objectif !" en tant que paramètre de la shoot fonction, en utilisant la fonction fléchée : Objet d'événement de réaction Les gestionnaires d'événements ont accès à l'événement React qui a déclenché la fonction. Dans notre exemple, l'événement est l'événement "clic". Exemple: Fonction Flèche : Envoi manuel de l'objet événement : Formateur Jaouad Assabbour
  • 41. Réagir le rendu conditionnel Dans React, vous pouvez effectuer un rendu conditionnel des composants. Il y a plusieurs moyens de le faire. If Statement Nous pouvons utiliser l' ifopérateur JavaScript pour décider quel composant rendre. Exemple: Nous utiliserons ces deux composants : Exemple: Maintenant, nous allons créer un autre composant qui choisit le composant à afficher en fonction d'une condition : Formateur Jaouad Assabbour
  • 42. Essayez de changer l' attribut isGoal en true : && Opérateur logique Une autre façon de rendre conditionnellement un composant React consiste à utiliser l' opérateur &&. Exemple: Nous pouvons intégrer des expressions JavaScript dans JSX en utilisant des accolades : Si cars.length est égal à vrai, l'expression après && sera rendue. Formateur Jaouad Assabbour
  • 43. Opérateur ternaire Une autre façon de restituer des éléments de manière conditionnelle consiste à utiliser un opérateur ternaire. Nous allons reprendre l'exemple du but. Example: Renvoie le composant MadeGoal si isGoal est true, sinon renvoie le composant MissedGoal: Formateur Jaouad Assabbour
  • 44. Listes de réaction Dans React, vous rendrez des listes avec un certain type de boucle. La méthode de tableau JavaScript map()est généralement la méthode préférée. Exemple: Rendons toutes les voitures de notre garage : Lorsque vous exécutez ce code dans votre create-react-app, cela fonctionnera mais vous recevrez un avertissement indiquant qu'aucune "clé" n'est fournie pour les éléments de la liste. Clés Les clés permettent à React de garder une trace des éléments. De cette façon, si un élément est mis à jour ou supprimé, seul cet élément sera restitué au lieu de la liste entière. Les clés doivent être uniques pour chaque frère. Mais ils peuvent être dupliqués à l'échelle mondiale. Formateur Jaouad Assabbour
  • 45. Exemple : Refactorisons notre exemple précédent pour inclure les clés : Formateur Jaouad Assabbour
  • 46. Formulaires de réaction Tout comme en HTML, React utilise des formulaires pour permettre aux utilisateurs d'interagir avec la page Web. Ajouter des formulaires dans React Vous ajoutez un formulaire avec React comme n'importe quel autre élément : Cela fonctionnera normalement, le formulaire sera soumis et la page sera actualisée. Mais ce n'est généralement pas ce que nous voulons qu'il se passe dans React. Nous voulons empêcher ce comportement par défaut et laisser React contrôler le formulaire. Formateur Jaouad Assabbour
  • 47. Gestion des formulaires La gestion des formulaires concerne la façon dont vous gérez les données lorsqu'elles changent de valeur ou sont soumises. En HTML, les données de formulaire sont généralement gérées par le DOM. Dans React, les données de formulaire sont généralement gérées par les composants. Lorsque les données sont gérées par les composants, toutes les données sont stockées dans l'état du composant. Vous pouvez contrôler les modifications en ajoutant des gestionnaires d'événements dans l'attribut onChange. Nous pouvons utiliser le crochet useState pour garder une trace de chaque valeur d'entrée et fournir une "source unique de vérité" pour l'ensemble de l'application. Exemple: Utilisez le Hook useState pour gérer l'entrée : Formateur Jaouad Assabbour
  • 48. Envoi de formulaires Vous pouvez contrôler l'action submit en ajoutant un gestionnaire d'événement dans l'attribut onSubmit pour <form> : Formateur Jaouad Assabbour
  • 49. Champs de saisie multiples Vous pouvez contrôler les valeurs de plusieurs champs de saisie en ajoutant un attribut name à chaque élément. Nous allons initialiser notre état avec un objet vide. Pour accéder aux champs du gestionnaire d'événements, utilisez la syntaxe event.target.name et .event.target.value Pour mettre à jour l'état, utilisez des Hooks [notation entre Hooks] autour du nom de la propriété. Exemple Formateur Jaouad Assabbour
  • 51. Zone de texte L'élément textarea dans React est légèrement différent du HTML ordinaire. En HTML, la valeur d'un textarea était le texte entre la balise de début <textarea> et la balise de fin </textarea>. Dans React, la valeur d'une zone de texte est placée dans un attribut de valeur. Nous utiliserons le useStateHook pour gérer la valeur de textarea : Formateur Jaouad Assabbour
  • 52. Select Une liste déroulante, ou une zone de sélection, dans React est également un peu différente du HTML. en HTML, la valeur sélectionnée dans la liste déroulante a été définie avec l' attribut selected : Exemple: Une simple boîte de sélection, où la valeur sélectionnée "Volvo" est initialisée dans le constructeur : En apportant ces légères modifications à <textarea>et <select>, React est capable de gérer tous les éléments d'entrée de la même manière. Formateur Jaouad Assabbour
  • 53. React Router Create React App n'inclut pas le routage de page. React Router est la solution la plus populaire. Ajouter un routeur React Pour ajouter React Router dans votre application, exécutez-le dans le terminal à partir du répertoire racine de l'application : Structure des dossiers Pour créer une application avec plusieurs itinéraires de page, commençons d'abord par la structure du fichier. Dans le dossier src, nous allons créer un dossier pages nommé avec plusieurs fichiers : srcpages: • Layout.js • Home.js • Blogs.js • Contact.js • NoPage.js Chaque fichier contiendra un composant React très basique. Utilisation de base Nous allons maintenant utiliser notre routeur dans notre fichier. index.js Formateur Jaouad Assabbour
  • 54. Exemple Utilisez React Router pour router vers des pages basées sur l'URL : index.js: Formateur Jaouad Assabbour
  • 55. Exemple expliqué Nous enveloppons d'abord notre contenu avec <BrowserRouter>. Ensuite, nous définissons notre <Routes>. Une application peut avoir plusieurs <Routes>. Notre exemple de base n'en utilise qu'un. <Route>s peuvent être imbriqués. Le premier <Route>a un chemin d'accès / et rend le composant Layout. Les s imbriqués <Route> héritent et s'ajoutent à la route parent. Ainsi, le blog schemin est combiné avec le parent et devient /blogs. La route Home de composant n'a pas de chemin mais a un attribut index. Cela spécifie cette route comme route par défaut pour la route parente, qui est /. Définir le path à * agira comme un fourre-tout pour toutes les URL non définies. C'est parfait pour une page d'erreur 404. Pages / Composants Le composant Layout a des éléments <Outlet>et <Link>. Le <Outlet>rend l'itinéraire actuel sélectionné. <Link>est utilisé pour définir l'URL et garder une trace de l'historique de navigation. Chaque fois que nous établirons un lien vers un chemin interne, nous utiliserons à la <Link> place de <a href="">. La "route de mise en page" est un composant partagé qui insère un contenu commun sur toutes les pages, comme un menu de navigation. Formateur Jaouad Assabbour
  • 58. Styliser React à l'aide de CSS Il existe de nombreuses façons de styliser React avec CSS, ce cours examinera de plus près trois méthodes courantes : • Style en ligne • Feuilles de style CSS • Modules CSS Style en ligne Pour styliser un élément avec l'attribut inline style, la valeur doit être un objet JavaScript : Exemple: Insérez un objet avec les informations de style : Noms de propriété camelCased Étant donné que le CSS en ligne est écrit dans un objet JavaScript, les propriétés avec des séparateurs de tirets, comme background-color, doivent être écrites avec une syntaxe camel : Formateur Jaouad Assabbour
  • 59. Objet JavaScript Vous pouvez également créer un objet avec des informations de style et y faire référence dans l'attribut style : Feuille de style CSS Vous pouvez écrire votre style CSS dans un fichier séparé, enregistrez simplement le fichier avec l' extension de fichier.css et importez-le dans votre application. App.css : Créez un nouveau fichier appelé "App.css" et insérez-y du code CSS : Formateur Jaouad Assabbour
  • 60. Importez la feuille de style dans votre application : Modules CSS Une autre façon d'ajouter des styles à votre application consiste à utiliser des modules CSS. Les modules CSS sont pratiques pour les composants placés dans des fichiers séparés. Formateur Jaouad Assabbour
  • 61. Créez le module CSS avec l' extension.module.css, exemple : my- style.module.css. Créez un nouveau fichier appelé "my-style.module.css" et insérez-y du code CSS : mon-style.module.css : Importez la feuille de style dans votre composant : Formateur Jaouad Assabbour
  • 62. React Hooks Des Hooks ont été ajoutés à React dans la version 16.8. Les Hooks permettent aux composants fonctionnels d'avoir accès à l'état et à d'autres fonctionnalités de React. De ce fait, les composants de classe ne sont généralement plus nécessaires. Qu'est-ce qu'un crochet ? Les hooks nous permettent de "s'accrocher" aux fonctionnalités de React telles que les méthodes d'état et de cycle de vie. Exemple: Voici un exemple de Hooks. Ne vous inquiétez pas si cela n'a pas de sens. Nous entrerons plus en détail dans la section suivante . Formateur Jaouad Assabbour
  • 64. Vous devez import Hooks de react. Ici, nous utilisons le Hooks useState pour suivre l'état de l'application. L'état fait généralement référence aux données d'application ou aux propriétés qui doivent être suivies. Règles de Hooks Il y a 3 règles pour les hooks : • Les hooks ne peuvent être appelés qu'à l'intérieur des composants de la fonction React. • Les Hooks ne peuvent être appelés qu'au niveau supérieur d'un composant. • Les Hooks ne peuvent pas être conditionnels Formateur Jaouad Assabbour
  • 65. React useState Hook Le React Hook useState nous permet de suivre l'état d'un composant de fonction. L'état fait généralement référence aux données ou aux propriétés qui doivent être suivies dans une application. Importer useState Pour utiliser le Hooks useState, nous devons d'abord l'insérer import dans notre composant. Notez que nous détruisons useState car react il s'agit d'une exportation nommée. Initialiser useState Nous initialisons notre état en appelant notre composant useState de fonction. UseState accepte un état initial et renvoie deux valeurs : • L'état actuel. • Une fonction qui met à jour l'état. Exemple: Initialiser l'état en haut du composant de fonction. Formateur Jaouad Assabbour
  • 66. Notez qu'encore une fois, nous détruisons les valeurs renvoyées par useState. La première valeur, color, est notre état actuel. La deuxième valeur, setColor, est la fonction utilisée pour mettre à jour notre état. Enfin, nous définissons l'état initial sur une chaîne vide : useState("") Lire l'état Nous pouvons maintenant inclure notre état n'importe où dans notre composant. Exemple: Utilisez la variable d'état dans le composant rendu. Mettre à jour l'état Pour mettre à jour notre état, nous utilisons notre fonction de mise à jour d'état. Formateur Jaouad Assabbour
  • 67. Que peut contenir l'État Le Hooks useState peut être utilisé pour garder une trace des chaînes, des nombres, des booléens, des tableaux, des objets et de toute combinaison de ceux-ci ! Nous pourrions créer plusieurs Hooks d'état pour suivre les valeurs individuelles. Formateur Jaouad Assabbour
  • 68. Ou, nous pouvons simplement utiliser un état et inclure un objet à la place ! Formateur Jaouad Assabbour
  • 69. Mise à jour des objets et des tableaux dans l'état Lorsque l'état est mis à jour, l'état entier est écrasé. Et si nous voulions seulement mettre à jour la couleur de notre voiture ? Si nous n'appelions que setCar({color: "blue"}), cela supprimerait la marque, le modèle et l'année de notre état. Nous pouvons utiliser l'opérateur de propagation JavaScript pour nous aider. Exemple: Utilisez l'opérateur de propagation JavaScript pour mettre à jour uniquement la couleur de la voiture : Formateur Jaouad Assabbour
  • 70. Parce que nous avons besoin de la valeur actuelle de l'état, nous passons une fonction dans notre setCar fonction. Cette fonction reçoit la valeur précédente. Nous renvoyons ensuite un objet, en étalant le previous State et en écrasant uniquement la couleur. Formateur Jaouad Assabbour
  • 71. React useEffect Hooks Le Hooks useEffect vous permet d'effectuer des effets secondaires dans vos composants. Quelques exemples d'effets secondaires sont : la récupération de données, la mise à jour directe du DOM et les minuteries. UseEffect accepte deux arguments. Le deuxième argument est facultatif. useEffect(<function>, <dependency>) Exemple: Utilisez setTimeout() pour compter 1 seconde après le rendu initial : Formateur Jaouad Assabbour
  • 72. Mais attendez!! Il continue de compter même s'il ne devrait compter qu'une seule fois ! UseEffect s'exécute sur chaque rendu. Cela signifie que lorsque le nombre change, un rendu se produit, ce qui déclenche alors un autre effet. Ce n'est pas ce que nous voulons. Il existe plusieurs façons de contrôler le moment où les effets secondaires se manifestent. Nous devons toujours inclure le deuxième paramètre qui accepte un tableau. Nous pouvons éventuellement transmettre des dépendances à useEffect dans ce tableau. Donc, pour résoudre ce problème, exécutons cet effet uniquement sur le rendu initial. Formateur Jaouad Assabbour
  • 73. Exemple: Voici un exemple de useEffectHook dépendant d'une variable. Si la variable count est mise à jour, l'effet s'exécutera à nouveau : S'il existe plusieurs dépendances, elles doivent être incluses dans le tableau useEffect de dépendances. Formateur Jaouad Assabbour
  • 74. Nettoyage d'effet Certains effets nécessitent un nettoyage pour réduire les fuites de mémoire. Les délais d'expiration, les abonnements, les écouteurs d'événements et les autres effets qui ne sont plus nécessaires doivent être supprimés. Nous faisons cela en incluant une fonction de retour à la fin du Hook useEffect. Exemple Nettoyez la minuterie à la fin du Hook useEffect : Formateur Jaouad Assabbour
  • 75. React useContext Hook Contexte de réaction React Context est un moyen de gérer l'état globalement. Il peut être utilisé avec le Hooks useState pour partager l'état entre des composants profondément imbriqués plus facilement qu'avec seul useState Le problème L'état doit être détenu par le composant parent le plus élevé de la pile qui nécessite l'accès à l'état. Pour illustrer, nous avons de nombreux composants imbriqués. Le composant en haut et en bas de la pile doit accéder à l'état. Pour ce faire sans contexte, nous devrons passer l'état en tant que "accessoires" à travers chaque composant imbriqué. C'est ce qu'on appelle le "forage d'appui". Exemple: Passer des "accessoires" à travers des composants imbriqués : Formateur Jaouad Assabbour
  • 77. Même si les composants 2 à 4 n'avaient pas besoin de l'état, ils devaient transmettre l'état pour qu'il puisse atteindre le composant 5. La solution La solution est de créer un contexte. Pour créer un contexte, vous devez l'importer createContext et l'initialiser : Ensuite, nous utiliserons le fournisseur de contexte pour envelopper l'arborescence des composants qui ont besoin du contexte d'état. Fournisseur de contexte Enveloppez les composants enfants dans le fournisseur de contexte et fournissez la valeur d'état. Désormais, tous les composants de cette arborescence auront accès au contexte utilisateur. Utilisez le useContext Hook Pour utiliser le contexte dans un composant enfant, nous devons y accéder à l'aide du useContext hook. Tout d'abord, incluez le useContext dans l'instruction d'importation : Formateur Jaouad Assabbour
  • 78. Ensuite, vous pouvez accéder au contexte utilisateur dans tous les composants : Exemple: Voici l'exemple complet utilisant React Context : Formateur Jaouad Assabbour
  • 80. React useRef Hook Le Hook useRef vous permet de conserver des valeurs entre les rendus. Il peut être utilisé pour stocker une valeur modifiable qui ne provoque pas de nouveau rendu lors de la mise à jour. Il peut être utilisé pour accéder directement à un élément DOM. Ne provoque pas de re-rendus Si nous essayions de compter le nombre de rendus de notre application à l'aide du useState Hook, nous serions pris dans une boucle infinie puisque ce Hook lui- même provoque un nouveau rendu. Pour éviter cela, nous pouvons utiliser le useRef Hook. Formateur Jaouad Assabbour
  • 81. UseRef() ne renvoie qu'un seul élément. Il renvoie un objet appelé current. Lorsque nous initialisons useRef, nous définissons la valeur initiale : useRef(0). Accéder aux éléments DOM En général, nous voulons laisser React gérer toutes les manipulations du DOM. Mais il existe des cas où useRef il peut être utilisé sans causer de problèmes. Dans React, on peut ajouter un attribut ref à un élément pour y accéder directement dans le DOM. Formateur Jaouad Assabbour
  • 82. Suivi des changements d'état Le useRef Hook peut également être utilisé pour garder une trace des valeurs d'état précédentes. En effet, nous sommes capables de conserver des useRef valeurs entre les rendus. Exemple: Utilisez useRefpour garder une trace des valeurs d'état précédentes : Cette fois, nous utilisons une combinaison de useState, useEffect et useRef pour garder une trace de l'état précédent. Dans le useEffect, nous mettons à jour la useRefvaleur actuelle chaque fois que le inputValue est mis à jour en saisissant du texte dans le champ de saisie. Formateur Jaouad Assabbour
  • 83. React useReducer Hook Le useReducer Hook est similaire au useState Hook Il permet une logique d'état personnalisée. Si vous vous retrouvez à suivre plusieurs éléments d'état qui reposent sur une logique complexe, useReducer cela peut être utile. La fonction reducer contient votre logique d'état personnalisée et initialState peut être une valeur simple mais contiendra généralement un objet. Le useReducer Hook renvoie le courant state et une méthode dispatch. Voici un exemple useReducer dans une application de compteur : Formateur Jaouad Assabbour
  • 85. React useCallback Hook Le React useCallbackHook renvoie une fonction de rappel mémorisée. Cela nous permet d'isoler les fonctions gourmandes en ressources afin qu'elles ne s'exécutent pas automatiquement à chaque rendu. Le useCallback Hook ne s'exécute que lorsque l'une de ses dépendances est mise à jour. Cela peut améliorer les performances. Problème L'une des raisons de l'utiliser useCallback est d'empêcher un composant de se restituer à moins que ses accessoires n'aient changé. Dans cet exemple, vous pourriez penser que le Todos composant ne sera pas restitué à moins que le todos changement : Formateur Jaouad Assabbour
  • 87. Fin … Merci pour votre attention . JAOUAD ASSABBOUR Formateur Jaouad Assabbour