CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0

Vidéo non disponible ! Réessayez plus tard

DescriptionProgrammeAvis

7h 42min

77 leçons

Apprendre Svelte 3 et SvelteKit 1.0

129,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Public Cible

Développeurs front-end souhaitant apprendre Svelte et SvelteKit
Développeurs web souhaitant élargir leurs compétences
Étudiants en informatique ou développement web
Professionnels cherchant à se spécialiser dans le développement JavaScript

Pré-requis

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

Objectifs

Créer des interfaces utilisateur réactives
Acquérir toutes les bases nécessaires pour bien programmer en Svelte 3
Apprendre à hiérarchiser une application à l'aide de composants
Communiquer des données et fonctions de composant à composant
Utiliser des slots simples et nommés
Interfacer des API REST
Créer des applications Web SPA avec SvelteKit 1.0
Charger des données de façon asynchrone avec SvelteKit 1.0

Description

Découvrez notre formation "Apprendre Svelte 3 et SvelteKit 1.0", une opportunité unique pour maîtriser ce framework JavaScript ultra-rapide et moderne. Que vous soyez un développeur souhaitant créer des interfaces utilisateur réactives ou que vous cherchiez à construire des applications Web SPA robustes, cette formation vous apportera toutes les compétences nécessaires. Avec des instructions claires et des exercices pratiques, vous apprendrez à hiérarchiser une application, communiquer entre composants, interfacer des API REST et bien plus encore. Préparez-vous à devenir un expert en Svelte et SvelteKit !

Programme détaillé

Accueil de la formation

Module 1 - Introduction et premiers pas

Préparation de l’environnement de développement 04:34

Les extensions utiles dans VS Code 05:06

Le site Officiel de Svelte 05:59

Premiers pas avec Svelte via le REPL 06:34

Ajout d’un composant 04:09

Installation ou mise à jour de Node.js 03:48

Création d’un premier projet Svelte avec Vite 06:17

Module 2 - La syntaxe de base de Svelte

Création d’un squelette Svelte standard avec Vite 02:50

Les interpolations 07:46

Exercice 05:29

Variables réactives 05:02

Data binding 09:36

Plusieurs composants dans une application Svelte 07:58

Utilisation d’un objet JSON pour les props 02:56

Passage de fonctions d'un composant à un autre 09:08

Interpolations en texte brut ou en HTML 02:57

Classes conditionnelles 04:55

Module 3 - Conditions, boucles et gestion événementielle

Exécution de code HTML conditionnellement 07:17

Boucles each 08:35

Deux paramètres dans une boucle each 09:34

Parcours d’objets JSON avec each 02:22

Gestion événementielle de la souris 04:00

Gestion événementielle du clavier 06:47

Les modificateurs d’événements (event modifiers) 05:43

Module 4 - Les composants

Première approche des composants 08:25

Encore plus de composants 14:20

Passer des données d'un enfant au parent avec des Custom Events 09:06

Transmission de données au parent avec un Custom Event 03:23

Chaînage d'événements de composant à composant 09:42

Chaînage d'événements du DOM 05:46

Module 5 - Slots et Lifecycle hooks

Slots simples 07:26

Slots nommés 03:24

Slot par défaut 01:28

Affichage conditionnel de slots 05:39

Utilisation conjointe de slots et de props dans une application Svelte 03:28

Lifecycle Hooks 01:33

Interfaçage d'une API REST dans le hook onMount 12:59

Utilisation du bloc {#await} 02:26

Interfaçage de la base de données The Movie Database 13:48

Suite Interfaçage de la base de données The Movie Database 10:35

Module 6 - Gestion des formulaires

Input de type text et input de type number 02:24

Input de type radio et de type checkbox 07:09

Select et option 03:47

Les autres balises input 03:35

Binding avec un composant 05:13

Challenge 12:10

Validation d'un formulaire côté front 07:14

Module 7 - Les stores de Svelte

Les stores de Svelte 01:14

Un premier exemple 11:22

Challenge 18:05

Éviter les fuites mémoire avec unsubscribe() 04:30

Faciliter l'accès au store 01:36

Ajout d'une fonctionnalité pour supprimer un livre 06:17

Déplacement de la logique programmatique dans le store 07:13

Readable stores 09:01

Module 8 - Animations et transitions

Animation de nombres avec le module motion 10:14

Action sur une propriété CSS inline 03:41

Le store Spring 02:31

Animations d'éléments HTML avec le module transition - Partie 1 07:32

Animations d'éléments HTML avec le module transition - Partie 2 03:41

Capturer le début et la fin d'une animation 03:22

Utiliser des animations d'apparition et de disparition différentes 02:17

Module 9 - Une application SPA avec Svelte

Création d'une application SPA 03:07

Un routeur basé sur le hashing 06:21

Passage de paramètre dans l'URL 04:36

Bouton et lien Page précédente dans les pseudo-pages 02:49

Module 10 - SvelteKit

Application de démonstration de SvelteKit 03:01

L'architecture d'une applications SvelteKit 02:23

Une application SvelteKit from scratch 04:52

Utilisation de props dans les pages 07:02

Création d'un composant de layout 08:33

Définition de règles de styles globales 02:51

Utilisation d'un layout spécifique à une ou plusieurs pages 01:03

Charger des données de façon asynchrone 03:30

Plusieurs sources de données 03:31

Routes dynamiques 14:20

Erreur dans une route dynamique 06:23