4.8/5 Trustpilot (1399 avis)
React de A à Z (React Hooks inclus)
React de A à Z (React Hooks inclus)
Pourquoi avons-nous besoin de software design patterns ?
Dans ce cours en ligne, on vous propose de découvrir les motivations et les principes derrière les patrons de conception (design patterns), les bonnes pratiques et méthodologies de développement logiciel et de projets de développement React.
Nous aborderons les principes de la programmation fonctionnelle et patrons de design avec React pour apprendre à apporter les solutions reconnues aux principales problématiques de développement pour améliorer lisibilité, maintenabilité, scalabilité et testabilité.
Dans ce tuto React : Design Patterns & Bonnes pratiques
Au programme, des exemples de solutions parmi les plus utilisées :
- Les Composant d'ordre supérieur ou HOC (Higher Order Component)
- Smart vs Dumb, presentational vs container
- Le Compound component pattern
- Le Conditional Rendering
- Les custom hook : créer son propre hook
- Et, d'autres design patterns comme le style, layout et proxy component avec la même méthodologie de standardisation de code sous forme de modules
Les démos sont orientées projets et au format didacticiel pour répondre à de vrais problématiques de programmation et apprendre par l'exemple :
- mutualisation et standardisation de code,
- répétition et partage de code entre composants,
- abstraction de logique et complexité,
- optimisation du partage de logique et communication entre composants,
- découplage et séparation des responsabilités, logique et affichage de données.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours. Tous les fichiers de travail sont fournis !
Bonne formation sur les Design Patterns avec React.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
HOC - les composants d'ordre supérieur
HOC - les composants d'ordre supérieur
Chapitre 3
Smart & Dumb (Container & Presentational)
Smart & Dumb (Container & Presentational)
Chapitre 4
Conditional Rendering & Compound Pattern
Conditional Rendering & Compound Pattern
Chapitre 5
Custom Hook
Custom Hook
Chapitre 6
Tabs Panel
Tabs Panel
Chapitre 7
Fetch API Pattern
Fetch API Pattern
Table des matières
Chapitre 1 : Introduction
01m50
Leçon 1Présentation
Chapitre 2 : HOC - les composants d'ordre supérieur
1h04
Leçon 1HOC Kézako ?
Leçon 2Pourquoi les HOC ?
Leçon 3HOC : comment ça marche ?
Leçon 4HOC - withUsers
Leçon 5HOC - withUsers - Table
Leçon 6Conclusion
Chapitre 3 : Smart & Dumb (Container & Presentational)
28m50
Leçon 1Introduction
Leçon 2Container - mapDataToProps
Chapitre 4 : Conditional Rendering & Compound Pattern
20m31
Leçon 1Conditional Rendering
Leçon 2Compound Pattern
Chapitre 5 : Custom Hook
17m55
Leçon 1Custom hook - kezako ?
Leçon 2Custom hook - comment ?
Chapitre 6 : Tabs Panel
37m33
Leçon 1Projet Démarrage
Leçon 2Custom hook : useTabsContext
Leçon 3Tabs Panel
Chapitre 7 : Fetch API Pattern
1h11
Leçon 1Projet de Démarrage
Leçon 2OMDB API (Docs)
Leçon 3UseGetMovies - custom hook to fetch movie results
Leçon 4Event handlers : handleOnChange and handleOnSubmit
Leçon 5Fetch response - Afficher les résultats
Leçon 6Handling state : errors et empty
Leçon 7Compound pattern (conditional rendering)
Leçon 8UseValidation - custom hook
Chapitre 8 : Autres Design Patterns : layout, style et proxy patterns
47m17
Leçon 1Composant Réutilisable : Layout
Leçon 2Navbar Layout Component
Leçon 3Form Template Layout
Leçon 4Thank You Template
Leçon 5Style Component
Leçon 6Exemples - Solutions
Leçon 7Proxy Component
Aperçus
