CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Introduction au REPL de Svelte

Introduction au REPL de Svelte

Premiers pas avec Svelte via le REPL
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

Premier Pas avec le REPL

Objectifs

Les objectifs de cette vidéo sont de :
- Introduire Svelte et son environnement REPL.
- Expliquer la structure des composants Svelte.
- Montrer comment ajouter des fonctionnalités interactives.
- Illustrer l'intégration du CSS dans les composants Svelte.

Résumé

Apprenez à utiliser l'environnement de programmation interactif REPL de Svelte pour créer des composants dynamiques avec un exemple simple de compteur.

Description

Dans cette leçon, vous allez faire vos premiers pas avec l'environnement de programmation interactif REPL de Svelte. Vous serez guidés à travers la création et la manipulation de composants interactifs. La vidéo commence par vous montrer comment accéder au REPL depuis le site officiel de Svelte. Ensuite, un composant app.svelte est automatiquement généré, avec un exemple de titre modifiable.

Nous examinons en détail la structure du code, en expliquant les différentes sections : la section script où les variables sont définies et la section HTML où les données sont affichées. Des concepts comme l'interpolation et la réaction automatique aux changements de variables sont démontrés. La leçon inclut également une explication sur comment ajouter des fonctions événementielles, illustrée par la création d'un compteur à l'aide d'une variable et d'un bouton. Vous apprendrez à mettre à jour dynamiquement l'interface utilisateur en réaction aux événements.

Pour conclure, la vidéo montre comment sauvegarder le travail sur GitHub et ajoute une section CSS pour styliser les composants, illustrant pleinement l'intégration des différentes parties d'un composant Svelte.

Voir plus

Questions - réponses

Comment accéder au REPL de Svelte ?
Pour accéder au REPL de Svelte, allez sur la page https://svelte.dev et basculez sur l'onglet REPL.
Comment ajouter une fonction événementielle dans un composant Svelte ?
Vous pouvez ajouter une fonction événementielle en définissant la fonction dans la section script et en liant cette fonction à un événement dans la section HTML à l'aide de la directive on:click.
Quelle est la structure de base d'un composant Svelte ?
Un composant Svelte de base comporte une section script pour la logique JavaScript, une section HTML pour le marquage, et une section style pour les styles CSS.

Programme détaillé