CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Tutoriel sur le Routage Dynamique avec SvelteKit

Tutoriel sur le Routage Dynamique avec SvelteKit

Routes dynamiques

Vidéo non disponible ! Réessayez plus tard

7h 42min

77 leçons

Transcription

Cette leçon fait partie de la formation

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

DescriptionProgrammeAvis

7h 42min

77 leçons

Cette leçon fait partie de la formation

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

Introduction au Routage Dynamique

Objectifs

Les objectifs de cette vidéo sont les suivants :

Comprendre le concept de routage dynamique.
Apprendre à configurer un projet SvelteKit.
Mettre en place des routes dynamiques pour accéder à différents contenus.
Interagir avec une API externe pour récupérer et afficher des données.
Créer et structurer des composants en Svelte.

Résumé

Découvrez comment implémenter le routage dynamique avec SvelteKit pour accéder à différents articles de blog de manière dynamique.

Description

Dans cette leçon, vous apprendrez à mettre en place un routage dynamique en utilisant SvelteKit, un framework moderne pour construire des applications web. Vous allez créer une application qui utilise l'API JSON Placeholder pour obtenir et afficher des articles de blog. Nous allons d'abord configurer un projet SvelteKit, puis définir des routes dynamiques pour afficher des articles selon leur identifiant. Vous découvrirez comment interagir avec une API externe, récupérer des données et les afficher dans le navigateur. La leçon couvre également la création de composants Svelte et la gestion de données asynchrones avec JavaScript. Les points suivants seront abordés : configuration initiale du projet, création des composants, définition des routes dynamiques, récupération et affichage des données.

Cette leçon est conçue pour les développeurs web souhaitant améliorer leurs compétences en SvelteKit et apprendre les bases du routage dynamique dans des applications modernes.

Questions - réponses

Qu'est-ce que le routage dynamique?

Le routage dynamique permet de créer des routes qui peuvent varier selon des paramètres, comme accéder à différents articles de blog en fonction de leur identifiant.

Comment SvelteKit facilite-t-il le routage dynamique?

SvelteKit permet de définir des routes dynamiques en utilisant des dossiers et fichiers avec des crochets dans le répertoire des routes.

Quelle API externe est utilisée dans cette vidéo pour les articles de blog?

L'API JSON Placeholder est utilisée pour obtenir des articles de blog basés sur du texte lorem ipsum.

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