$ 50.00

Tuto Svelte de A à Z avec JavaScript

$ 50.00

  • Une formation vidéo de 4h41m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Apprenez à utiliser Svelte, le dernier venu des Frameworks JS.

Enfin Framework... Disons que c'est plutôt un hybride ; un Framework dans un compilateur.
Un Framework car il va vous proposer un cadre de travail, avec ses méthodes et ses fonctionnalités.
Un compilateur car il va compiler votre code en temps réel en JavaScript natif !

Qu'est ce qu'on peut créer avec Svelte ?

Des applications web, c'est à dire, des sites avec beaucoup de fonctionnalités (comme Google Drive ou Spotify par exemple).
Le tout sous forme de SPA (single page application), où tout votre site va être rendu dans une page HTML, ce qui évite d'avoir des temps de chargements entre chaque pages (composants).
 

Est ce que c'est le bon Framework pour un débutant ?

Oui ! Beaucoup disent que c'est LE Framework parfait pour se lancer. Il a été pensé pour être simple d'utilisation.

Qu'est qui le différencie vraiment de React et Vue ?

Svelte, comme son nom l'indique, est léger.
Il ne va pas embarquer une librairie ou un framework et son "runtime" quand on va mettre un projet en ligne. Il va seulement compiler notre code, en rajoutant quelques fonctionnalités de Svelte pour gérer les mises à jour du DOM.

En parlant de DOM, pas de DOM virtuel avec Svelte, le DOM virtuel étant une copie du DOM qui permet de détecter ses changements, lorsqu'on travaille avec React ou Vue. Ici, Svelte arrive au même résultat sans DOM virtuel, juste avec quelques modules, ce qui lui fait gagner en performance.
 

Au programme de ce tuto Svelte de A à Z

Voici les notions que nous allons aborder dans ce cours en ligne

  • Découverte des bases de Svelte (Props,Classes dynamiques, conditions …).
  • Utilisation de formulaires.
  • La réactivité, un concept de Svelte.
  • Les composants dans le détail.
  • Création d’UI avec Svelte (modale, onglets, navbar responsive).
  • Utiliser les « store ».
  • Projet app web : Pokédex & Application de calcul des dépenses.
  • Le routing et le serveur side rendering avec Sapper.

Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Rendez-vous de l'autre côté !

Table des matières de cette formation JavaScript (durée : 4h41m)

  • Introduction
    • Introduction gratuit 00:04:19
    • Éditeur de texte gratuit 00:03:47
  • Découvrons les bases de Svelte
    • Mise en place gratuit 00:03:31
    • Explication des fichiers gratuit 00:06:56
    • Faire des expressions avec les accolades 00:01:50
    • Découverte de fonctionnalités de base 00:02:36
    • Utiliser plusieurs composants 00:05:52
    • Les "props" avec Svelte 00:02:44
    • Les props par défauts et l'utilisation d'objet pour les props 00:05:02
    • Les classes CSS dynamiques 00:04:23
  • Les conditions
    • Les conditions : if 00:01:15
    • Les conditions : "Else" "Else if" 00:04:12
    • Créer une boucle avec "each" 00:02:53
    • Rajouter une clé nouveau 00:02:52
  • Utiliser les formulaires
    • Installer un framework CSS 00:01:31
    • Les "input" de base 00:04:18
    • Lier input et donner avec le "two-ways data binding" 00:01:38
    • Envoyer et recevoir des données avec notre formulaire 00:05:09
    • Les inputs "number", "range" & "textaera" 00:09:12
  • La réactivité avec Svelte
    • Créer une variable réactive 00:05:08
    • Exécuter une méthode réactive 00:02:01
    • Le système réactif des tableaux avec Svelte 00:04:36
  • Les composants dans le détail
    • Les évenements et les fonctions inline 00:02:55
    • Les "events modifiers" 00:03:10
    • Contrôler un événement de base avec un composant parent 00:02:14
    • Les événements personnalisés 00:04:18
    • Utiliser les "slot" 00:03:07
    • Le cycle de vie des composants 00:01:28
    • Les méthodes du cycle de vie 00:04:47
  • Création UI avec Svelte
    • Créer une fenêtre modale 00:06:22
    • Créer un système d'onglets 00:09:58
    • Créer une navbar responsive 00:15:33
  • Utiliser les stores
    • Utiliser un store "writable" 00:07:23
    • Nettoyer un abonnement 00:06:07
    • Abonner plusieurs composants d'un coup 00:03:40
    • Le store de type "readable" 00:05:28
    • Le "custom store" 00:05:49
    • Créer un dark / light avec Svelte 00:12:01
  • Créer une application web "pokédéx"
    • Mise en place 00:05:48
    • Interface contenu et recherche 00:08:58
    • Premier appel d'API 00:04:01
    • Récupérer le nom en FR et les images 00:11:20
    • Afficher les cartes 00:07:41
    • Gérer la partie recherche 00:08:52
  • Créer une app de calcul de dépenses
    • Mise en place 00:07:51
    • Créer des cartes et les afficher 00:08:09
    • Rajouter un élément 00:07:02
    • Supprimer un élément 00:04:39
    • Afficher le total réactif 00:02:49
  • Créer un système de routing avec Sapper
    • Qu'est ce que le "Routing" et le "Server side rendering" ? 00:04:44
    • Création d'un dossier avec Sapper 00:03:29
    • Explication des fichiers 00:04:17
    • Créer des routes de base 00:02:02
    • Ajouter des liens de navigation 00:03:05
    • Créer des sous-menus de navigation 00:02:18
    • Migrer l'application de dépense vers notre dossier Sapper 00:04:49



Formateur : Enzo Ustariz

Enzo Ustariz a publié 39 tutoriels et obtenu une note moyenne de 4,9/5 sur 1 128 tutoriels vendus. Voir les autres formations de Enzo Ustariz

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1202 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données