React

Documentation

Qu’est-ce que React

Cette librairie est très populaire, devenue aussi importante qu’un framework.
Une librairie résout une problématique alors qu’un framework est un cadre de travail complet qui généralement résout plusieurs problèmes. C’est la librairie JavaScript la plus populaire.
Elle sert à créer des interfaces utilisateurs avec des composants autonomes qui maintiennent leur propre état. React permet de créer des applications Web.

Qu’est-ce qu’une application web

C’est un site avec beaucoup de fonctionnalités qui nous donnent l’impression d’utiliser une application mobile, car il n’y a pas beaucoup de temps de chargement entre les pages, vu que tout se charge dès le début.

1. Javascript Syntaxe eXtension
2. Infos utiles
3. Quelques explications

Rappel de JavaScript moderne

1. ‘Let’ et ‘const’
2. Fonction classique vs fléchée
3. ‘Spread’ et ‘Rest’
4. Fonction pure
5. Fonction d’ordre supérieur
6. Fonction d’ordre supérieur et tableau
7. Destructuring

Les bases de React

1. Mettre en place une web app
2. Explications
3. C’est quoi JSX ?
4. Créer un composant
5. Découverte de ‘useState’ ······> Les données d’un composant
6. Modifier le state ······················> Modifier les données d’un composant
7. Les ‘props’ ······························> Les propriétés
8. Remonter le state
9. Utiliser le CSS
10. Utiliser les images
11. Utiliser les inputs
12. Rendu conditionnel avec ‘if’
13. Rendu conditionnel avec l’opération ternaire
14. Rendu conditionnel avec un toggle de class et de css
15. Créer des listes

React dans le détail

1. Les 2 règles des hooks
2. Les hooks utilitaires
3. Le hook ‘useEffect’
4. Appel à une api avec ‘useEffect’
5. Utiliser ‘setInterval’
6. La destruction d’un composant
7. Les ‘React fragments’
8. Le hook ‘useRef’
9. Sélectionner un tableau d’éléments
10. Utiliser ‘addEventListener’
11. Ne jamais changer le ‘state’ dans un tableau ou un objet avec React
12. Comprendre ‘props.children’
13. utiliser ‘usememo’ et ‘reactmemo’
14. Compléter le tout avec ‘useCallback’
15. Créer un hook personnalisé
16. Créer une fenêtre modale
17. Créer un accordéon
18. Créer une navbar responsive
19. Les bases de React-router
20. Les chemins dynamyques
21. Créer la navigation
22. Utiliser les NavLinks
23. Les routes imbriquées
24. Les hooks utilitaires ‘useParam’ et ‘useLocation’
25. L’API de contexte
26. À quoi servent l’api de contexte et Redux ?
27. Mise en place de l’API de contexte
28. Premier contexte
29. Créer le ‘Dark-light-mode’
30. Installer ‘Redux’
31. Créer le store
32. Le hook useSelect
33. Créer un ‘reducer’
34. Le ‘payload’ avec ‘dispatch’
35. Combiner plusieurs reducers
36. Qu’est-ce qu’un middleware
37. Appel asynchrone avec Redux Thunk