CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Organiser des pages avec des layouts spécifiques dans SvelteKit

Organiser des pages avec des layouts spécifiques dans SvelteKit

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

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

Regroupement de pages et définition de layouts

Objectifs

Apprendre à configurer des layouts spécifiques pour des groupes de pages dans SvelteKit afin d'améliorer la modularité et l'organisation des projets.

Résumé

Apprenez à regrouper plusieurs pages dans un dossier et à appliquer un layout spécifique dans SvelteKit.

Description

Dans cette leçon, nous allons explorer comment regrouper plusieurs pages au sein de dossiers portant des noms quelconques mais entourés de parenthèses. Ces parenthèses n'influencent pas le chemin des pages regroupées, ce qui permet une organisation flexible. En définissant un fichier layout.svelte dans chaque groupe, ce layout sera appliqué à toutes les pages du groupe concerné. Par exemple, deux groupes de pages nommés 'courrier' et 'cursive' peuvent être définis, chacun contenant des pages distinctes. Aucune définition de layout global n'est requise, chaque groupe appliquera son propre layout aux pages qu'il contient. Vous verrez également dans la prochaine vidéo comment charger des données de façon asynchrone dans un composant SvelteKit.

Questions - réponses

Quelle est l'utilité des parenthèses autour des noms de dossiers dans SvelteKit?

Les parenthèses permettent de regrouper des pages sans affecter leur chemin, facilitant ainsi l'organisation du projet.

Que se passe-t-il si aucun layout global n'est défini?

Les pages utiliseront le layout défini dans leur groupe respectif s'il n'existe pas de layout global.

Quel est l'avantage d'utiliser des layouts spécifiques pour des groupes de pages?

Cela permet une modularité accrue et une meilleure organisation, chaque groupe de pages pouvant avoir un design et une structure distincts.

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