React-cours.pdf

1. REACT Formateur Jaouad Assabbour

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

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

React-cours.pdf

React-cours.pdf

React-cours.pdf

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a React-cours.pdf

Similar a React-cours.pdf(20)

Más de Jaouad Assabbour

Más de Jaouad Assabbour(13)

React-cours.pdf