React-cours.pdf

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.

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.

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.

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 :

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 :

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 :

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

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 :

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

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.

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":

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":

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.

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 />

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() :

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().

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.

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 :

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():

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

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).

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 :

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 :

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:

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 :

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:

Example:
Arrêtez le rendu du composant à chaque mise à jour :

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 :

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 :

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 :

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.

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 :

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 :

Ou si c'était un objet :
Exemple
Créez un objet nommé carInfo et envoyez-le au Car composant :

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.

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 :

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 :

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.

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:

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.

Exemple :
Refactorisons notre exemple précédent pour inclure les clés :

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.

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 :

Envoi de formulaires
Vous pouvez contrôler l'action submit en ajoutant un gestionnaire d'événement dans
l'attribut onSubmit pour <form> :

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

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 :

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.

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

Exemple
Utilisez React Router pour router vers des pages basées sur l'URL :
index.js:

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.

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 :

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 :

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.

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 :

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 .

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

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.

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.

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.

Ou, nous pouvons simplement utiliser un état et inclure un objet à la place !

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 :

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.

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 :

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.

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.

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 :

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 :

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 :

Ensuite, vous pouvez accéder au contexte utilisateur dans tous les composants :
Exemple:
Voici l'exemple complet utilisant React Context :

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.

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.

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.

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 :

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 :

Fin …
Merci pour votre attention .
JAOUAD ASSABBOUR

React-cours.pdf

Contenu connexe

Tendances (20)

Similaire à React-cours.pdf (19)

Plus de Jaouad Assabbour (15)

React-cours.pdf