CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

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

Retour à la formation
Chapitre 10 Leçon 4
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Avant de suivre cette vidéo, vous devez avoir :
- Des connaissances de base en JavaScript et CSS.
- Une compréhension fondamentale de Svelte et SvelteKit.
- Un environnement de développement configuré avec Node.js et SvelteKit.

Métiers concernés

Les développeurs front-end et les concepteurs UX/UI trouveront cette vidéo particulièrement utile. Les compétences acquises peuvent également s'appliquer aux rôles de développeurs full-stack et d'ingénieurs logiciels se spécialisant dans le développement d'applications modernes et interactives.

Alternatives et ressources

Les alternatives à cet exercice incluent l'utilisation d'autres frameworks JavaScript populaires comme React.js ou Vue.js qui offrent des possibilités similaires pour la création et l'organisation de composants réutilisables.

Questions & Réponses

Configurer un alias de chemin simplifie l'importation des composants, améliore la lisibilité du code et facilite la maintenance du projet.
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.
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.