React : Design Patterns & Bonnes pratiques
ERROR
00:00
00:00

TUTO React : Design Patterns & Bonnes pratiques

Sandy Ludosky
29,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
HOC - les composants d'ordre supérieur
Chapitre 3
Smart & Dumb (Container & Presentational)
Chapitre 4
Conditional Rendering & Compound Pattern
Chapitre 5
Custom Hook
Chapitre 6
Tabs Panel
Chapitre 7
Fetch API Pattern

Plan détaillé du cours

Chapitre 1 : Introduction
01m50s
 
Leçon 1Présentation
Chapitre 2 : HOC - les composants d'ordre supérieur
1h04m
 
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)
28m50s
 
Leçon 1Introduction
Leçon 2Container - mapDataToProps
Chapitre 4 : Conditional Rendering & Compound Pattern
20m31s
 
Leçon 1Conditional Rendering
Leçon 2Compound Pattern
Chapitre 5 : Custom Hook
17m55s
 
Leçon 1Custom hook - kezako ?
Leçon 2Custom hook - comment ?
Chapitre 6 : Tabs Panel
37m33s
 
Leçon 1Projet Démarrage
Leçon 2Custom hook : useTabsContext
Leçon 3Tabs Panel
Chapitre 7 : Fetch API Pattern
1h11m
 
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
47m17s
 
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

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données