● 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

1. Une formation
Formation
React
Niveau Avancé
Sandy Ludosky

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. Cursus React

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. Une formation
Développeurs Front
Intégrateurs web
Chefs et facilitateurs de projet
Public concerné

6. Une formation
Connaissances requises
HTML & CSS
Notions de javascript
Fondamentaux de React
Expérience avec la librairie
Bootstrap

8. Une formation
Présentation du projet
Sandy Ludosky

9. Une formation
Outils
Visual Code Studio
Le terminal
cli-react
Chrome DevTools
Redux DevTools

10. Comprendre la syntaxe JSX
Une formation
Sandy Ludosky

11. Une formation
Langage de balises
Extension Javascript + XML
Créée pour React
Créer des éléments Custom
Syntaxe JSX

12. Une formation
Props comme attributs
Sucre syntaxique
Syntaxe JSX

13. Code JSX

14. Usage type JSX

15. Code compilé

16. Découvrir les règles JSX
Une formation
Sandy Ludosky

17. Import React
React doit être dans le scope du fichier

18. Une formation
Les règles JSX
Commencer par une Majuscule :
<Foo />
vs. élément HTML natif :
exemples : <div> <span> ...

19. Majuscule

20. Majuscule : Type JSX

21. Minuscule : élément HTML natif

22. Une formation
Créer un composant JSX
Sandy Ludosky

23. Une formation
React.createElement(
component,
props,
...children
)
React.createElement

24. Une formation
Propriétés
Import React from ‘react’
Commence avec Majuscule
Props (attributs)

25. Une formation
Créer un Composant JSX

26. Une formation
<Button />
const Button = function() {
return <button> click me!
</button>
}

27. Une formation
React.createElement(
Button,
{color: ‘purple’,
textSize: 20},
‘click me !’
)
Code
type

28. Une formation
React.createElement(
Button,
{color: ‘purple’,
textSize: 20},
‘click me !’
)
props
Code

29. Une formation
React.createElement(
Button,
{color: ‘purple’,
textSize: 20},
‘click me !’
)
children
Code

30. Une formation
Démo

31. Découvrir les props en JSX
Une formation
Sandy Ludosky

32. Une formation
Les props JSX
Syntaxe {}
Booléen
Les expressions Javascript
Les littéraux chaînes (string)
Décomposition des props {...}

33. Une formation
Comprendre
les children en JSX
Sandy Ludosky

34. Une formation
Les children en JSX
Elément JSX
Les expressions Javascript
Undefined ou null
Les fonctions

35. Une formation
Comprendre les children
en JSX
Sandy Ludosky

36. Une formation
Les children en JSX
Elément JSX
Les expressions Javascript
Undefined ou null
Les fonctions

37. Une formation
Comprendre les children
en JSX- Démo
Sandy Ludosky

38. Une formation
Les children en JSX
Élément JSX
Les expressions Javascript
Undefined ou null
Les fonctions

39. Une formation
Les children en JSX
Élément JSX
Les expressions Javascript
Undefined ou null
Les fonctions

40. Une formation
Démo

41. Une formation
Découvrir
les notations à points
Sandy Ludosky

42. Notation à points
Créer plusieurs composants dans un module

43. Une formation
Comprendre
les refs et le DOM
Sandy Ludosky

44. Une formation
Les refs & le DOM
Offre un moyen direct d’accéder au
nœud du DOM de façon impérative
ref={}

45. Une formation
Créer un ref
const buttonRef = React.createRef()

46. Une formation
Accéder au noeud avec ref
<Button ref={buttonRef}>
click
</Button>

47. Une formation
Comprendre le transfert
de refs
Sandy Ludosky

48. Une formation
Transfert de refs
Technique permettant de déléguer un ref à
un composant enfant
React.forwardRef((props, ref) => {
// some code ...
})

49. Une formation
Découvrir les Fragments
Sandy Ludosky

50. Une formation
Fragments <>
Regroupement de composants sans ajout
de noeud au Document Object Model
(DOM)
<Fragment>…{children}</Fragment>

51. Une formation
<>…{children}</>
Version courte

52. Une formation
Conclusion
Sandy Ludosky

53. Une formation
Utiliser les props de rendu pour
des questions transversales
Sandy Ludosky

54. Une formation
Les props de rendu
“render props”
Partage de code entre composants
prop : fonction() {}
Exemples librairies tierces :
react-router, Formik ...

55. Une formation
Utiliser les props de rendu
How to ?
Sandy Ludosky

56. Une formation
Utiliser les props de rendu
Exercice & solution
Sandy Ludosky

57. Une formation
Utiliser les props de rendu
Exercice & solution
Sandy Ludosky

58. Une formation
Utiliser les props de rendu
Solution avec HOC
Sandy Ludosky

59. Une formation
Découvrir les composants
d’ordre supérieur
Définition, exemple et bénéfices
Sandy Ludosky

60. Une formation
Définition
Higher Order Component ou HOC
Fonction qui accepte un composant
et renvoie un nouveau composant

61. Fonction
Nouveau composant composant

62. Une formation
Bénéfices de l’HOC
Technique avancée de React
Encapsulation logique
Réutilisation et partage de code

63. Une formation
Utiliser les composants
d’ordre supérieur
How to?
Sandy Ludosky

64. Une formation
Utiliser les composants
d’ordre supérieur
réutiliser le comportement
Sandy Ludosky

65. Une formation
Utiliser les composants
d’ordre supérieur
Implémenter le HOC with dataSource
Sandy Ludosky

66. Une formation
Découvrir le context API
et son usage
Sandy Ludosky

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

68. Une formation
Contexte API
Props accessible partout
Pas de “props drilling”
Découplage

69. Une formation
API : usage
const Context = React.createContext()
Context.Provider
Context.Consumer

70. Une formation
Découvrir le context API
Démo
Sandy Ludosky

71. Une formation
Démo

72. Une formation
Découvrir le context API
Exercice & solution
Sandy Ludosky

73. Une formation
Découvrir le context API
Exercice & solution
Sandy Ludosky

74. Une formation
Conclusion
Sandy Ludosky

75. Une formation
Gestions des Erreurs :
Introduction
Sandy Ludosky

76. Une formation
Comprendre throw Error
Sandy Ludosky

77. throw Error

78. Une formation
Démo
API favqs.com

79. Une formation
Utiliser try / catch
Sandy Ludosky

80. Une formation
try/catch
try {
// do something
} catch (err) {
// handling errors
}

81. Une formation
Comprendre le composant UI
Périmètre d’erreurs
Error Boundaries
Sandy Ludosky

82. Une formation
Conclusion
Sandy Ludosky

83. Une formation
Découvrir React dev Tools
Profiler API
Sandy Ludosky

84. Une formation
React Dev Tools ⚛
Outils de débogage et extension Chrome
pour la bibliothèque Javascript open-source
React
Profiler API

85. Une formation
Découvrir Chrome dev Tools
Performance Tab & Lighthouse
Sandy Ludosky

86. Une formation
Chrome Dev Tools
Ensemble d'outils de développement web
intégrés directement dans le navigateur
Chrome
Performance
Lighthouse

87. Une formation
Comprendre
le Diagnostique Performance
Sandy Ludosky

88. Une formation
Diagnostic Performance
Chrome DevTools
Performance
Lighthouse

89. Une formation
Chrome > Performance results
Exécution Javascript longue : > .. ms
Opérations coûteuses

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

91. Une formation
Actions requises
Bundling
Caching
Production build
Redimension des assets (images)
Inventaire ressources & assets (JS)

92. Une formation
Comprendre le découpage
dynamique de code
Import
Sandy Ludosky

93. Une formation
React.lazy - Suspense
Import dynamique de code
Chargement à la demande
Déjà configuré avec React
import ()

94. Une formation
Comprendre le découpage
dynamique de code
Bundling
Sandy Ludosky

95. Une formation
Comprendre
le Lazy coding et Suspense
Sandy Ludosky

96. Une formation
React.lazy - Suspense
Expérimental
Fonctionne avec import() dynamique
Chargement à la demande
Prop fallback
React.lazy - Suspense

97. Une formation
Comprendre
le production build
Sandy Ludosky

98. Production Build
Conseillé de tester la version minifiée de production

99. Production Build
Conseillé de tester la version minifiée de production
Fichiers optimisés (chunks)
Fichiers statiques cached

100. Une formation
Production mode
yarn build
yarn build --profile

101. Une formation
Découvrir le Caching
Sandy Ludosky

102. Une formation
Caching
Stockage temporaire des réponses de
requêtes HTTP pour réutilisation
ultérieure
Options de requête HTTP fetch

103. Une formation
Conclusion
Sandy Ludosky

104. Introduction
Une formation
Sandy Ludosky

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

106. Une formation
Comprendre l’accessibilité
(a11y)
Sandy Ludosky

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

108. Une formation
Découvrir les Standards &
lignes directrices
WCAG
Sandy Ludosky

109. Une formation
Les standards
Web Content Accessibility Guidelines
(WCAG)
Initiative d’accessibilité du Web (WAI-ARIA)
HTML Sémantique

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

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

112. Une formation
Perceptible
Exploitable
Compréhensible
Robuste
4 principes

113. Une formation
A
AA
AAA
3 niveaux de conformité

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

115. Une formation
Web Accessibility Initiative (WAI )
World Wide Web Consortium (W3C )
WAI et W3C

116. Une formation
Découvrir
les bases WAI-ARIA
Sandy Ludosky

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

118. Une formation
Ensemble d’attributs : aria-*
Sémantique supplémentaire
• Rôles
• Propriétés
• Etats
Spécification W3C

119. Une formation
Role
Information sémantique supplémentaire
role=”button”
role=”navigation”
role=”complementary”

120. Les bases WAI-ARIA
role=”navigation”
role=”search”
source: https://developer.mozilla.org/fr/docs/Apprendre/a11y/WAI-ARIA_basics

121. role=”article”
role=”complementary”
source: https://developer.mozilla.org/fr/docs/Apprendre/a11y/WAI-ARIA_basics
Les bases WAI-ARIA

122. Une formation
Propriété
Description ou référence
supplémentaire
aria-label
aria-labelledby
aria-describedby
aria-required

123. aria-label
aria-label : rendre un élément accessible
https://developers.google.com/web/fundamentals/accessibility/semantics-aria/

124. https://developers.google.com/web/fundamentals/accessibility/semantics-aria/
aria-labelledby
aria-labelledby : ajouter une référence sémantique

125. Une formation
État
Description état et condition de l’élément
aria-disabled
aria-disabled=”true”

126. Une formation
Exemple avec la librairie responsive
Bootstrap
https://getbootstrap.com/
Exemple

127. Une formation
Découvrir
HTML sémantiques
Sandy Ludosky

128. Une formation
Exemples
<h1>, <h2>, <h3> …
<header>...</header>
<footer>...</footer>
alt - texte alternatif
for/id

129. Une formation
Découvrir
les outils de validation
Sandy Ludosky

130. Une formation
Les outils de validation
Lighthouse
Chrome DevTools : accessibility Tree
eslint-plugin-jsx-a11y
Technologies d’assistance
Lecteurs d’écran

131. Une formation
Lecteurs d’écran
WebAIM - Utiliser NVDA pour évaluer
l’accessibilité web
VoiceOver dans Safari
ChromeVox (Chrome)

132. Une formation
Démo accessibilité
Sandy Ludosky

133. Une formation
Demo

134. Une formation
Démo accessibilité
Sandy Ludosky

135. Une formation
Demo

136. Une formation
Conclusion
Sandy Ludosky

137. Une formation
Découvrir le mode strict
Sandy Ludosky

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

139. Une formation
StrictMode
Mode développement
Signalement d’anomalies (⚠
warnings)

140. Usage
src/index.js

141. Une formation
Comprendre la validation avec
les proptypes
Usage
Sandy Ludosky

142. Une formation
Définition
Module séparé exportant des
validateurs pour s’assurer que les
types des données soient valides

143. Une formation
PropTypes
Mode développement
Validation des données
Valeurs par défaut des props

144. Usage
src/App.js

145. Usage
src/App.js

146. Usage
src/App.js

147. Une formation
Découvrir proptypes
Types et valeurs par défaut
Sandy Ludosky

148. Une formation
Découvrir la validation
complexe avec les shapes
Sandy Ludosky

149. Usage : shape

150. Exemple

151. Une formation
Intégrer
des bibliothèques tierces
Sandy Ludosky

152. Une formation
Explication
React peut-être intégré dans des
bibliothèques tierces
S’intègre dans n’importe quelle
bibliothèque tierce

153. Une formation
Utiliser des bibliothèques tierces
jQuery
Sandy Ludosky

154. Une formation
Démo

155. Une formation
Découvrir les Web Components
concepts & usage
Sandy Ludosky

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

157. Une formation
Usage des Web Components
Réutilisation code/UI
Encapsulation : Custom element
Versatiles
Librairies agnostiques

158. Une formation
Quelques librairies
Stencils.js (ionic)
Material components web
UI-5 web components
Web components org

159. Une formation
Découvrir les Web Components
concepts & usage
Sandy Ludosky

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

161. Une formation
Usage des Web Components
Réutilisation code/UI
Encapsulation : Custom element
Versatiles
Librairies agnostiques

162. Une formation
Quelques librairies
Stencils.js (ionic)
Material components web
UI-5 web components
Web components org

163. Une formation
Mot de fin
Sandy Ludosky

164. Rappel Cursus React

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

166. Prochaines formations

167. @San10lulu
https://www.youtube.com/c/San10lulu
SandyLudosky.WebDev
Sandy Ludosky
Formatrice et consultante en informatique