Tuto Svelte 3 et SvelteKit 1.0 avec JavaScript

Table des matières de cette formation JavaScript (durée : 7h42m)

• Introduction et premiers pas
  • 01 Préparation de l’environnement de développement 00:04:35
  • 02 Les extensions utiles dans VS Code 00:05:06
  • 03 Le site Officiel de Svelte gratuit 00:06:00
  • 04 Premiers pas avec Svelte via le REPL gratuit 00:06:34
  • 05 Ajout d’un composant 00:04:10
  • 06 Installation ou mise à jour de Node.js 00:03:49
  • 07 Création d’un premier projet Svelte avec Vite 00:06:17
• La syntaxe de base de Svelte
  • 08 Création d’un squelette Svelte standard avec Vite 00:02:51
  • 09 Les interpolations 00:07:46
  • 10 Exercice 00:05:30
  • 11 Variables réactives 00:05:02
  • 12 Data binding 00:09:36
  • 13 Plusieurs composants dans une application Svelte 00:07:59
  • 14 Utilisation d’un objet JSON pour les props 00:02:57
  • 15 Passage de fonctions d'un composant à un autre 00:09:09
  • 16 Interpolations en texte brut ou en HTML 00:02:57
  • 17 Classes conditionnelles 00:04:56
• Conditions, boucles et gestion événementielle
  • 18 Exécution de code HTML conditionnellement 00:07:18
  • 19 Boucles each 00:08:35
  • 20 Deux paramètres dans une boucle each 00:09:35
  • 21 Parcours d’objets JSON avec each 00:02:22
  • 22 Gestion événementielle de la souris 00:04:01
  • 23 Gestion événementielle du clavier 00:06:47
  • 24 Les modificateurs d’événements (event modifiers) 00:05:43
• Les composants
  • 25 Première approche des composants gratuit 00:08:26
  • 26 Encore plus de composants 00:14:21
  • 27 Passer des données d'un enfant au parent avec des Custom Events 00:09:07
  • 28 Transmission de données au parent avec un Custom Event 00:03:24
  • 29 Chaînage d'événements de composant à composant 00:09:42
  • 30 Chaînage d'événements du DOM 00:05:47
• Slots et Lifecycle hooks
  • 31 Slots simples 00:07:26
  • 32 Slots nommés 00:03:25
  • 33 Slot par défaut 00:01:29
  • 34 Affichage conditionnel de slots 00:05:40
  • 35 Utilisation conjointe de slots et de props dans une application Svelte 00:03:29
  • 36 Lifecycle Hooks 00:01:34
  • 37 Interfaçage d'une API REST dans le hook onMount 00:13:00
  • 38 Utilisation du bloc {#await} 00:02:26
  • 39 Interfaçage de la base de données The Movie Database 00:13:48
  • 39B Suite Interfaçage de la base de données The Movie Database 00:10:36
• Gestion des formulaires
  • 40 Input de type text et input de type number 00:02:25
  • 41 Input de type radio et de type checkbox 00:07:09
  • 42 Select et option 00:03:47
  • 43 Les autres balises input 00:03:36
  • 44 Binding avec un composant 00:05:14
  • 45 Challenge 00:12:11
  • 46 Validation d'un formulaire côté front 00:07:14
• Les stores de Svelte
  • 47 Les stores de Svelte gratuit 00:01:14
  • 48 Un premier exemple 00:11:22
  • 49 Challenge 00:18:05
  • 50 Éviter les fuites mémoire avec unsubscribe() 00:04:30
  • 51 Faciliter l'accès au store 00:01:36
  • 52 Ajout d'une fonctionnalité pour supprimer un livre 00:06:18
  • 53 Déplacement de la logique programmatique dans le store 00:07:14
  • 54 Readable stores 00:09:01
• Animations et transitions
  • 55 Animation de nombres avec le module motion 00:10:15
  • 57 Action sur une propriété CSS inline 00:03:42
  • 58 Le store Spring 00:02:32
  • 59 Animations d'éléments HTML avec le module transition 00:07:33
  • 60 Animations d'éléments HTML avec le module transition 00:03:41
  • 61 Capturer le début et la fin d'une animation 00:03:22
  • 62 Utiliser des animations d'apparition et de disparition différentes 00:02:18
• Une application SPA avec Svelte
  • 63 Création d'une application SPA gratuit 00:03:07
  • 64 Un routeur basé sur le hashing 00:06:21
  • 65 Passage de paramètre dans l'URL 00:04:37
  • 66 Bouton et lien Page précédente dans les pseudo-pages 00:02:49
• SvelteKit
  • 67 Application de démonstration de SvelteKit 00:03:02
  • 68 L'architecture d'une applications SvelteKit 00:02:23
  • 69 Une application SvelteKit from scratch gratuit 00:04:52
  • 70 Utilisation de props dans les pages 00:07:03
  • 71 Création d'un composant de layout 00:08:33
  • 72 Définition de règles de styles globales 00:02:52
  • 73 Utilisation d'un layout spécifique à une ou plusieurs pages 00:01:04
  • 74 Charger des données de façon asynchrone 00:03:31
  • 75 Plusieurs sources de données 00:03:32
  • 76 Routes dynamiques 00:14:21
  • 77 Erreur dans une route dynamique 00:06:23