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

7.
Une formation
Présentation du projet
Sandy Ludosky

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

9.
Comprendre la syntaxe JSX
Une formation
Sandy Ludosky

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

11.
Une formation
Props comme attributs
Sucre syntaxique
Syntaxe JSX

12.
Code JSX

13.
Usage type JSX

14.
Code compilé

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

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

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

18.
Majuscule

19.
Majuscule : Type JSX

20.
Minuscule : élément HTML natif

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

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

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

24.
Une formation
Créer un Composant JSX

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

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

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

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

29.
Une formation
Démo

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

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

32.
Une formation
Comprendre
les children en JSX
Sandy Ludosky

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

34.
Une formation
Comprendre les children
en JSX
Sandy Ludosky

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

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

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

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

39.
Une formation
Démo

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

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

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

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.
Une formation
Créer un ref
const buttonRef = React.createRef()

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

46.
Une formation
Comprendre le transfert
de refs
Sandy Ludosky

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

48.
Une formation
Découvrir les Fragments
Sandy Ludosky

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

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

51.
Une formation
Conclusion
Sandy Ludosky

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

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

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

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

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

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

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

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

60.
Fonction
Nouveau composant composant

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

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

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

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

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

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.
Une formation
Contexte API
Props accessible partout
Pas de “props drilling”
Découplage

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

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

70.
Une formation
Démo

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

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

73.
Une formation
Conclusion
Sandy Ludosky

74.
Une formation
Gestions des Erreurs :
Introduction
Sandy Ludosky

75.
Une formation
Comprendre throw Error
Sandy Ludosky

76.
throw Error

77.
Une formation
Démo
API favqs.com

78.
Une formation
Utiliser try / catch
Sandy Ludosky

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

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

81.
Une formation
Conclusion
Sandy Ludosky

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

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

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

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

86.
Une formation
Comprendre
le Diagnostique Performance
Sandy Ludosky

87.
Une formation
Diagnostic Performance
Chrome DevTools
Performance
Lighthouse

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

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.
Une formation
Actions requises
Bundling
Caching
Production build
Redimension des assets (images)
Inventaire ressources & assets (JS)

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

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

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

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

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

96.
Une formation
Comprendre
le production build
Sandy Ludosky

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

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

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

100.
Une formation
Découvrir le Caching
Sandy Ludosky

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.
Une formation
Conclusion
Sandy Ludosky

103.
Introduction
Une formation
Sandy Ludosky

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.
Une formation
Comprendre l’accessibilité
(a11y)
Sandy Ludosky

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.
Une formation
Découvrir les Standards &
lignes directrices
WCAG
Sandy Ludosky

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

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.
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.
Une formation
Perceptible
Exploitable
Compréhensible
Robuste
4 principes

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

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.
Une formation
Web Accessibility Initiative (WAI )
World Wide Web Consortium (W3C )
WAI et W3C

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

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.
Une formation
Ensemble d’attributs : aria-*
Sémantique supplémentaire
• Rôles
• Propriétés
• Etats
Spécification W3C

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

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

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

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

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

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

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

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

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

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

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

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

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

131.
Une formation
Démo accessibilité
Sandy Ludosky

132.
Une formation
Demo

133.
Une formation
Démo accessibilité
Sandy Ludosky

134.
Une formation
Demo

135.
Une formation
Conclusion
Sandy Ludosky

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

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.
Une formation
StrictMode
Mode développement
Signalement d’anomalies (⚠
warnings)

139.
Usage
src/index.js

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

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

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

143.
Usage
src/App.js

144.
Usage
src/App.js

145.
Usage
src/App.js

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

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

148.
Usage : shape

149.
Exemple

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

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.
Une formation
Utiliser des bibliothèques tierces
jQuery
Sandy Ludosky

153.
Une formation
Démo

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

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.
Une formation
Usage des Web Components
Réutilisation code/UI
Encapsulation : Custom element
Versatiles
Librairies agnostiques

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

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

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.
Une formation
Usage des Web Components
Réutilisation code/UI
Encapsulation : Custom element
Versatiles
Librairies agnostiques

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

162.
Une formation
Mot de fin
Sandy Ludosky

163.
Rappel Cursus React

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.
Prochaines formations

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