Formation Svelte

Introduction à Svelte

• Préparation de l’environnement de développement
• Les extensions utiles dans VS Code
• Le site Officiel de Svelte
• Premiers pas avec Svelte via le REPL
• Ajout d’un composant
• Installation ou mise à jour de Node.js
• Création d’un premier projet Svelte avec Vite

La syntaxe de base de Svelte

• Création d’un squelette Svelte standard avec Vite
• Les interpolations
• Exercice
• Variables réactives
• Data binding
• Plusieurs composants dans une application Svelte
• Utilisation d’un objet JSON pour les props
• Passage de fonctions d’un composant à un autre
• Interpolations en texte brut ou en HTML
• Classes conditionnelles

Conditions, boucles et gestion événementielle

• Exécution de code HTML conditionnellement
• Boucles each
• Deux paramètres dans une boucle each
• Parcours d’objets JSON avec each
• Gestion événementielle de la souris
• Gestion événementielle du clavier
• Les modificateurs d’événements (event modifiers)

Contrôle d’état et les stores

• Concept fondamental d’un store
• Élaboration et souscription à un custom store
• Mise à jour des données du store
• Création d’un store writable
• Stores dérivés
• Contrôle des abonnements et des autosouscriptions

Les composants

• Première approche des composants
• Encore plus de composants
• Passer des données d’un enfant au parent avec des Custom Events
• Transmission de données au parent avec un Custom Event
• Chaînage d’événements de composant à composant
• Chaînage d’événements du DOM

Slots et Lifecycle hooks

• Slots simples
• Slots nommés
• Slot par défaut
• Affichage conditionnel de slots
• Utilisation conjointe de slots et de props dans une application Svelte
• Lifecycle Hooks
• Interfaçage d’une API REST dans le hook onMount
• Utilisation du bloc {#await}
• Interfaçage de la base de données The Movie Database
• Suite Interfaçage de la base de données The Movie Database