Explorer les Composants Svelte

Première approche des composants
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Svelte 3 et SvelteKit 1.0
Revoir le teaser Je m'abonne
Transcription

Cette leçon fait partie de la formation
129,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

Cette leçon fait partie de la formation
129,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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é.

Explorez les deux types de composants Svelte : Stateful et Presentational. Apprenez à les utiliser pour construire des applications web robustes.

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.

Voir plus
Questions réponses
Quelle est la différence entre un composant à état et un composant de présentation en Svelte ?
Un composant à état (Stateful) gère et communique des données réactives, tandis qu'un composant de présentation (Presentational) affiche les données sans les manipuler.
Quel rôle joue le CSS Grid dans la mise en page de notre application ?
Le CSS Grid permet d'organiser le contenu en colonnes de manière flexible et efficace. Dans cette vidéo, il est utilisé pour créer une mise en page en deux colonnes, améliorant ainsi l'affichage des informations.
Pourquoi est-il avantageux de créer des composants individuels pour chaque entité comme une personne ?
Créer des composants individuels permet une meilleure modularité et réutilisabilité du code, facilitant ainsi la maintenance et l'évolution de l'application.

Programme détaillé