Accueil Formations

Apprendre Svelte 3 et SvelteKit 1.0

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 Découvrir l'abonnement
Mise à jour : 07/05/2024
Durée : 7h 42min
77 vidéos
Offre limitée -70% : 00j 00h 00m
Abonnement
  • Accès illimité à 1700 formations
34,90€ 10,47€ /mois
Elephorm Je m'abonne
Recommandé
Achat unique
  • Accès illimité à la formation
129,00€ 38,70€ Ajouter au panier Acheter maintenant

Ce que vous allez apprendre

  • Installer et configurer un environnement de développement pour Svelte (VS Code, Node.js, Vite)
  • Créer des composants Svelte et organiser une application de manière modulaire
  • Mettre en œuvre la réactivité, les props, les événements personnalisés et les slots
  • Gérer formulaires, liaisons de données et validation côté interface
  • Centraliser l’état avec les stores (writable/readable) et créer des stores personnalisés
  • Consommer une API REST et charger des données de façon asynchrone
  • Créer une application SPA avec routage et navigation
  • Structurer un projet SvelteKit (pages, layouts, routage dynamique, erreurs 404)
1

Introduction et premiers pas

2

La syntaxe de base de Svelte

Création d'un squelette Svelte standard 02:50
Guide d'Utilisation des Interpolations dans Svelte 07:46
Exercice Pratique avec Svelte 05:29
Utilisation des Variables Réactives en Svelte 05:02
Liaisons de données avec Svelte : Mono-directionnelles et bidirectionnelles 09:36
Comment faire communiquer des composants Svelte avec des props 07:58
Utilisation d'un Objet JSON pour Passer des Props en React 02:56
Passer des Fonctions Entre Composants dans Svelte 09:08
Utilisation du code HTML dans les variables JavaScript 02:57
Appliquer des Classes CSS Conditionnellement en HTML 04:55
3

Conditions, boucles et gestion événementielle

Utiliser les directives IF, ELSEIF et ELSE en HTML 07:17
Utiliser la Directive Each avec Svelte 08:35
Utilisation des Boucles each avec Index dans Svelte 09:34
Parcours d'objets JSON avec une boucle each en JavaScript 02:22
Gestion des Événements en JavaScript avec Svelte 04:00
Gestion des Événements Clavier en Javascript avec Svelte 06:47
Optimisation des gestionnaires d'événements DOM avec des modificateurs 05:43
4

Les composants

Explorer les Composants Svelte 08:25
Modularisation avec Svelte: Création de Composants 14:20
Utilisation des Custom Events en Svelte 09:06
Utiliser les Custom Events pour Transmettre des Données entre Composants 03:23
Transmettre des événements personnalisés dans Svelte 09:42
Transmettre des Événements DOM en Svelte 05:46
5

Slots et Lifecycle hooks

Introduction aux Slots Simples dans Svelte 07:26
Utilisation des Slots Nommés dans Svelte 03:24
Comprendre les Slots par Défaut dans Svelte 01:28
Utiliser la directive IF pour les Slots en Svelte 05:39
Utiliser conjointement slots et props pour des composants réactifs 03:28
Le Cycle de Vie des Composants Svelte 01:33
Utilisation du hook OnMount dans Svelte avec Axios 12:59
Utilisation des directives Await pour remplacer OnMount 02:26
Intégration de The Movie Database avec Svelte : Un Guide Complet 13:48
Affichage des données de The Movie Database 10:35
6

Gestion des formulaires

Utilisation des Inputs de Type Number en Svelte 02:24
Introduction aux balises input en Svelte 07:09
Tutoriel: Manipuler les Listes Déroulantes avec Svelte 03:47
Gestion des balises Input de type Date, Color, File, DateTimeLocal, Week et Month 03:35
Intégration et Liaison de Formulaires en Svelte 05:13
Création d'une Mini-Application avec HTML et Svelte 12:10
Comment Valider un Formulaire en Svelte 07:14
7

Les stores de Svelte

Introduction aux Stores Svelte 01:14
Utilisation du RateableStore en Svelte 11:22
Développez une Application Svelte de Gestion de Bibliothèque 18:05
Comment éviter les fuites mémoire dans Svelte avec Unsubscribe 04:30
Accéder aux Variables du Store Svelte 01:36
Gérer la suppression de livres dans un store Svelte 06:17
Créer un Store Personnalisé en Svelte 07:13
Implémentation de ReadableStore dans Svelte 09:01
8

Animations et transitions

Optimiser les Animations avec Svelte Motion 10:14
Animer une propriété CSS inline avec Svelte Motion 03:41
Guide des Animations Spring 02:31
Animation des Éléments HTML avec Svelte Transition 07:32
Comment désactiver des images dans Svelte avec une animation de sortie 03:41
Gestion des animations dans les balises HTML 03:22
Apprendre à gérer les animations avec Svelte 02:17
9

Une application SPA avec Svelte

Introduction aux Applications Monopages (SPA) 03:07
Utiliser Svelte SPA Router pour les applications monopages 06:21
Passage de Données dans l'URL avec Svelte 04:36
Gestion de la Navigation dans une Application SPA avec Svelte 02:49
10

SvelteKit

Créer une Application SvelteKit de Démonstration 03:01
Structurer un Projet SvelteKit 02:23
Créer un squelette d'application SvelteKit 04:52
Créer et configurer un composant SvelteKit avec un alias personnalisé 07:02
Uniformisation de Mise en Forme avec SvelteKit 08:33
Définir des Styles Globaux avec SvelteKit 02:51
Organiser des pages avec des layouts spécifiques dans SvelteKit 01:03
Charger des Données Asynchrones dans un Composant SvelteKit 03:30
Récupération de données multi-sources avec SvelteKit 03:31
Tutoriel sur le Routage Dynamique avec SvelteKit 14:20
Gestion des Erreurs 404 dans SvelteKit 06:23

Description

Cette formation guide pas à pas la prise en main de Svelte et de SvelteKit afin de développer des interfaces modernes, réactives et orientées performance. Le parcours démarre par l’installation de l’environnement (VS Code, Node.js, Vite) puis aborde la syntaxe essentielle : interpolations, variables réactives, liaisons de données et communication entre composants via props et fonctions.

Les chapitres suivants structurent une approche pratique de la création d’applications : conditions et boucles, gestion d’événements, custom events, slots simples et nommés, ainsi que les lifecycle hooks. La formation traite également des formulaires (types d’inputs, binding, validation) et des stores (writable, readable, stores personnalisés) pour centraliser l’état et éviter les fuites mémoire.

Une mise en situation permet de consommer des données d’API (dont un exemple avec The Movie Database) et d’implémenter du chargement asynchrone. Enfin, la partie SvelteKit couvre la structuration d’un projet, la gestion des pages et layouts, le routage dynamique et la gestion d’erreurs (dont les 404), pour construire une SPA cohérente. La formation se prête à une mise en pratique immédiate sur des cas courants de développement web, notamment via Elephorm.

Pré-requis

Connaissance de base en JavaScript. Connaissance de base en HTML et CSS.

Public Cible

Cette formation s’adresse aux développeurs front-end et développeurs web souhaitant intégrer Svelte et SvelteKit à leurs projets. Elle convient également aux étudiants et profils en reconversion disposant de bases solides en intégration web et en JavaScript.

Questions fréquentes

  • Quelle différence entre Svelte et SvelteKit ?
    Svelte est le framework de composants pour construire l’interface. SvelteKit apporte une structure d’application (pages, layouts, routage, chargement de données, gestion d’erreurs) pour créer des projets complets.
  • La formation couvre-t-elle la création d’applications SPA ?
    Oui. Elle aborde la logique SPA, la navigation, le passage de paramètres dans l’URL et la mise en place d’un routage adapté, puis la structuration d’une application avec SvelteKit.
  • Apprend-on à gérer l’état d’une application avec les stores Svelte ?
    Oui. Les stores (writable/readable) et la création de stores personnalisés sont expliqués, avec des exemples concrets (abonnement/désabonnement, organisation de l’état, évitement des fuites mémoire).
  • Les formulaires et la validation sont-ils inclus ?
    Oui. La formation traite le binding, les différents types d’inputs (date, file, color, etc.), la construction de mini-applications et des approches de validation de formulaire.
  • Aborde-t-on la consommation d’API REST et le chargement asynchrone ?
    Oui. La formation montre comment interfacer une API REST, afficher des données et gérer le chargement asynchrone (hooks et directives adaptées), y compris sur des cas multi-sources avec SvelteKit.

Avis des apprenants

Formez vous à la carte, ou abonnez vous
Offre limitée -70% : 00j 00h 00m
Achat unique
  • Accès illimité à la formation
129,00€ 38,70€ Ajouter au panier Acheter maintenant
ou
Abonnement
  • Accès illimité à 1700 formations
34,90€ 10,47€ /mois
Elephorm Je m'abonne
Recommandé