CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Créer et configurer un composant SvelteKit avec un alias personnalisé

Créer et configurer un composant SvelteKit avec un alias personnalisé

Utilisation de props dans les pages
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

Définir et configurer un composant

Objectifs

Les objectifs de cette vidéo sont de vous apprendre à :
- Créer un nouveau composant Svelte dans un dossier dédié.
- Configurer un alias de chemin dans le fichier tsconfig.json.
- Ajouter du contenu et du style à un composant Svelte.
- Rendre un composant réactif en utilisant des props.
- Intégrer un composant dans une page existante.

Résumé

Apprenez à définir un composant nommé titre.svelte dans le dossier lib et à configurer l'alias $lib dans SvelteKit.

Description

Dans cette leçon, nous verrons comment créer un nouveau composant appelé titre.svelte dans le dossier lib de votre projet SvelteKit. Nous commencerons par configurer l'alias $lib dans le fichier .sveltekit/tsconfig.json pour pointer vers le dossier src/lib. Ensuite, nous créerons le composant titre.svelte avec un contenu HTML de base comprenant une image et un élément span pour afficher du texte. Nous styliserons ce composant en utilisant CSS Grid pour organiser le contenu en deux colonnes et appliquerons du style au texte. Nous ajouterons également une propriété script pour rendre le composant réactif et permettre l'export de la variable titre. Enfin, nous intégrerons ce nouveau composant dans une page existante pour vérifier son bon fonctionnement. Nous terminerons la leçon en lançant le serveur pour vérifier l'affichage du composant et l'utilisation de la propriété titre.

Voir plus

Questions - réponses

Pourquoi est-il important de configurer un alias de chemin pour les composants réutilisables ?
Configurer un alias de chemin simplifie l'importation des composants, améliore la lisibilité du code et facilite la maintenance du projet.
Quels sont les avantages d'utiliser CSS Grid pour styliser des composants ?
CSS Grid permet de créer des mises en page complexes de manière simple et flexible, en facilitant l'alignement et la disposition des éléments dans des grilles.
Comment rendre un composant Svelte réactif et modifiable depuis un autre composant ?
Un composant Svelte devient réactif en utilisant des props exportées avec la syntaxe 'export let variable'. Ces props peuvent ensuite être modifiées depuis un autre composant.

Programme détaillé