- Component
- Hook
- View
- Page
- Route
Le Component est le plus petit élément du système. Son rôle est l'affichage de la donnée en provenance des niveaux supérieurs et la transmission des ordres vers les niveaux supérieurs. Ni plus ni moins.
Recommandations:
- Ne doit détenir aucune logique (métier)
- Connection à la logique uniquement via les props.
- Les imports (dépendances) sont uniquement des dépendances envers les composants enfants.
- Tous les composants enfants sont des composants (Pas de view, ni de hooks, ou autres éléments appartenant aux niveaux supérieurs)
- Couplage fort avec le style: le composant détient son style.
Le Hook détient la logique utilisable par une ou plusieurs views. Il est une composition d'un ou plusieurs hooks sous-jacents et régit en totalité le fonctionnement des views qui l'utilisent.
La View représente la jonction entre les composants et la logique. La view ne détient pas à proprement parler la logique mais l'expose à ces composants enfants. Elle peut aussi utiliser ses propres props pour initialiser le hook sous-jacent.
Recommandations:
- Doit idéalement n'importer qu'un seul hook (la logique) et en exposer les clés aux composants sous-jacents via les props.
- Idéalement ne pas composer les view entres elles mais plutôt le faire au niveau des pages.
La Page représente le point d'entrée d'une ou plusieurs View. Chaque page doit être associée à une url sinon il s'agit d'une view.
La Route est la jonction entre une page est une Url.
cons
- On crée plus de fichiers
- Slow start
pros
+ On modifie un seul fichier par type de changement
+ Moins de temps à débuguer (tout est transparent)
+ Forte interchangeabilité de toutes les parties du code
+ -> Refactos de plus en plus rapides
+ -> Temps de développement inversement exponentiel
- Routage déclaratif avec React router v6
- "From Async to sequence" avec @tutanck/react-async
- Styled Components