Comprendre les Composants à État et de Présentation
Objectifs
L'objectif de cette vidéo est de vous apprendre à utiliser les composants Svelte, à structurer votre application de manière modulaire, et à améliorer la mise en page avec du CSS avancé.
Résumé
Explorez les deux types de composants Svelte : Stateful et Presentational. Apprenez à les utiliser pour construire des applications web robustes.
Description
Cette leçon vous guide à travers l'utilisation des composants Svelte pour développer des applications web. Vous découvrirez les composants à état (Stateful Components) qui gèrent et communiquent des données réactives, ainsi que les composants de présentation (Presentational Components), qui affichent des données sans les manipuler. À travers un exemple pratique, nous verrons comment parser des données JSON et les afficher à l'aide de ces composants. Nous aborderons également la mise en page en CSS pour améliorer l'affichage.
Le composant principal, app.svelte
, importera un composant additionnel, employe.svelte
, qui contiendra la logique d'extraction et d'affichage des données. Vous apprendrez à structurer le HTML avec les boucles each
et à appliquer du CSS avancé comme le display grid
pour organiser le contenu en colonnes.
Enfin, nous verrons comment créer des composants individuels pour chaque entité (comme une personne) pour une meilleure modularité et réutilisabilité du code.