Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alphorm.com Formation React : Niveau Avancé

770 views

Published on

● Comprendre les règles essentielles de la syntaxe JSX pour créer des éléments React. On découvre en détails :
○ Les différents moyens de transmettre des props et des enfants dans l'arborescence de son projet React
○ L’essentiel de la syntaxe JSX, avec :
■ la syntaxe de notation à points pour regrouper les éléments JSX en modules
■ utiliser et transférer les refs pour manipuler les élément du DOM
■ et, ajouter des fragments pour regrouper les éléments JSX
● Monter en compétences sur les techniques avancées de React, avec :
○ les props de rendu pour partager du code entre composants
○ le composant d’ordre supérieur pour séparer les responsabilités et partager de la logique de comportement
○ le contexte API pour créer des valeurs globales
● Gérer les erreurs de façon réactive et impérative :
○ avec le bloc catch et throw Error pour intercepter les cas d’erreur dans les gestionnaires d’événements.
○ et, depuis la version 16 de React, le concept de “périmètre d’erreurs “, qui offre un moyen d’intercepter toute erreur survenue et afficher une interface visuelle de repli.
● Apprendre les techniques pour optimiser le niveau de performances avec :
○ les méthodes de découpage dynamique de code bundling et React.lazy pour charger des composants uniquement à la demande
○ utiliser le production build pour un rendu plus rapide du UI
○ et, utiliser les techniques de mise en cache pour améliorer les performances de son application
● Découvrir les bases de l’accessibilité et garantir la meilleur expérience pour tous les utilisateurs, avec :
○ les standards, les lignes directrices, les critères de conformités du Web Content Accessibility Guidelines ou WCAG
○ les techniques pour créer des interfaces web accessibles suivant le document de l’initiative d’accessibilité WAI-ARIA
○ l’usage de l’HTML sémantique pour fournir des informations sémantiques détectables par les navigateurs et autres technologies d’assistance
● On découvre aussi d’autres sujets avancés permettent d’aller plus loin en reprenant la nature compositionnelle de React, avec :
○ les web components qui permettent une encapsulation forte, la réutilisabilité et le partage de code
○ intégrer les bibliothèques tierces avec React

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Alphorm.com Formation React : Niveau Avancé

  1. 1. Une formation Formation React Niveau Avancé Sandy Ludosky
  2. 2. Une formation Présentation de la formatrice @San10lulu https://www.youtube.com/c/San10lulu SandyLudosky.WebDev Sandy Ludosky Formatrice et consultante en informatique
  3. 3. Cursus React
  4. 4. Une formation Introduction 1. L’essentiel et en détails 2. Patterns avancés de React 3. Gestion des erreurs 4. Optimisation & Performance 5. Sémantique & Accessibilité 6. Autres sujets avancés Conclusion Plan de la formation
  5. 5. Une formation Développeurs Front Intégrateurs web Chefs et facilitateurs de projet Public concerné
  6. 6. Une formation Connaissances requises HTML & CSS Notions de javascript Fondamentaux de React Expérience avec la librairie Bootstrap
  7. 7. Une formation Présentation du projet Sandy Ludosky
  8. 8. Une formation Outils Visual Code Studio Le terminal cli-react Chrome DevTools Redux DevTools
  9. 9. Comprendre la syntaxe JSX Une formation Sandy Ludosky
  10. 10. Une formation Langage de balises Extension Javascript + XML Créée pour React Créer des éléments Custom Syntaxe JSX
  11. 11. Une formation Props comme attributs Sucre syntaxique Syntaxe JSX
  12. 12. Code JSX
  13. 13. Usage type JSX
  14. 14. Code compilé
  15. 15. Découvrir les règles JSX Une formation Sandy Ludosky
  16. 16. Import React React doit être dans le scope du fichier
  17. 17. Une formation Les règles JSX Commencer par une Majuscule : <Foo /> vs. élément HTML natif : exemples : <div> <span> ...
  18. 18. Majuscule
  19. 19. Majuscule : Type JSX
  20. 20. Minuscule : élément HTML natif
  21. 21. Une formation Créer un composant JSX Sandy Ludosky
  22. 22. Une formation React.createElement( component, props, ...children ) React.createElement
  23. 23. Une formation Propriétés Import React from ‘react’ Commence avec Majuscule Props (attributs)
  24. 24. Une formation Créer un Composant JSX
  25. 25. Une formation <Button /> const Button = function() { return <button> click me! </button> }
  26. 26. Une formation React.createElement( Button, {color: ‘purple’, textSize: 20}, ‘click me !’ ) Code type
  27. 27. Une formation React.createElement( Button, {color: ‘purple’, textSize: 20}, ‘click me !’ ) props Code
  28. 28. Une formation React.createElement( Button, {color: ‘purple’, textSize: 20}, ‘click me !’ ) children Code
  29. 29. Une formation Démo
  30. 30. Découvrir les props en JSX Une formation Sandy Ludosky
  31. 31. Une formation Les props JSX Syntaxe {} Booléen Les expressions Javascript Les littéraux chaînes (string) Décomposition des props {...}
  32. 32. Une formation Comprendre les children en JSX Sandy Ludosky
  33. 33. Une formation Les children en JSX Elément JSX Les expressions Javascript Undefined ou null Les fonctions
  34. 34. Une formation Comprendre les children en JSX Sandy Ludosky
  35. 35. Une formation Les children en JSX Elément JSX Les expressions Javascript Undefined ou null Les fonctions
  36. 36. Une formation Comprendre les children en JSX- Démo Sandy Ludosky
  37. 37. Une formation Les children en JSX Élément JSX Les expressions Javascript Undefined ou null Les fonctions
  38. 38. Une formation Les children en JSX Élément JSX Les expressions Javascript Undefined ou null Les fonctions
  39. 39. Une formation Démo
  40. 40. Une formation Découvrir les notations à points Sandy Ludosky
  41. 41. Notation à points Créer plusieurs composants dans un module
  42. 42. Une formation Comprendre les refs et le DOM Sandy Ludosky
  43. 43. Une formation Les refs & le DOM Offre un moyen direct d’accéder au nœud du DOM de façon impérative ref={}
  44. 44. Une formation Créer un ref const buttonRef = React.createRef()
  45. 45. Une formation Accéder au noeud avec ref <Button ref={buttonRef}> click </Button>
  46. 46. Une formation Comprendre le transfert de refs Sandy Ludosky
  47. 47. Une formation Transfert de refs Technique permettant de déléguer un ref à un composant enfant React.forwardRef((props, ref) => { // some code ... })
  48. 48. Une formation Découvrir les Fragments Sandy Ludosky
  49. 49. Une formation Fragments <> Regroupement de composants sans ajout de noeud au Document Object Model (DOM) <Fragment>…{children}</Fragment>
  50. 50. Une formation <>…{children}</> Version courte
  51. 51. Une formation Conclusion Sandy Ludosky
  52. 52. Une formation Utiliser les props de rendu pour des questions transversales Sandy Ludosky
  53. 53. Une formation Les props de rendu “render props” Partage de code entre composants prop : fonction() {} Exemples librairies tierces : react-router, Formik ...
  54. 54. Une formation Utiliser les props de rendu How to ? Sandy Ludosky
  55. 55. Une formation Utiliser les props de rendu Exercice & solution Sandy Ludosky
  56. 56. Une formation Utiliser les props de rendu Exercice & solution Sandy Ludosky
  57. 57. Une formation Utiliser les props de rendu Solution avec HOC Sandy Ludosky
  58. 58. Une formation Découvrir les composants d’ordre supérieur Définition, exemple et bénéfices Sandy Ludosky
  59. 59. Une formation Définition Higher Order Component ou HOC Fonction qui accepte un composant et renvoie un nouveau composant
  60. 60. Fonction Nouveau composant composant
  61. 61. Une formation Bénéfices de l’HOC Technique avancée de React Encapsulation logique Réutilisation et partage de code
  62. 62. Une formation Utiliser les composants d’ordre supérieur How to? Sandy Ludosky
  63. 63. Une formation Utiliser les composants d’ordre supérieur réutiliser le comportement Sandy Ludosky
  64. 64. Une formation Utiliser les composants d’ordre supérieur Implémenter le HOC with dataSource Sandy Ludosky
  65. 65. Une formation Découvrir le context API et son usage Sandy Ludosky
  66. 66. Une formation Solution pour passer des données à travers l’arborescence de l’application sans avoir à passer manuellement les props à chaque niveau du projet React Définition
  67. 67. Une formation Contexte API Props accessible partout Pas de “props drilling” Découplage
  68. 68. Une formation API : usage const Context = React.createContext() Context.Provider Context.Consumer
  69. 69. Une formation Découvrir le context API Démo Sandy Ludosky
  70. 70. Une formation Démo
  71. 71. Une formation Découvrir le context API Exercice & solution Sandy Ludosky
  72. 72. Une formation Découvrir le context API Exercice & solution Sandy Ludosky
  73. 73. Une formation Conclusion Sandy Ludosky
  74. 74. Une formation Gestions des Erreurs : Introduction Sandy Ludosky
  75. 75. Une formation Comprendre throw Error Sandy Ludosky
  76. 76. throw Error
  77. 77. Une formation Démo API favqs.com
  78. 78. Une formation Utiliser try / catch Sandy Ludosky
  79. 79. Une formation try/catch try { // do something } catch (err) { // handling errors }
  80. 80. Une formation Comprendre le composant UI Périmètre d’erreurs Error Boundaries Sandy Ludosky
  81. 81. Une formation Conclusion Sandy Ludosky
  82. 82. Une formation Découvrir React dev Tools Profiler API Sandy Ludosky
  83. 83. Une formation React Dev Tools ⚛ Outils de débogage et extension Chrome pour la bibliothèque Javascript open-source React Profiler API
  84. 84. Une formation Découvrir Chrome dev Tools Performance Tab & Lighthouse Sandy Ludosky
  85. 85. Une formation Chrome Dev Tools Ensemble d'outils de développement web intégrés directement dans le navigateur Chrome Performance Lighthouse
  86. 86. Une formation Comprendre le Diagnostique Performance Sandy Ludosky
  87. 87. Une formation Diagnostic Performance Chrome DevTools Performance Lighthouse
  88. 88. Une formation Chrome > Performance results Exécution Javascript longue : > .. ms Opérations coûteuses
  89. 89. Une formation Lighthouse report Speed index : > ...s Taille images irrégulières et non optimale HTML elements attributs manquant Ressources & assets inutiles (JS, CSS) Caching
  90. 90. Une formation Actions requises Bundling Caching Production build Redimension des assets (images) Inventaire ressources & assets (JS)
  91. 91. Une formation Comprendre le découpage dynamique de code Import Sandy Ludosky
  92. 92. Une formation React.lazy - Suspense Import dynamique de code Chargement à la demande Déjà configuré avec React import ()
  93. 93. Une formation Comprendre le découpage dynamique de code Bundling Sandy Ludosky
  94. 94. Une formation Comprendre le Lazy coding et Suspense Sandy Ludosky
  95. 95. Une formation React.lazy - Suspense Expérimental Fonctionne avec import() dynamique Chargement à la demande Prop fallback React.lazy - Suspense
  96. 96. Une formation Comprendre le production build Sandy Ludosky
  97. 97. Production Build Conseillé de tester la version minifiée de production
  98. 98. Production Build Conseillé de tester la version minifiée de production Fichiers optimisés (chunks) Fichiers statiques cached
  99. 99. Une formation Production mode yarn build yarn build --profile
  100. 100. Une formation Découvrir le Caching Sandy Ludosky
  101. 101. Une formation Caching Stockage temporaire des réponses de requêtes HTTP pour réutilisation ultérieure Options de requête HTTP fetch
  102. 102. Une formation Conclusion Sandy Ludosky
  103. 103. Introduction Une formation Sandy Ludosky
  104. 104. Une formation Plan Qu’est-ce que l’accessibilité ? (a11y) Standards & lignes directrices (WCAG) Les bases de WAI-ARIA Règles HTML sémantique Outils de validation 👨 💻 Démo
  105. 105. Une formation Comprendre l’accessibilité (a11y) Sandy Ludosky
  106. 106. Une formation Qu’est-ce que l’accessibilité ? (a11y) Normes permettant l’accès des sites et applications à tous les utilisateurs, y compris les personnes atteintes de handicaps Meilleure expérience utilisateur pour tous Meilleur référencement internet
  107. 107. Une formation Découvrir les Standards & lignes directrices WCAG Sandy Ludosky
  108. 108. Une formation Les standards Web Content Accessibility Guidelines (WCAG) Initiative d’accessibilité du Web (WAI-ARIA) HTML Sémantique
  109. 109. Une formation Normes et documents techniques permettant de rendre accessibles sites et applications pour l’ensemble les utilisateurs, y compris ceux atteints de handicaps (malvoyants ...) Web Content Accessibility Guidelines (WCAG)
  110. 110. Une formation Pour l'accessibilité du contenu Web Développées dans le cadre du processus du W3C en coopération avec des individus et des organisations du monde entier Ensemble de directives
  111. 111. Une formation Perceptible Exploitable Compréhensible Robuste 4 principes
  112. 112. Une formation A AA AAA 3 niveaux de conformité
  113. 113. Une formation WCAG 2.0 a été publié le 11 décembre 2008 WCAG 2.1 a été publié le 5 juin 2018 WCAG 2.2 doit être publié en 2021 Web Content Accessibility Guidelines (WCAG)
  114. 114. Une formation Web Accessibility Initiative (WAI ) World Wide Web Consortium (W3C ) WAI et W3C
  115. 115. Une formation Découvrir les bases WAI-ARIA Sandy Ludosky
  116. 116. Une formation Web accessibility Initiative (WAI-ARIA) Spécifications techniques du W3C Contient les techniques nécessaires à la création d’éléments d’interface JavaScript accessibles Accroître l'accessibilité des contenus dynamiques et des composantes des interfaces dynamiques Rendre les contrôles d'interface et les contenus dynamiques plus accessibles
  117. 117. Une formation Ensemble d’attributs : aria-* Sémantique supplémentaire • Rôles • Propriétés • Etats Spécification W3C
  118. 118. Une formation Role Information sémantique supplémentaire role=”button” role=”navigation” role=”complementary”
  119. 119. Les bases WAI-ARIA role=”navigation” role=”search” source: https://developer.mozilla.org/fr/docs/Apprendre/a11y/WAI-ARIA_basics
  120. 120. role=”article” role=”complementary” source: https://developer.mozilla.org/fr/docs/Apprendre/a11y/WAI-ARIA_basics Les bases WAI-ARIA
  121. 121. Une formation Propriété Description ou référence supplémentaire aria-label aria-labelledby aria-describedby aria-required
  122. 122. aria-label aria-label : rendre un élément accessible https://developers.google.com/web/fundamentals/accessibility/semantics-aria/
  123. 123. https://developers.google.com/web/fundamentals/accessibility/semantics-aria/ aria-labelledby aria-labelledby : ajouter une référence sémantique
  124. 124. Une formation État Description état et condition de l’élément aria-disabled aria-disabled=”true”
  125. 125. Une formation Exemple avec la librairie responsive Bootstrap https://getbootstrap.com/ Exemple
  126. 126. Une formation Découvrir HTML sémantiques Sandy Ludosky
  127. 127. Une formation Exemples <h1>, <h2>, <h3> … <header>...</header> <footer>...</footer> alt - texte alternatif for/id
  128. 128. Une formation Découvrir les outils de validation Sandy Ludosky
  129. 129. Une formation Les outils de validation Lighthouse Chrome DevTools : accessibility Tree eslint-plugin-jsx-a11y Technologies d’assistance Lecteurs d’écran
  130. 130. Une formation Lecteurs d’écran WebAIM - Utiliser NVDA pour évaluer l’accessibilité web VoiceOver dans Safari ChromeVox (Chrome)
  131. 131. Une formation Démo accessibilité Sandy Ludosky
  132. 132. Une formation Demo
  133. 133. Une formation Démo accessibilité Sandy Ludosky
  134. 134. Une formation Demo
  135. 135. Une formation Conclusion Sandy Ludosky
  136. 136. Une formation Découvrir le mode strict Sandy Ludosky
  137. 137. Une formation Permet de signaler au moyen de warnings tout problème potentiel lors de l’exécution de l’application Utilité du mode strict
  138. 138. Une formation StrictMode Mode développement Signalement d’anomalies (⚠ warnings)
  139. 139. Usage src/index.js
  140. 140. Une formation Comprendre la validation avec les proptypes Usage Sandy Ludosky
  141. 141. Une formation Définition Module séparé exportant des validateurs pour s’assurer que les types des données soient valides
  142. 142. Une formation PropTypes Mode développement Validation des données Valeurs par défaut des props
  143. 143. Usage src/App.js
  144. 144. Usage src/App.js
  145. 145. Usage src/App.js
  146. 146. Une formation Découvrir proptypes Types et valeurs par défaut Sandy Ludosky
  147. 147. Une formation Découvrir la validation complexe avec les shapes Sandy Ludosky
  148. 148. Usage : shape
  149. 149. Exemple
  150. 150. Une formation Intégrer des bibliothèques tierces Sandy Ludosky
  151. 151. Une formation Explication React peut-être intégré dans des bibliothèques tierces S’intègre dans n’importe quelle bibliothèque tierce
  152. 152. Une formation Utiliser des bibliothèques tierces jQuery Sandy Ludosky
  153. 153. Une formation Démo
  154. 154. Une formation Découvrir les Web Components concepts & usage Sandy Ludosky
  155. 155. Une formation Concept des Web Components Ensemble de technologies(HTML, CSS, JS...) permettant de créer des composants d'interface graphique personnalisés et réutilisables
  156. 156. Une formation Usage des Web Components Réutilisation code/UI Encapsulation : Custom element Versatiles Librairies agnostiques
  157. 157. Une formation Quelques librairies Stencils.js (ionic) Material components web UI-5 web components Web components org
  158. 158. Une formation Découvrir les Web Components concepts & usage Sandy Ludosky
  159. 159. Une formation Concept des Web Components Ensemble de technologies(HTML, CSS, JS...) permettant de créer des composants d'interface graphique personnalisés et réutilisables
  160. 160. Une formation Usage des Web Components Réutilisation code/UI Encapsulation : Custom element Versatiles Librairies agnostiques
  161. 161. Une formation Quelques librairies Stencils.js (ionic) Material components web UI-5 web components Web components org
  162. 162. Une formation Mot de fin Sandy Ludosky
  163. 163. Rappel Cursus React
  164. 164. Une formation Introduction 1. L’essentiel et en détails 2. Patterns avancés de React 3. Gestion des erreurs 4. Optimisation & Performance 5. Sémantique & Accessibilité 6. Autres sujets avancés Conclusion Bilan
  165. 165. Prochaines formations
  166. 166. @San10lulu https://www.youtube.com/c/San10lulu SandyLudosky.WebDev Sandy Ludosky Formatrice et consultante en informatique

×